Skip to main content
Which UI do you use?
Custom UI
Pre built UI

Embed our pre built UI component

Case 1: Rendering the TOTP Widget in a page #

The following example shows the scenario where you have a dedicated route, such as /totp, for rendering the TOTP Widget. Upon a successful login, the user will be automatically redirected to the return value of getRedirectionURL (defaulting to /).

Do you use react-router-dom?
YesNo

In the above code snippet, we:

  1. Disabled the default TOTP UI by setting disableDefaultUI to true inside the TOTP recipe config.
  2. Overrode the getRedirectionURL function inside the MFA recipe config to redirect to /totp whenever we want to show the TOTP factor.

Feel free to customize the redirection URLs as needed.

Case 2: Rendering the TOTP Widget in a popup #

The following example shows the scenario where you embed the TOTP Widget in a popup, and upon successful login, you aim to close the popup. This is especially useful for step up auth.

Do you use react-router-dom?
YesNo
Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI