Web
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
Installation
To install the Authsignal client as an npm package, run:
npm install @authsignal/browser
This will add our browser library module to your package.json
.
Then you can initialize the Authsignal browser client in your code:
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.
You must specify the correct baseUrl
for your tenant’s region.
Region | Base URL |
---|---|
US (Oregon) | https://api.authsignal.com/v1 |
AU (Sydney) | https://au.api.authsignal.com/v1 |
EU (Dublin) | https://eu.api.authsignal.com/v1 |
anonymousId
The anonymous ID of the user’s device. This can be used as the deviceId
included in a track action call.
authsignal.anonymousId;
launch
launch
lets you launch the pre-built UI.
authsignal.launch(url, options);
Usage
After you’ve made a server-side track
call you’ll get back a url
which you can pass to the Browser API’s launch
function.
pre-built UI launched in popup mode
pre-built UI launched with a redirect
Arguments
The URL which was returned as the result of a track
request made using the
Authsignal Server API.
The options used when launching the pre-built UI.
How the pre-built UI should launch: popup
will cause it to open in a
overlay, whilst redirect
will trigger a full page redirect. If no value
is supplied, mode defaults to redirect
.
Any valid CSS value for the width
property.
Whether the popup is closable with the escape key and by clicking the backdrop.
Returns
When mode
is set as popup
it returns a Promise<TokenPayload>
that resolves when the popup closes.
The token that can be used to verify the outcome of the user action.
Passkeys
For more information visit our passkeys documentation.
Registering a new passkey
const resultToken = await authsignal.passkey.signUp({ token, userName });
Authenticating with an existing passkey
const resultToken = await authsignal.passkey.signIn({ token });
Using passkey autofill
This feature requires rendering a text input with the attribute autocomplete="username webauthn"
:
<input type="text" id="username" autocomplete="username webauthn" />
Then when the page loads, you should initialize the input for passkey autofill by running the following code:
authsignal.passkey.signIn({ autofill: true }).then((resultToken) => {
if (resultToken) {
// The user has focused your text input and authenticated with an existing passkey
// Send the token to your server to validate the result of the challenge
}
});
Was this page helpful?