How to implement session timeout alert

Questions
#1

I have a SPA using the okta-react SDK using PKCE.

I’m trying to implement a modal that displays when a user has been inactive for 10 minutes. Once, they reach 15 minutes of inactivity, they should be logged out. While the modal is open, the message should countdown the time remaining. If the user interacts with the modal before the countdown finishes, they will stay logged in; otherwise they should be logged out.

I’m looking around and I see the access token and session have different expirations. I’m trying to understand how those interact with one another and which expiration is relevant to the session timeout. Additionally, I know that a valid session is required for an access token to renew, so would it be necessary to manually renew a session?

I’'m not too experienced with Okta and authentication, so any help or resources would be appreciated.

#2

Session and access_token can have different lifetime indeed. It’s up to you, what you want to do with those times. But as you have access_token, for the application it’s easier to figure token lifetime, and not the okta’s session.

In general there is no link between session and access_token, as the latter one can be used for services, where there is no session.

In okta you can set your session lifetime to be longer than access token, so that you are able to refresh the token, if needed.

#3

Hi christopherhuii,

I am an Okta user as well and wanted to implement a similar feature. I was able to get the sessions to expire, but a user can stay on the page for a long time, until a reload happens. I would like to set a timer of some sorts. This might have to be done on my custom page. Were you able to find a solution for a timeout force logout?

Thanks!

#4

Let me repeat what you’ve said to confirm I am understanding correctly.

You are able to see access tokens expire, but once they expire, the user is not alerted/redirected in any way. Once the page is reloaded, the user is logged out.

What do you want to do when the access token expires?

I tried a few things, but settled on this. Keep in mind this solution will look different depending on the version of Okta you are using.

I am using okta-react v3.
In okta-react, there is a useOktaAuth hook.

 const { authState, authService } = useOktaAuth();

From there, I use the token manager from authService to listen to when the token expires:

const tokenManager = await authService.getTokenManager();
tokenManager.on('expired', (key) => {
  // Do the thing you want to do when token expires.
  // e.g. redirect to home
  // window.location.href = '/'
  // or with react-router
  // history.push('/')
});

Let me know if this helps or if you need any additional clarification. Have a look at the docs on the token manager.