Browser API

The Authsignal Browser API can be used to launch the Authsignal Prebuilt MFA page to let users set up MFA and complete challenges.

Installation

To install the Authsignal client as an npm package, run:

npm

npm install @authsignal/browser

Yarn

yarn add @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({
  publishableKey: "YOUR_PUBLISHABLE_KEY",
});

You can find your publishable key in the API Keys section of the Authsignal Portal Settings page.

launch

launch lets you launch the Authsignal Prebuilt MFA page.

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.

Pop-up launch option

Redirect launch option

Arguments

Name	Type	Description
url	string	The URL which was returned as the result of a track request made using the Authsignal Server API.
options	LaunchOptions | undefined	The options used when launching the Authsignal Prebuilt MFA page.

Types

LaunchOptions

type LaunchOptions = {
  /**
   *  How the Authsignal Prebuilt MFA page 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`.
   */
  mode?: "popup" | "redirect";
  popupOptions?: {
    /** Any valid CSS value for the `width` property. */
    width: string;
    /** Any valid CSS value for the `height` property. */
    height: string;
  };
};

TokenPayload

type TokenPayload = {
  token?: string;
};

Returns

When mode is set as popup it returns a Promise<TokenPayload> that resolves when the popup closes.

TokenPayload is an object with a token property that can be used to verify the outcome of the user action.

Configuration options

popupOptions

Used to configure the dimensions of the popup. Has width and height which accept any valid values for their respective CSS properties. Note that popupOptions is only available when mode is set to popup.

const options: LaunchOptions = {
  mode: "popup",
  popupOptions: {
    width: "500px",
    height: "600px",
  },
};