Javascript Okta Sign-In Widget - MFA not properly working

[TimFranklin]

Hi all, I’m having issues with the javascript/web based Okta sign-in widget on ipads when MFA is enabled. My app requires that the user re-authenticate with MFA per session, so I have that rule enabled in my app.

I added the prompt parameter in the OktaSignIn constructor and it seems to work within the browser on windows, OSX, and Android devices. But somehow when used on an iOS device in any browser, I get an error

Error found on my Ipad:

“the current sign on policy requires this client to redirect for re-authentication for MFA. Please contact your administrator.”

Code Snippet:

        const oktaSignIn = new OktaSignIn({
          baseUrl: `https://${OKTA_ORG_URL}`,
          redirectUri: REDIRECT_URI,
          clientId: OKTA_CLIENT_ID,
          authParams: {
            issuer: `https://${OKTA_ORG_URL}/oauth2/default`
          },
          prompt: "login" // * this seems to make MFA work
        });

        function loggedInHandler(user){
            //......logged in logic
        }

        function authFailureHandler(error){

          oktaSignIn.showSignInToGetTokens({
            el: '#okta-login-container'
          }).then(function(tokens) {
            oktaSignIn.authClient.tokenManager.setTokens(tokens);
            oktaSignIn.remove();
            const idToken = tokens.idToken;
            window.location.replace(HOME_URI) 
          }).catch(function(err) {
            console.error(err);
          });
        }
        
        oktaSignIn.authClient.token.getUserInfo().then(loggedInHandler, authFailureHandler);
  

Questions:

1. How do your properly configure MFA within the sign-in widget.
2. Is MFA in the widget supported on Ipads in firefox/chrome
3. Has anyone seen good samples for this

Any help on this would be greatly appreciated. Thank you!

[andrea]

Try using showSignInAndRedirect instead of showSignInToGetTokens.

A self-hosted widget cannot prompt a user for app-level MFA, they must be redirected to Okta (via the /authorize URL) to get prompted accordingly.

[TimFranklin]

Hi Andrea, Thank you for your help. I updated my code ro use showSignInAndRedirect and am getting an error in the query parameter:
PKCE code challenge is required when the token endpoint authentication method is ‘NONE’.
Using this approach, how do you work around this issue?

I should add that the application is entirely a front-end based application.

[andrea]

huh, it should be defaulting to use PKCE, but can you try setting pkce: true in your widget config?

The app you created in Okta is a SPA, right?

[TimFranklin]

Setting the pkce to true did work. I received both code and a state parameters back successfully.

It is an SPA. I’m now trying to track down an approach for handling these values on the front end. I can only use vanilla javascript for this project.

Thank you!

[andrea]

Take a look at handleLoginRedirect which can handle the callback. Check out the example from our SDK docs below for isLoginRedirect for how to check if a callback is happening

if (authClient.isLoginRedirect()) {
  // callback flow
  try {
    await authClient.handleLoginRedirect();
  } catch (e) {
    // log or display error details
  }
} else {
  // normal app flow
}