> ## Documentation Index
> Fetch the complete documentation index at: https://docs.authsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web SDK

> Learn how to use the Authsignal Web SDK.

The Authsignal Web SDK can be used to:

* Launch the pre-built UI to let users set up MFA and complete challenges
* Sign up and sign in users using passkeys or security keys
* Build custom UIs for authenticating with email OTP, SMS OTP, WhatsApp OTP, authenticator app, push, or QR code

<Card title="GitHub repository" icon="github" href="https://github.com/authsignal/authsignal-browser" horizontal />

## Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @authsignal/browser
  ```

  ```bash yarn theme={null}
  yarn add @authsignal/browser
  ```

  ```bash pnpm theme={null}
  pnpm add @authsignal/browser
  ```

  ```bash bun theme={null}
  bun add @authsignal/browser
  ```
</CodeGroup>

This will add our module to your `package.json`.

## Initialization

Initialize the client with your tenant ID and the API URL for your region.

```ts theme={null}
import { Authsignal } from "@authsignal/browser";

const authsignal = new Authsignal({
  tenantId: "YOUR_TENANT_ID",
  baseUrl: "YOUR_REGION_BASE_URL",
});
```

You can find your `tenantId` in the [Authsignal Portal](https://portal.authsignal.com/organisations/tenants/api).

You must specify the correct `baseUrl` for your tenant's region.

| Region        | API URL                            |
| ------------- | ---------------------------------- |
| US (Oregon)   | `https://api.authsignal.com/v1`    |
| AU (Sydney)   | `https://au.api.authsignal.com/v1` |
| EU (Ireland)  | `https://eu.api.authsignal.com/v1` |
| CA (Montreal) | `https://ca.api.authsignal.com/v1` |

### Parameters

<ResponseField name="tenantId" type="string" required>
  Your Authsignal tenant ID, found in the [Authsignal Portal](https://portal.authsignal.com/organisations/tenants/api).
</ResponseField>

<ResponseField name="baseUrl" type="string">
  The API URL for your tenant's region. See the [region table](#initialization) above.
</ResponseField>

<ResponseField name="onTokenExpired" type="function">
  A callback invoked when the current token expires. Use it to prompt the user to re-authenticate or to
  fetch a fresh token.
</ResponseField>

<ResponseField name="cookieName" type="string">
  The name of the cookie used to persist the anonymous device ID. Defaults to `__as_aid`.
</ResponseField>

<ResponseField name="cookieDomain" type="string">
  The domain used when setting the anonymous device ID cookie. Defaults to the current
  `location.hostname`.
</ResponseField>

<ResponseField name="enableLogging" type="boolean">
  Whether to log SDK warnings and errors to the console. Defaults to `false`.
</ResponseField>

## Usage

<CardGroup>
  <Card title="Passkeys" href="/sdks/client/web/passkeys" horizontal />

  <Card title="Security keys" href="/sdks/client/web/security-key" horizontal />

  <Card title="Email OTP" href="/sdks/client/web/email-otp" horizontal />

  <Card title="Email magic link" href="/sdks/client/web/email-magic-link" horizontal />

  <Card title="SMS OTP" href="/sdks/client/web/sms" horizontal />

  <Card title="WhatsApp OTP" href="/sdks/client/web/whatsapp" horizontal />

  <Card title="Authenticator app" href="/sdks/client/web/totp" horizontal />

  <Card title="Push verification" href="/sdks/client/web/push-verification" horizontal />

  <Card title="QR code verification" href="/sdks/client/web/qr-code-verification" horizontal />

  <Card title="Launching the pre-built UI" href="/sdks/client/web/prebuilt-ui" horizontal />
</CardGroup>
