OIDC SPA
GitHubHome
v6
  • Documentation
  • Release Notes & Upgrade Instructions
v6
  • Installation
  • Basic Usage
  • Web API
  • Auto Login
  • Auto Logout
  • Error Management
  • Mock
  • User Account Management
  • User Session Initialization
  • Tokens Renewal
  • Setup Guides
    • React Router
    • TanStack Router
    • Full-Stack with Node REST API
  • Providers Configuration
    • Keycloak
    • Auth0
    • Microsoft Entra ID
    • Google OAuth 2.0
    • Other OIDC Provider
  • Resources
    • Why No Client Secret?
    • End of third-party cookies
    • JWT Of the Access Token
    • Discord Server
  • User Impersonation
  • Sponsors
Powered by GitBook
On this page
  • Configuring auto logout policy
  • Displaying a countdown timer before auto logout

Was this helpful?

Export as PDF

Auto Logout

Automatically logging out your user after a set period of inactivity on your app (they dont move the mouse or press any key on the keyboard for a while)

PreviousAuto LoginNextError Management

Last updated 17 days ago

Was this helpful?

Configuring auto logout policy

Important to understand: This is a policy that is enforced on the identity server. Not in the application code!

In OIDC provider, it is usually referred to as Idle Session Lifetime, these values define how long an inactive session should be kept in the records of the server.

Guide on how to configure it:

you don't need to configure anything at the app level. Otherwise you need to explicitly set the idleSessionLifetimeInSeconds so it matches with how you have configured your server.

import { createOidc } from "oidc-spa";

const oidc = await createOidc({
  // ...
  // ‼️ WARNING ‼️ Read carfully what's above.
  // Use idleSessionLifetimeInSeconds if and only if you are using an auth server
  // that do not let you configure this policy! (e.g. if you're using Keycloak don't use this param) 
  idleSessionLifetimeInSeconds: 300 // 5 minutes
    
  //autoLogoutParams: { redirectTo: "current page" } // Default
  //autoLogoutParams: { redirectTo: "home" }
  //autoLogoutParams: { redirectTo: "specific url", url: "/a-page" }
});
import { createReactOidc } from "oidc-spa/react";

export const {
    OidcProvider,
    useOidc
} = createReactOidc({
    // ...
    __unsafe_ssoSessionIdleSeconds: 300 // 5 minuts
    //autoLogoutParams: { redirectTo: "current page" } // Default
    //autoLogoutParams: { redirectTo: "home" }
    //autoLogoutParams: { redirectTo: "specific url", url: "/a-page" }
});

Displaying a countdown timer before auto logout

const { unsubscribeFromAutoLogoutCountdown } = oidc.subscribeToAutoLogoutCountdown(
  ({ secondsLeft }) => {
    if( secondsLeft === undefined ){
      console.log("Countdown reset, the user moved");
      return;
    }
    if( secondsLeft > 60 ){
      return;
    }
    console.log(`${secondsLeft} before auto logout`)
  }
);
The demo app with a short SSO Session Idle
https://github.com/keycloakify/oidc-spa/blob/main/examples/tanstack-router/src/router/AutoLogoutCountdown.tsx
Example implementation of a 60 seconds countdown before auto logout.
Auth0
Keycloak