Redirect Issue: Successfully Logging in with Okta but Redirected to Okta Dev Dashboard Instead of redirectUri

[HappyEngineer]

const oktaAuth = new OktaAuth({
    issuer: 'https://dev-xx.okta.com',
    clientId: 'xxxx',
    redirectUri: 'https://localhost:3000/login?next=/home',
    scopes: ['openid', 'profile', 'email']
  })

<v-btn @click="clickFn()">
     {{ "Login with Okta"}}
</v-btn>

clickFn: async () => {
      try {
        await oktaAuth.signInWithRedirect()
      } catch (e) {
        console.log(e)
      }
    }

I added a ‘Login with Okta’ button on my SPA using oktaAuth.signInWithRedirect, but it didn’t redirect back to the redirectUri after I logged in on the Okta login page.
Here’s the steps:

1. I clicked the ‘Login with Okta’ button, and the page redirected to the Okta login page.
2. I clicked ‘Sign in with Google’ to log in.
3. After logging in using my Google account, the page redirected back to the Okta login page.
4. Then the page redirected to the Okta dev dashboard, but not to the redirectUri.

I tried oktaAuth.signInWithRedirect(originalUri: ''), but it didn’t work.
Any suggestions would be greatly appreciated!

My settings:

[andrea]

Are you using an Okta Classic org, or an Okta Identity Engine org?

What you’re describing sounds similar to a limitation in Okta Classic that, in a self-hosted widget, Federated Users (e.g. users from an external IdP like Google) will only be logged into Okta, but the /authorize request is not made (this is mentioned in the widget readme here).

If this is an Okta Classic org, there’s a solution for this outlined here: Social auth redirect not working with Okta Sign-In Widget | Okta Help Center

[andrea]

I should note that that solution still requires your application to issue an /authorize request itself. Setting the fromURI as in that example only ensures the user isn’t redirected to the dashboard, but the OAuth flow will not be made until your application kicks it off

[HappyEngineer]

Thanks for your reply!!!
I’m new to Okta development, could you talk more about how to make /authorize request in this case? I’ve gone through the post you shared, but the solution is still unclear to me, does it means I should replace window.location.href = " https://{ oktaDomain}/sso/idps/{googleIdpId}?fromURI=" +encodeURI(redirectUrl); with await oktaAuth.signInWithRedirect()?
By the way, I use @okta/okta-auth-js but not Okta-Sign-In Widget.

[HappyEngineer]

Thanks!!! I edited the link of ‘sign with google’ on the Customized Help Links section, and it can redirect correctly now! Thanks!!!