Angular SPA with showSignInAndRedirect() code flow not working

I’m using Angular SPA with Okta sign-in widget. I have configured app-level MFA (Org-level MFA not configured.) When using showSignInAndRedirect() code flow it is redirecting to okta page for MFA and once successfully authenticated it comes back to login/callback route then redirect to login page and thereon not redirecting to home page. I’m sure missing something here on the redirect section.

 this.signIn = new OktaSignIn({

  baseUrl: envConfig.oidc.issuer.split('/oauth2')[0],

  clientId: envConfig.oidc.clientId,

  redirectUri: envConfig.oidc.redirectUri,

  logo: '/assets/images/logo.svg',

  i18n: {

    en: {

      'primaryauth.title': 'Sign in',

    },

  },

  authParams: {

    pkce: true,

    issuer: envConfig.oidc.issuer,

    scopes: envConfig.oidc.scopes,

  },

  prompt: "login"

});

this.signIn.showSignInToGetTokens({
  el: '#sign-in-widget',
  scopes: envConfig.oidc.scopes
}).then(async tokens => {
  // When navigating to a protected route, the route path will be saved as the `originalUri`
  // If no `originalUri` has been saved, then redirect back to the app root
  const originalUri = this.oktaAuth.getOriginalUri();
  if (originalUri === DEFAULT_ORIGINAL_URI) {
    this.oktaAuth.setOriginalUri('/');
  }
  // Remove the widget
  this.signIn.remove();
  // In this flow the redirect to Okta occurs in a hidden iframe
  this.oktaAuth.handleLoginRedirect(tokens);
}).catch(err => {
  // Typically due to misconfiguration
  throw err;
});

Please share if there is working sample available for showSignInAndRedirect() code flow for angular SPA.

Hello. I see couple things from your code snippet:

  1. It looks like you’re potentially using our sample app
  2. It looks like the snippet is using showSignInToGetTokens

I just ran our sample and the only change I did was replace showSignInToGetTokens with showSignInAndRedirect and it appears to be working. Are you able to get this working on our base sample?

Hi @Cale,

Thanks for the input. I noticed showSignInAndRedirect working fine in latest version of sample. But I’m using below Okta versions. Can you confirm versions does matter here?

"@okta/okta-angular": "^3.0.1",
"@okta/okta-signin-widget": "^5.5.0",