Embedded Passwordless Authentication for SPAs

Using Auth0's SDKs to implement Embedded Login

You can implement Passwordless Login using Auth0's Lock widget, or if you need complete control of the user experience, you can implement it using Auth0.js:

Configure Cross-Origin Resource Sharing (CORS)

For security purposes, your app's origin URL must be listed as an approved URL. If you have not already added it to the Allowed Callback URLS for your application, you will need to add it to the list of Allowed Origins (CORS).

  1. Navigate to Auth0 Dashboard > Applications > Applications, and select the name of your application to see its settings.

  2. Locate Allowed Origins (CORS), enter your application's origin URL, and select Save Changes.

Customize MFA

Customize MFA with embedded flows. Use the MFA API to allow users to enroll and challenge with factors of their choice that are supported by your application.

When using Lock for Web, the oauth/token endpoint returns the mfa_required error and includes the mfa_token you need to use the MFA API and mfa_requirements parameter with a list of authenticators your application currently supports:

{
  "error": "mfa_required",
  "error_description": "Multifactor authentication required",
  "mfa_token": "Fe26...Ha",
  "mfa_requirements": {
    "challenge": [
      { "type": "otp" },
      { "type": "push-notification" },
      { "type": "phone" },
      { "type": "recovery-code" }
      { "type": "email"} //can only work with challenge
    ]
  }
}

Was this helpful?

/

Use the mfa_token to call the mfa/authenticator endpoint to list all factors the user has enrolled and match the same type your application supports. You also need to obtain the matching authenticator_type to issue challenges:

[
  {
    "type": "recovery-code",
    "id": "recovery-code|dev_qpOkGUOxBpw6R16t",
    "authenticator_type": "recovery-code",
    "active": true
  },
  {
    "type": "otp",
    "id": "totp|dev_6NWz8awwC8brh2dN",
    "authenticator_type": "otp",
    "active": true
  }
]

Was this helpful?

/

Proceed to enforce the MFA challenge by calling the request/mfa/challenge endpoint.

Further customize your MFA flow with Auth0 Actions. To learn more, read Actions Triggers: post-challenge - API Object.