Okta Sign-in Widget does nothing with token

I am having a similar issue as this user: Okta Sign In widget not Working outside localhost

My app is set up as specified in this guide: Sign in to your SPA with the embedded Okta Sign-In Widget | Okta Developer

The only difference is in onSuccess on the login page I added a console.log to do some debugging. It never gets fired, which leads me to believe the issue is in the widget.

It was previously working even without HTTPS, but now the sign-in just hangs - I am not sure why. I see a POST to https://.okta.com/api/v1/authn that succeeds and responds with a sessionToken. The Sign-in widget promise never hits onSuccess or onError.

These are the package versions:

    "@okta/okta-auth-js": "^6.5.4",
    "@okta/okta-react": "^6.6.0",
    "@okta/okta-signin-widget": "^6.7.1",
    "react-dom": "^18.1.0",
    "react-router-dom": "^5.3.3",
    "react-scripts": "^5.0.1",

It hangs on this screen, with the circle endlessly spinning in mockery:
firefox_qXXHAwUzOt

Which method are you calling to load the widget?

We’re calling widget.showSignInToGetTokens

We’ve moved to hosting on HTTPS to make sure there’s no issue there but we still have the same problem

Do you not do anything after showSignInToGetTokens succeeds? You’ll need to make sure you store the tokens AND hide the widget, as this method was designed for SPAs that do not want to redirect away to another route.

Can you try modelling your widget code like our sample below:

      el: '#sign-in-widget',
      scopes: sampleConfig.oidc.scopes
    }).then((tokens: Tokens) => {
      // Remove the widget
      this.signIn.remove();

      // In this flow the redirect to Okta occurs in a hidden iframe
      this.oktaAuth.handleLoginRedirect(tokens);
    }).catch((err: any) => {
      // Typically due to misconfiguration
      throw err;
    });

That code is for angular, but our OktaSignInWidget.jsx is already an exact copy of the React version of the linked sample.

The weird part about this is the sign-in stopped working without any code changes. I’ve checked a few times to make sure our code is 100% lined up with the samples and it is, so I really can’t figure out what is going wrong.

Got any solution for this problem. I am also stuck at the same situation.

@umeshvenkat As you might be experiencing a different issues from the original poster, please open another thread or, if you have a paid account, a support case to get assistance.

For me the password policy was not set properly which is why I was not getting the token.

1 Like

please tell me in more details how to solve this problem.I am also facing same issue

same issue I am facing. I am using react js