React SPA silent token refresh

Questions
1

I am having hard time understanding OKTA refresh tokens.i have looked for documentation in okta developer forum and found that i should be calling ‘/v1/authorize?prompt=none’. but question is from where ? i am using @okta/okta-react and don’t know how to capture token expiration event.
below is my configuration

const config = {
issuer: process.env.REACT_APP_OKTA_ORG_URL,
redirect_uri: ${window.location.origin}/implicit/callback,
client_id: process.env.REACT_APP_OKTA_CLIENT_ID,
scope: [‘openid’, ‘profile’, ‘email’, ‘groups’],
pkce: true,
cookies: {
secure: window.location.protocol === ‘https:’,
},

tokenManager: {
  autoRenew: true,
  secure: true,
  storage: 'localStorage',
}

};

2

The React SDK has a feature enabled by default that handles token renewal for you, but your configuration also shows that you have this feature, autoRenew set to true as well.

Are you not seeing silent token renewals after your user’s tokens expire?

3

yes i just verified that it is working good but just some times app is throwing authentication error sometimes (OKTA PKCE verification failed) which led me to believe that renewal is failed.

4

Usually when you encounter that error, there is a concurrency issue where multiple authorize calls are being made before the SDK is able to request a token. That would also explain why you only sometimes see that occurring.

The reason this is causing an issue is that, when the SDK makes the authorize request, it stores in the browser the code_verifier that was created for PKCE authentication. If another authorize request is made before the authorization code from the first authorize request is exchanged for tokens, a new code_verifier, for the subsequent authorize request(s), will be sent in the token request and this error will be thrown as the code_challenge from the authorize request will not match the one sent in the token request as is expected.

Are you using the SDK’s callback component? Is it possible that the page the user is on is attempting to make multiple authorize requests (I recommend reviewing the network events that occur when this happens to check)?

5

Side note, I use this tool to check which authorize request’s code challenge corresponds to the code verifier being sent in a failed token request when I suspect this is occurring.