React App: isAuthenticated is always false

Questions
1

I have seen similar questions, none of the answers resolve the issue for me.

I am using React SPA, with react router & Okta React / Auth libs (pkce).
Latest versions.

I have set up OktaAuth in one file, where I simply export const oktaAuth = new OktaAuth(myconfig);
It is then used in <Security />.
For callback, I am using <LoginCallback /> component.

No matter what I do or where I log things, after a successful login (I can see & use access token, it is present in auth state), isAuthenticated is always false. Any ideas?

2

Hi there @justasam !

To gut check, what version of React Router are you using? The Okta React library out of the box support react-router-dom v5 with the SecureRoute component.

With the latest versions of Okta AuthJS and Okta React and with react-router-dom@5.3.4 I can use this syntax:

const oktaAuth = new OktaAuth({
  issuer: 'https://{yourOktaDomain}',
  clientId: '{yourOktaClientID}',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email', 'offline_access']
});

function App() {
  const history = useHistory();
  const restoreOriginalUri = (_oktaAuth,  originalUri) => {
    history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
  };

  return (
    <>
      <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
          <Switch>
              <Route path="/" exact component={Home}/>
              <Route path="/login/callback" component={LoginCallback}/>
              <SecureRoute path="/profile" component={Profile}/>
          </Switch>
      </Security>
    </>
  );
}

export default App

If you want to use the latest version of react-router-dom, this sample demonstrates creating SecureRoute component.

Let us know how it goes or if the issue you’re seeing is not related to the router.

3

Hi, thanks for the speedy reply!

The router I am using is "react-router-dom": "^6.8.0"
I also don’t have any SecureRoutes (we’re switching auth, so I will add them after it’s complete) (but I can see in the code okta-react/src/SecureRoute.tsx at master · okta/okta-react · GitHub, that it uses the same logic to check for auth, so my assumption is that it’d fail as well).

In addition to the above, I assume, since session is maintained after page refresh, isAuthenticated should be true after reload also?

4

Hi @justasam

I used the Okta React sample, which is a pure React app using refresh tokens. I signed in and reloaded the profile route. I am still authenticated; the authState.isAuthenticated property value is true, and I can see the ID token claims.

Happy coding!