Multifactor authentication required error when trying to use getAccessTokenSilently function

[gwenf]

Checklist

• The issue can be reproduced in the auth0-vue sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Context:
I have an app that uses this library and the universal login and the login/logout/refresh system has been working fine.
I am trying to allow users to turn on MFA on their settings page and then be prompted for the code only when signing in, and not when they are using the app after they are already authenticated. The enable MFA part is working. For the login part, we use an action to check and only conditionally require mfa if they have it set up.

Problem:
The getAccessTokenSilently functionality always fails saying it requires mfa, even after the user has already logged in with mfa.
Now the user can set up mfa and log in with it fine, but then every request for a token will result in an error saying mfa required.
I used logs to try to debug the action. When I copy the event from the log and then use that JSON for testing inside the action, it works with no error. However, when I use it from the application, it fails.
I found several threads about this on the Auth0 help forum as well as issues inside some other SDKs (for React and Angular) but they did not help to resolve the issue. Example: auth0/auth0-angular#296

Reproduction

This problem occurs for all users with mfa setup.

1. Set up mfa for a user.
2. Try to use the getAccessTokenSilently function and it will fail with an error saying Multifactor authentication required.

Additional context

Here is the code for the action (when I check logs for this action, the variables all come out as expected):

exports.onExecutePostLogin = async (event, api) => {
    if (event.authentication && Array.isArray(event.authentication.methods) && event.user.multifactor?.length) {
        const authMethods = event.authentication?.methods || [];
        const isMFAAuthenticated = !!authMethods.find((method) => method.name === 'mfa');
        const isRefreshTokenProtocol = event?.transaction?.protocol === "oauth2-refresh-token";

        if (isMFAAuthenticated || isRefreshTokenProtocol) {
            api.multifactor.enable('none');
        } else if (!isMFAAuthenticated) {
            api.multifactor.enable('any', { allowRememberBrowser: true });
        }
    }
};

auth0-vue version

2.3.3

Vue version

3.2.29

Which browsers have you tested in?

Chrome, Firefox, Other

[frederikprijck]

Thanks for reaching out. This is actually an issue that originates from outside of this SDK. Our general docs show you how to configure silent authentication for MFA: https://auth0.com/docs/authenticate/login/configure-silent-authentication#silent-authentication-with-multi-factor-authentication

As you can see there, it does not exactly match with the code you have, I would recommend checking that out.

That said, when the action isn't working, and Auth0 returns MFA required, it's not something our SDKs can (or should) control.

I would also recommend reaching out the your contact at Auth0 through support, they should be able to get you in contact with the correct team.

[gwenf]

I did try the code from the docs first and I've been trying more things bc it doesn't work. I reached out to support last week.

I still think the docs should still be updated to show a good example of how to use MFA outside of setting it up and using it in the login flow only. I haven't worked at a single company where we used that method. We always have the ability to configure from the settings page.