Skip to main content

Embed our pre built UI component

What type of UI are you using?

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?

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?