authState not changing after showSignInToGetTokens

[msch92]

I’m using an embedded okta sign-in widget for users to register in my signup page as follows:

const signIn = new OktaSignIn({
    baseUrl: `https://dev-xxx.okta.com`,
    clientId: 'xxx',
    redirectUri: window.location.origin,
    features: {
        registration: true,
    }
  })

        signIn.showSignInToGetTokens({
            el: '#signup'
        }).then((res: any) => {
            console.log(res)
        }).catch((err: any) => {
            console.log(err);
        });

        signIn.on('ready', () => {
            // we want to show the widget signup instead of signin, this is a hack
            document.getElementsByClassName('registration-link')[0]?.click();
        })

However after successful registration, the authState from useOktaAuth hook is unchanged. Am I missing a step? Do I need to sign in users after they register?

[msch92]

hello, any thoughts here ?

[brh55]

It seems you are also using okta-react, given the useOktaAuth. If so, can you also provide your code around your Security wrapper, or provide the code where you are retrieving the authState.

[msch92]

@brh55

sure, the code around the security wrapper is as follows

const oktaAuth = new OktaAuth({
  issuer: `https://dev-xxx.okta.com/oauth2/default`,
  clientId: 'xxx',
  scopes: ['openid', 'profile'],
  restoreOriginalUri: async () => {
    window.location.href = window.location.origin + DASHBOARD;
  }
})

<Security oktaAuth={oktaAuth} onAuthRequired={() => {
  window.location.href = SIGNIN;
  }>
   <App/>
</Security>

And the oktaAuth in the component is retrieved as:

const { oktaAuth } = useOktaAuth();

[msch92]

I should note we have a custom sign in as follows:

        oktaAuth.signInWithCredentials({ username, password })
        .then((res) => {
          const { sessionToken } = res;
          if (res.status === 'SUCCESS') {
            oktaAuth.token.getWithoutPrompt({
                responseType: 'id_token',
                sessionToken,
              })
              .then((res) => {
                const { tokens } = res;
                oktaAuth.handleLoginRedirect(tokens);
              })
              .catch(() => {
              });
          }
        })

which works as expected

[brh55]

From what I can see, your set up is fine and redirect looks fine. Hard tell what else might be missing without exploring the codebase.

Check out this sample app: samples-js-react/custom-login/src at master · okta/samples-js-react · GitHub

Just to make sure your widget wrapper is created properly to track side-effects (useEffect) and state changes reflect.