Is there any way to verify access token in react SPA via okta-react or okta-auth-js from frontend only

Questions OAuth/OIDC
1

Hi,
I have integrated okta in my react SPA using this guide Sign in to your SPA with Auth JS | Okta Developer

I’m trying to verify accessToken in my protected routes, just to make sure current access token is still valid and active from my frontend ReactJS application,
Actually i didn’t find any in-built method or way to verify via any SDK either via okta-react or okta-auth-js,

so is there any way to verify accessToken in ReactJS (only using okta SDK or okta APIs)

I have been trying from few days and still got no success, any help would be appreciated

2

The tokenManager for AuthJs should be handling this for you. Tokens will get refreshed automatically (via autorenew) when they expire . You can use the isAuthenticated() check to confirm that the tokens in storage are still valid. This is also what the SecureRoutes from our React SDK helps with.

Maybe you are looking to change the default behavior of isAuthenticated(), since you mention wanting to validate that the Access Token is still valid. In which case, you can override this (at least in AuthJS) so that isAuthenticated is only true if there is a valid Access Token in storage.

Or, are you looking to confirm that the access token hasn’t been revoked? One option is to send the access token over to the userinfo endpoint, as only a non-revoked token will be accepted there (or at the introspect endpoint, which is available for remote validation). You could look to do this with transformAuthState, as in the example here:

const config = {
  // other config
  transformAuthState: async (oktaAuth, authState) => {
    if (!authState.isAuthenticated) {
      return authState;
    }
    // extra requirement: user must have valid Okta SSO session
    const user = await oktaAuth.token.getUserInfo();
    authState.isAuthenticated = !!user; // convert to boolean
    authState.users = user; // also store user object on authState
    return authState;
  }
};

const oktaAuth = new OktaAuth(config);
oktaAuth.authStateManager.subscribe(authState => {
  // handle latest authState
});
oktaAuth.authStateManager.updateAuthState();
3

Hi @andrea, Thanks for your great response,
Although i have tried to work with /introspect endpoint without client secret because in documentation i have found that i can use without secret to validate access token

For public clients (such as single-page and mobile apps) that don’t have a client_secret , you must include the client_id as a query parameter when calling the /introspect endpoint. Make sure that you aren’t passing the Authorization header in the request.

But still when i try to make API call with all required parameters (except secret), i got invalid_client error. ( i have checked and this ClientID is correct)

Note: in pic i have replaced some charaters with xxxx just for private info

image
image936×520 39.3 KB

After lots of trying with above api i have tried to implement transformAuthState way to implement it, but when i try to use this, seems it is also not working in my case
because now it try to make 7-8 times api calls to userinfo
check below image

image
image735×413 16.6 KB

also where should i integrate these 2 lines

oktaAuth.authStateManager.subscribe(authState => {
  // handle latest authState
});
oktaAuth.authStateManager.updateAuthState();

Overall both way have some issues, if you could help me in solving the first way (via introspect api endpoint) then it would be great. If it is not possible then please guide me for second way

Thanks a lot for your guidance

4

For the introspect issue, are you double checking that you’re sending the token back to the same Auth Server that issued it? The url you are using will be correct if the iss in the token is https://dev-xxxxxxx.okta.com/oauth2/default