Not Able to Authorize user and get the toke

Questions OAuth/OIDC
1

While i am trying to use the following code to authenticate the user
await oktaAuth.signInWithRedirect()

It gets redirected to okta and user is also validated but i am not able to get the value of authState.isAuthenticated as true
Can you guide me on this @andrea
I am using @okta/okta-react and @okta/okta-auth-js in my app.

2

Are you using Okta React’s LoginCallback component to handle the authorization code/tokens being returned to the provided redirect_uri?

3

Yes It redirects me to the below URL
http://localhost:3000/oidc/callback?code=CODE&state=STATE

4

Right, the /authorize call made by signInWithRedirect will send the user back to the redirect_uri. So while we know that that method appears to be working fine, we need to make sure your application knows what to do when Okta redirects back into your application. This is why I wanted to know if you were using the LoginCallback component to handle retrieving and storing the user’s tokens.

For example, in our sample app, the routes are configured as below:

return (
    <Security
      oktaAuth={oktaAuth}
      onAuthRequired={customAuthHandler}
      restoreOriginalUri={restoreOriginalUri}
    >
      <Navbar {...{ setCorsErrorModalOpen }} />
      <CorsErrorModal {...{ corsErrorModalOpen, setCorsErrorModalOpen }} />
      <AuthRequiredModal {...{ authRequiredModalOpen, setAuthRequiredModalOpen, triggerLogin }} />
      <Container text style={{ marginTop: '7em' }}>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/login/callback" component={LoginCallback} />
          <SecureRoute path="/messages" component={Messages} />
          <SecureRoute path="/profile" component={Profile} />
        </Switch>
      </Container>
    </Security>
  );

in your case, you should have something like
<Route path="/oidc/callback" component={LoginCallback} />

1 Like
5

Yes i had already took reference from the code that you have shared
const routes = useRoutes([
{
path: ‘/oidc/callback’,
component: {LoginCallback}
},
])
The above is the code block where i have implemented logincallback
but it isn’t working as expected

7

Btw i have already tried the suggested approach although I am still not able to procced further after LoginCallback

image
image794×42 4.05 KB

8

@andrea Would it work if I create a separate API call for getting token after authentication
I am trying like this

const data = {
      grant_type:state,
      client_id:'xxxxxxx',
      redirect_uri: `${window.location.origin}/oidc/callback`,
      code,
      code_verifier:'xxxxxx'
    }
    axios.get('https://emerson.okta.com/oauth2/v1/token', data,{headers: {
      authorization: ' xxxxxxxxxx' ,
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*'
   } })

Or this should be taken care by LoginCallback ?

9

You shouldn’t need to manually handle the request to get the token, the LoginCallback component will do this for you.

If you haven’t yet, I’d recommend playing around with one of our sample apps and/or guides to see if they work for you and then look at what is different about your set-up.

1 Like
10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.