Full MFA Flow from server to client

Ready to post? :magnifying_glass_tilted_left: First, try searching for your answer.
I’m using an Angular web app with NON universal login.
I would like to understand the full flow of implementing MFA with auth0 and specifically how do I update the client with the ID Token gained by MFA flow.

As I understood from the enroll-and-challenge-email-authenticators documentation:
The MFA should be handled in the server side since it requires to provide the client secret. I wonder what is the procedure to store the ID Token in the client after is was received from the MFA flow in the server? Is there a client library that stores it in a cookie, or should I do it manually?

Also is there a client library that can automatically periodically gain new refresh tokens once the first id token was received from the MFA flow?

Hi @eytan.h,

Welcome to the Auth0 Community!

I guess what you might be referring to is a MFA Access Token, which can be obtained by following the Resource Owner Password Flow with MFA, which is used if you want to enforce MFA from the application’s side and enroll or challenge users using the MFA API.

To handle MFA enrollment on the application side, you are correct when suggesting that this operation should be handled server-side since the ROPG flow requires making a request with a client secret. So you firstly need to initiate the authentication from your backend by following the steps provided in this documentation on how to Authenticate Using the Resource Owner Password Flow with MFA.

Afterwards you will have to initiate and verify the MFA Challenge and get the tokens ( ID Token, Access token with specific claims that the mfa challenge was bypassed and Refresh Token ) and send them securely to your frontend application ( preferably using a secure http cookie ).

Also to mention, the Auth0 angular SDK is designed to work using the Universal Login, so implementing the ROPG Flow ( although not recommended - see Common Issues with Resource Owner Password Flow and Attack Protection ) would require creating a separate backend service and custom logic for achieving the steps mentioned earlier. Therefore the Angular SDK will not provide a lot of support, since this requires a custom implementation.

Also to answer your last question, in this ROPG flow you applications are responsible for manually storing the tokens.

I hope this helps clarify a few things, so the recommended approach of implementing MFA and taking advantage of the SDK would be using the Universal Login if possible and if you have other questions please feel free to ask!

Best regards,
Remus

Thank you Remus,

Asuuming I transfer the ID Token from the server to the client, can I use the SDK to handle the tokens refresh automatically for me, or do I need to refresh it manually with a scheduler?

Thanks

Hi @eytan.h,

The Auth0 Angular SDK is build primarily upon the Authorization Code Flow with PCKE, so when implementing another flow such the ROPG you’ll have to implement a custom logic to refresh the Access Token manually. This would require to check the expiry time of the Access Token or a scheduler and the Use of Refresh Tokens.

Hope this helps!
Thanks,
Remus