Create useSessionExpiry Hook to Detect and Handle Session Timeout

[KevinLatino]

⏳ useSessionExpiry

Create useSessionExpiry Hook to Detect and Handle Session Timeout

Description:
Implement a hook that tracks session expiration and triggers a warning modal or auto-refresh when the session is about to expire. Optionally refresh token on activity.
Why it's important:
Prevents unexpected session loss and improves UX/security by prompting the user in time or refreshing session automatically.
Acceptance Criteria:

• Detects session expiry based on a timestamp or JWT expiry.
• Triggers modal X seconds before expiry.
• Optionally refreshes session token on user interaction.
• Cleans up timers and event listeners on unmount.

[HyzeahAchungha]

Hi! I’d love to take on this issue.

Plan:
I’ll create a useSessionExpiry hook that:

Parses session expiry from JWT or timestamp.

Sets a timer to trigger a warning modal (e.g., 1–2 mins before expiry).

Listens for user activity to optionally refresh the token.

Cleans up timers/listeners on unmount to avoid memory leaks.

Why me:
I have solid experience working with React hooks, session handling using JWTs, and building custom modals and timers. I'm also comfortable implementing token refresh flows and managing state cleanly with hooks. my Eat is 10hrs

[akinloluwami]

Hi @KevinLatino, I see this issue is still open since May. I would like to work on it.

[DanSword36]

Hi my Name is Daniel, I am learning Front-end, and I want to contribuite to this project, it could be a great idea to put my learnings into practice.

[Josue19-08]

Hi, I’m Josué. I’d like to work on this issue and implement the useSessionExpiry hook. My plan is to create a reusable hook that tracks session expiration based on either a provided expiry timestamp or the JWT payload, sets up timers to trigger a warning modal a few seconds before expiry, and optionally refreshes the session token on user activity (e.g., click, keypress, mouse movement). The hook will clean up all timers and listeners on unmount to avoid leaks, follow strict TypeScript typing, and remain flexible so it can be used across different parts of the app. This will ensure a smoother UX and stronger security by giving users a chance to renew or refresh their session seamlessly.

Recommended by OnlyDust for high-quality and dependable contributions.

[lucifer1017]

This is a fairly easy task, let me handle this for you.

[lucifer1017]

May I try my hand at this?

[Marvelousmicheal]

can i work on this