Launching the pre-built UI
Learn more about the different ways you can launch the Authsignal pre-built UI.
The pre-built UI can be launched using Authsignal’s Web SDK in either redirect
or popup
mode. Alternatively, you can handle displaying the pre-built UI (via redirect or modal) yourself for this step - using the Authsignal Web SDK is optional.
Redirect mode
![](https://mintlify.s3-us-west-1.amazonaws.com/authsignal-23/images/docs/prebuilt-ui/redirect.gif)
Authsignal's pre-built UI in redirect mode
- Works with both client-side and server-side redirects.
- Typically looks better on mobile.
- Requires additional implementation to handle the redirect back to your app after the user completes the challenge, e.g. via a callback page.
- Passkey registration works seamlessly across browsers, e.g. when using the passkey uplift prompt.
Popup mode
![](https://mintlify.s3-us-west-1.amazonaws.com/authsignal-23/images/docs/prebuilt-ui/popup.gif)
Authsignal's pre-built UI in popup mode
- Allows users to complete authentication without leaving the context of your application.
- Simpler to implement if you need to maintain in-memory state in the browser during the authentication process, e.g. for a shopping cart or checkout flow.
- Support for passkey registration within an iframe is inconsistent across different browsers.
Both redirect mode and popup mode can be customized with your branding using our UI customization tool.
Integration steps
Step 1 - Backend
Obtain a URL by tracking an action on your backend.
Step 2 - Frontend
Redirect mode
Launch an enrollment or re-authentication flow by redirecting to the URL either server-side or client-side. The following code snippet demonstrates how to launch the pre-built UI client-side using the Authsignal Web SDK.
//Frontend
authsignal.launch(url);
The pre-built UI will be launched on your custom domain if you have set one up in the Authsignal Portal. If you don’t have a domain setup, the domain will be mfa.authsignal.com.
After the user completes the challenge, Authsignal will redirect them to the URL provided in your track action call, appending a token as a query parameter. You can use this token to determine the result of the challenge server-side.
Popup mode
Launch an enrollment or re-authentication flow. The following code snippet demonstrates how to do this with the Authsignal Web SDK.
//Frontend
const { token } = await authsignal.launch(url, { mode: "popup" });
Once the user has completed the challenge, the token returned from Authsignal’s launch
function can be used to determine the result of the challenge server-side.
Was this page helpful?