Seeking Guidance on Token Refresh in Okta React Application without Redirecting to /login/callback

Question

Hello Stack Overflow community,

I'm currently working on a React application that utilizes the @okta/okta-react and @okta/okta-auth-js packages for authentication. The current implementation involves redirecting users to /login/callback when their authentication token expires after 1 hour. However, this redirection is impacting the overall user experience.

I'm seeking advice on how to implement token refresh without the need for redirection to /login/callback. I've researched the documentation for the Okta packages but haven't found a clear solution yet.

Here's a simplified version of the current code:

import { useOktaAuth } from '@okta/okta-react';

const MyProtectedComponent = () => {
  const { authState, oktaAuth } = useOktaAuth();

  if (!authState.isAuthenticated) {
    // Redirect to Okta login if not authenticated
    oktaAuth.signInWithRedirect();
    return null;
  }

  // My protected component logic here

  return (
    <div>
      {/* Render protected content */}
    </div>
  );
};

I would greatly appreciate any insights or code examples that demonstrate how to refresh the token seamlessly without triggering a redirect to /login/callback. The goal is to enhance the user experience and avoid unnecessary disruptions.

Thank you in advance for your assistance!

Library versions we are using

 "@okta/okta-auth-js": "7.4.2",
 "@okta/okta-react": "6.7.0",

Answer 1

Have a look at tokenService parameters of okta-auth-js. Library should be able to renew the token silently if allowed in config passed into OktaAuth constructor.

Otherwise you could manually update/refresh tokens listening to tokenManager callbacks.