IdToken with no accessToken

We’re building a React & Typescript app and using @okta/okta-react. When I first log in everything seems fine and the token in local storage has an accessToken property and an idToken property. After some amount of time (the token timeout period? token time out + token reresh time out?) if I look in local storage I am in the state where my okta token in local storage has an idToken property but no accessToken property. Attempting to refresh the app at this point does not redirect me to the login page. Additionally once I am in this state isAuthenticated in the okta react hook seems to think I am authenticated.

If I pull down the “okta hosted login / okta-react-example” project and manually edit the Okta Token in local storage I can recreate the same behavior.

  1. What causes me to get into that state in the first place - can I prevent it?
  2. If I can’t prevent it then what can I do to get back into an authenticated state with a valid accessToken?
  1. What causes me to get into that state in the first place - can I prevent it?

You are entirely correct - one token is expiring. The easiest way to ensure you have both tokens is to override the isAuthenticated() callback. By default it is satisfied if at least ONE token is present. Most likely you want to check that BOTH tokens are present. When that fails, the user should be redirected to get new tokens. (Either automatically getting new tokens if the session is still valid and there are no blocks on 3rd party cookies, or being asked to re-authenticate).

Make sure you’re using the latest okta-react, as there have been recent updates in the 3.x branch to ensure that tokens are replaced correctly (blocking 3rd party cookies will still be an issue).

You can read more about the issue of a vanishing idToken and how to ensure you are not considered authenticated at this github issue: https://github.com/okta/okta-oidc-js/issues/842

Hope this helps

1 Like

Thank you! That seems to have solved my problem perfectly!