Okta signInWithRedirect() function doesn't return user data

[ShatKon]

Hi Okta Forum,

I am having a ReactJS SPA and I am trying to create a SignIn functionality using Okta.
Let me explain my use case:
So when you launch the application it takes you to a Landing page. This landing page has 3 routes inside it implemented.
if its (“/”) it takes to AuthenticationComponent
(“/login/callback”) takes it to LoginCallbackComponent which just redirects the user to /home
(“/home”) takes you to homepage of application

This landing page renders an “AuthenticationComponent” where user can sign in through simple email password based functionality or SSO using Okta SignIn.
Now when the user clicks on SSO button, it triggers this function:

const oktaAuth = new OktaAuth(oktaAuthConfiguration);
export const login = async (oktaAuth) => {
  try {
    await oktaAuth.signInWithRedirect();
  } catch (error) {
    console.error("Login error", error);
  }
};

My oktaAuthConfiguration looks something like this:

export const oktaAuthConfiguration = {
  issuer: `https://carrier.oktapreview.com`,
  clientId: "******************",
  clientSecret:
    "***************",
  redirectUri: `${window.location.origin}/login/callback`,
  responseType: ["code"], // Use 'code' for authorization code flow
  scopes: ["openid", "profile", "email"],
  pkce: true,
};

I am trying to fetch the user data after signing in but I am unable to get that. What wrong I am doing. I am very new to this and unable to understand how to do this. I went through documentation but it didn’t help much.

Will appreacite any help!

[andrea]

Once the user has completed login and been redirect from Okta, to the callback, and back to the original URI, they should have OIDC tokens available, so you should be able to call getUserInfo() at this point to receive user details.

[ShatKon]

For getUserInfo() we need tokens right. I am not getting those tokens.
and when I am trying to fetch the tokens, I am encountering the below error:

So when the /login/callback brings me to my component I am trying to fetch the tokens:

https://Org.oktapreview.com/oauth2/v1/token with the oktaAuth object in post method

Error handling authentication callback: OAuthError: Browser requests to the token endpoint must use Proof Key for Code Exchange.

[andrea]

How are you invoking /token?

If you’re using our React SDK, the built-in LoginCallback route should be doing this for you, but if you’re using AuthJS directly, you can use handleRedirect to ensure the code_verifier that was previously generated (when signInWithRedirect was called) is getting included when it makes the /token request.

[ShatKon]

Thanks for helping
Another issue was with Config mismatch on the Okta dev and my implementation method