How to implement MFA step-up when using Auth0.js SDK for authentication

Hi,
We integrated a standard login procedure using Username-Password-Authentication via the auth0.js library (version 9.19.4) in our React application. Now for certain calls on our api we need to step up our authentication, to access those api’s. We would like to use the MFA using SMS for this. How should we integrate this? Couldn’t find any existing examples for this.

My thoughts:

  • I think i need to request an updated idToken (with extra scopes) via the MFA api’s (https://auth0.com/docs/api/authentication#multi-factor-authentication)? But i’m not sure how i should obtain the mfa_token in this case. When i have an updated idToken i can pass this on to the api and they can check the scopes for this idToken.
  • will the renewAuth() or the authorize() with an updated scope automatically trigger the MFA?

Any help, examples would be welcome.

Kind regards,
Daan

We are still having issues with this …

FYI: we are using an embedded login implementation using the auth0.js SDK. Using the universal login is not an option for us. We where using the implicit flow, but already refactored this to the Code authorization flow to test the following:

  • We created a rule that checks if a certain extra scope is asked for then it triggers the MFA error.
  • After that we tried to trigger this rule in our application
    • by doing a silent authentication using checkSession with the extra scope as a parameter. But this doesn’t work, we get a login_required error with description ‘Multi factor authentication is required’ in stead of a mfa_required error. The login_required error doesn’t have a mfa_token we can use to start the MFA flow
    • after that we enabled the refresh_token because we saw that the oauth/token call does trigger the mfa_required error (however we don’t think the refresh token is a good solution, we just wanted to check if this could work). And when refreshing the token with adding the scope in the body (which isn’t a known property) the rule is triggered and we get our mfa_required error with the mfa_token. And we can use this token to complete the MFA flow, but the token we get at the end doesn’t include our extra scope and we don’t have the AMR or ACR property in our id token as is described here (https://auth0.com/docs/multifactor-authentication/step-up-authentication/step-up-for-web-apps#sample-payloads). Probably because the refresh token grant doesn’t take the scope parameter into account.

Any idea what the best solution is to do a step-up authentication using the embedded screens (as well the login, as the screen to enter the OOB code)?

1 Like

Hey there @daanporon, I wanted to reach out and let you know I am looking into this and will relay what I find. Thanks!

1 Like

Following up on this @daanporon after checking with a senior engineer for clarity, I was able to confirm that the workflow you are pursuing is not successfully possible at this time. Since you are looking to leverage an embedded workflow the session isn’t directly established with Auth0. Since the session isn’t established in Auth0, silent authentication will always result in a failure.

You are seeing the mfa_required as a result of the silent authentication throwing an error directly associated with that, MFA being required. As the silent authentication is a non-interactive flow.

With all that being said, I would still suggest making a claim for your use case at Auth0.com/feedback as each claim is reviewed by our product team and helps set the tone for what comes next in our product roadmap.

Thanks,

The problem is that i’m not getting a mfa_required error when using silent auth, but a login_required error. If this would throw a mfa_required error then i would get a mfa_token that i could use to start MFA.

The workarround with using the refresh_token should work, no? actually it is working in our case, only when we retrieve the idToken after refresh and doing MFA … the idToken doesn’t contain anything that we can use to identify if MFA was executed or not … any idea about this?

There is no other way in retrieving a mfa_token when using the embedded login? if we want to trigger MFA manually, and upgrade our token?

I’m actually struggling with this myself and stumbled upon the refresh token solution as well. However, there are other ways to call the /oauth/token endpoint and get that mfa_required error with the token. You can also enable the password grant type and call the endpoint with a username and password. See grant types and api docs. This should be only for trusted first-party applications though :frowning: and seems just as hacky as the refresh token method. Embedded MFA should definitely be part of the product roadmap.

[Edit]: I see the UI-less guardian library here. Would it be possible to use this library to embed multi-factor authentication? I.e. flow would look like: call to authorize endpoint is made, user signs in through social identity provider, user is redirected back to app with access token. The UI-less guardian library is invoked with a challenge code obtained from the user, auth0 verifies the code, then the user is logged in if the verification succeeds.

I was thinking to set up another Auth0 Application, and use that to authenticate for these areas of our site.

Then we can manage users between the two spaces. Its not idea, but it should work.

Are there any reasons it wont, or is a terrible idea?

The other idea I had was to implement MFA locally to our server, and use Auth0 to store encryption keys for that data… but its not ideal

We are also facing this problem.

How can we setup multi factor authentication on our embedded login using Auth0.js SDK?
Were you able to solve this somehow? I have tried calling checkSession through the API but it only returns:

  1. code: “login_required”
  2. description: “Login required”
  3. error: “login_required”
  4. error_description: “Login required”