Skip to main content

Embed the pre-built UI component

What type of UI are you using?

Important

The snippets below assume that you are using the Passwordless recipe for Email / SMS OTP. But if you are using ThirdPartyPasswordless, that works as well.

Case 1. Rendering the widget in a page

The following example shows the scenario where you have a dedicated route, such as /otp, for rendering the Email / SMS OTP Widget. Upon a successful login, the user is automatically redirected to the return value of getRedirectionURL (defaulting to /).

Do you use react-router-dom?

In the above code snippet, the following actions occur:

  1. Disabled the default Passwordless MFA UI by setting disableDefaultUI to true inside the Passwordless recipe configuration.
  2. Overrode the getRedirectionURL function inside the MFA recipe configuration to redirect to /otp whenever the OTP factor needs to appear.
  3. The above snippet uses MfaOtpEmail for OTP-email factor, but if you are using OTP-phone, then you can use the MfaOtpPhone component. Be sure to also change the contactMethod prop in Passwordless.init to use PHONE or EMAIL_OR_PHONE, depending on if you are using email OTP / link as the first factor or not.

Feel free to customize the redirection URLs as needed.

Case 2. Rendering the widget in a popup

The following example shows the scenario where you embed the Email / SMS OTP 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?

The above snippet uses MfaOtpEmail for OTP-email factor, but if you are using OTP-phone, then you can use the MfaOtpPhone component. Be sure to also change the contactMethod prop in Passwordless.init to use PHONE or EMAIL_OR_PHONE, depending on if you are using email OTP / link as the first factor or not.