Do I need to manually refresh tokens in my SPA?

Hi,

I’ve added authentication onto my React app. I’m now about to attach the token to requests to my API (and add Okta auth there - using Spring Boot that side).

Anyhow my question, in local storage I notice:

okta-cache-storage and okta-token-storage - these both contains a expiresAt value.

What happens when this time is reached? Do I need to manually refresh the token? Do i need any other consideration when making my back end/API calls?

Any help would be appreicated.

Thanks.

1 Like

They will refresh automatically by default. I assume you’re using the .getAccessToken() method? This returns a promise. When this method is executed, if it detects a token has expired, it will refresh and return a new one. So to you, you’ll always get a good token to pass along in you’re headers. Unless, due to something else, your users session with Okta has ended outside the app, then you’ll get back undefined (api call might still be made) and your app will redirect to login.

Hi @marcspratt

Thanks for confirming that - although I still have one question.

Is there some kind of time buffer, for example, imagine the token expires at 10:00:01seconds and the user clicks at 10:00:00seconds. By the time it hits my API/backend it may likely have expired.

How is this situation handled?

And yes, I’m using auth.getAccessToken() which from what I understand, retrieves from storage:

Regards.

Hi @marcspratt

Also, forgot to ask - I presume this getAccessToken() method only works on React components?

If I have a general Typescript function, I guess it can’t be wrapped with that withAuth. In this case will I have to do use https://github.com/okta/okta-auth-js#tokenmanagergetkey or is there another way? For example, would this automatically handle getting the most recent/refreshed token for me?

Thanks.

Technically this is a possibility, where your backend when processing the token will see it’s expired and should return an error. However, at that point it’s out of the Okta libraries hands because the token hadn’t expired when you made the getAccessToken() call and sent it off with the request to your backend.

But I think that the Okta library handles this case with a time skew offset (I’m unsure of the value, maybe 5 min?). I came across this once in their code. So this should not happen. It will always refresh early enough. Someone please correct me if I’m wrong.

Side question: are you using graphQl?

So, I had the same problem, where I needed to access methods on the ‘auth’ object outside the wrapped withAuth() components. So what I did, since I’m using redux, is I stored the auth as a state in redux so I can access it anywhere, since redux allows you to access the store outside of react components.

Others created a closure as in this example https://developer.okta.com/blog/2018/10/11/build-simple-web-app-with-express-react-graphql. This was my least favourite solution.

Another way would be where you use the <Security {…configs}>, instead of exploding the configs into props, just pass a single auth prop:

export const auth = new Auth({
    ...configs
});

See: https://www.npmjs.com/package/@okta/okta-react#example-with-auth-object. Auth can be imported from the okta-react library. Now you can import the auth const into any file. I haven’t tried it this way, but this is how I plan to change my code.

Thanks for confirming the above.

Yep - I’m using GraphQL

Ok, if you’re really concerned about the backend ever receiving an expired token, you can use the apollo link retry library to silently do the call again with the refreshed token. But I don’t think this is necessary. See: https://www.apollographql.com/docs/link/links/retry/.