Skip to main content

Embed our 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 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 Passwordless MFA UI by setting disableDefaultUI to true inside the Passwordless recipe config.
  2. Overrode the getRedirectionURL function inside the MFA recipe config to redirect to /otp whenever we want to show the OTP factor.
  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 emial 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 emial otp / link as the first factor or not.