MFA: Enrolling OTP on NextJS frontend

[yanivs]

Hey,

I have a NextJS app that I want to protect via optional OTP that the user can turn on/off if he wants. I already did the following:

1. Enabled OTP in dashboard, but marked Require Multi-factor Auth as “Never”.
2. In my app, I have a page that sets “mfa” key in user_metadata to true/false.
3. Based on the value from #2, I have a onExecutePostLogin action that if mfa = true does api.multifactor.enable(“any”).

So far so good, everything is working perfectly. The thing is I’de like to do the enrolling part in my app, after user is already logged in. I saw these manuals:

How to set up MFA TOTP enrollment with MFA API

Problem Statement: How to set up MFA TOTP enrollment with Management API? Solution: Please follow the below steps: 1.Get the refresh token POST ​​https://{YOUR_DOMAIN}/oauth/token { "grant_type": "http://auth0.com/oauth/grant-type/password-realm", "client_id": "YOUR_CLIENT_ID", "client_secret": "YOUR_CLIENT_SECRET", "audience": "YOUR_DOMAIN/mfa/", "username": "USER_EMAIL OR USERNAME", "password": "USER_PASSWORD", "scope": "offline_access", "realm": "Username-Passwor…

Generate QR code for OTP enrollment

Problem statement I am implementing multifactor authentication, and building a custom enrollment page for users to manage their factors. I want to know how to generate the QR code in the front end. Cause Our product does not offer this functionality, so you need to use a third-party library. Solution When enrolling a new OTP factor, you will get the “barcode_uri” parameter in the response for the TOTP enrollment workflow. You can use the qrcode npm module (or any other library of your choi…

But it’s not clear to me. I don’t hold the username and password of the user, so how can I
send a refresh token request if i don’t have the user credentials?

does is mean i need to force the user to re-login or is there’s another option I don’t think of?

[marcelina.barycka]

Hey there @yanivs , welcome back!

I don’t hold the username and password of the user, so how can I
send a refresh token request if i don’t have the user credentials?

With the Refresh token grant flow:

-you receive one refresh token once the user authenticated (along with the access and or ID tokens). This refresh token is suppose to be stored in your app memory so you can make use of it whenever its needed (like for example to request new refresh token).

To implement the refresh token grant, there’s a need to add:
1.

scope=offline_access

to the /authorize request (the one that initiates the authentication process) on your app code side.
2. Please enable the Refresh token grant flow for the application (client app) in question in your Auth0 tenant.
3. Please Allow Offline Access for the API in question in your Auth0 tenant, under Access Settings section.

Happy to follow up in case of more questions on this topic!