Access Token RefreshIfNeeded for React

I am using the Okta React library, and need a way to “refreshIfNeeded” for the access token, just like what is available for the mobile SDKs. Is there an existing method on those classes that I’m missing from the documentation? Or a simple code sample that performs this task? I tried renewTokens but first, it makes a REST call every single time instead of checking if the current token as about to expire and second, I consistently get a CORS error making calls to v1/token despite having my URL added as a trusted site.

Hi there @panleya,

Welcome to the community!

You may be interested in Refresh Tokens, which work well with Authorization Code Flow + PKCE, the recommended OAuth flow for SPAs. You’ll enable Refresh Tokens in your Okta application (follow the instructions in the link below). You’ll want Refresh Token Rotation, too, for SPAs, and when you enable Refresh Tokens in the Okta Admin Console, Refresh Token Rotation should be enabled by default.

In your code, you’ll add the offline_access scope to the OIDC configuration when setting up your Okta configuration parameters.

Let us know how this goes for you!

I’ve already done all of that. I’m asking how to refresh the access token in a manner that doesn’t hit the server every single time I need to use it. Something similar to “RefreshIfNeeded” in the mobile SDKs. I’ve tried using the v1/token endpoint but that fails every single time with a CORS error.

Refresh token rotation rotates tokens after every use. This is the recommended pattern for public clients like SPAs. You can change the refresh token to a persistent token. You’ll find this setting when setting up Refresh Tokens in the Okta application.

Please see this help doc to enable CORS for your application

Is there someone else that can help me? You’re not answering my question at all. Do you understand what I’m asking? I know what a refresh token is, and how it works. I’m asking for the code pattern for requesting a new access token using the refresh token. The mobile SDK provides a simple call to handle this, but the React SDK appears to NOT have the same call. Is there someone in the community maybe, someone who speaks English as their FIRST language, who can understand my problem / question and help with more than generic article posts?

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