# How to implement session timeout alert

**URL:** <https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136>\
**Category:** Questions\
**Created:** [July 15, 2020, 3:43am UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136 "2020-07-15T03:43:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![christopherhuii](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/christopherhuii/32/1716_2.png) [@christopherhuii](https://devforum.okta.com/u/christopherhuii)\
**Post date:** [July 15, 2020, 3:43am UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136/1 "2020-07-15T03:43:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![phi1ipp](https://avatars.discourse-cdn.com/v4/letter/p/85f322/32.png) [@phi1ipp](https://devforum.okta.com/u/phi1ipp)\
**Post date:** [July 15, 2020, 11:14pm UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136/2 "2020-07-15T23:14:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mrecint](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mrecint](https://devforum.okta.com/u/mrecint)\
**Post date:** [January 18, 2021, 9:57pm UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136/3 "2021-01-18T21:57:58Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![christopherhuii](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/christopherhuii/32/1716_2.png) [@christopherhuii](https://devforum.okta.com/u/christopherhuii)\
**Post date:** [January 19, 2021, 6:42am UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136/4 "2021-01-19T06:42:41Z")

</div>

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.

```auto
 const { authState, authService } = useOktaAuth();

```

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/oktadev/original/1X/589c4c5f80de422d01f47cee7185a7fb8227835c.png) [@system](https://devforum.okta.com/u/system)\
**Post date:** [January 26, 2024, 6:08pm UTC](https://devforum.okta.com/t/how-to-implement-session-timeout-alert/10136/5 "2024-01-26T18:08:23Z")

</div>

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