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)

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({
  // ...
  // ‼️ 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" }
});

Mount this component in your __root.tsx

import { createOidcComponent } from "@/oidc";

/** See: https://docs.oidc-spa.dev/auto-logout */
export const AutoLogoutWarningOverlay = createOidcComponent({
    component: () => {
        const { autoLogoutState } = AutoLogoutWarningOverlay.useOidc();

        if (!autoLogoutState.shouldDisplayWarning) {
            return null;
        }

        return (
            <div
                // Full screen overlay, blurred background
                style={{
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: "rgba(0,0,0,0.5)",
                    backdropFilter: "blur(10px)",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    zIndex: 1000,
                    color: "white"
                }}
            >
                <div>
                    <p>Are you still there?</p>
                    <p>You will be logged out in {autoLogoutState.secondsLeftBeforeAutoLogout}</p>
                    {/* NOTE: You can configure how long before autoLogout we start displaying
                        this warning by providing `startCountdownSecondsBeforeAutoLogout` 
                        to bootstrapOidc()
                    */}
                </div>
            </div>
        );
    }
});

See example.

@if (oidc.$secondsLeftBeforeAutoLogout() ) {
<!-- Full screen overlay, blurred background -->
<div [style]="{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.5)',
      backdropFilter: 'blur(10px)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 1000,
    }">
      <div>
            <p>Are you still there?</p>
            <p>You will be logged out in {{ oidc.$secondsLeftBeforeAutoLogout() }}</p>
      </div>
</div>
}

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`)
  }
);

You can have a component like this one mounted at all time:

import { useOidc } from "../oidc";

export function AutoLogoutWarningOverlay() {
    const { useAutoLogoutWarningCountdown } = useOidc();
    const { secondsLeft } = useAutoLogoutWarningCountdown({ 
        // How many seconds before auto logout do we start
        // displaying the overlay.
        warningDurationSeconds: 45 
    });

    if (secondsLeft === undefined) {
        return null;
    }

    return (
        <div
            // Full screen overlay, blurred background
            style={{
                position: "fixed",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: "rgba(0,0,0,0.5)",
                backdropFilter: "blur(10px)",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                zIndex: 1000
            }}
        >
            <div>
                <p>Are you still there?</p>
                <p>You will be logged out in {secondsLeft}</p>
            </div>
        </div>
    );
}

PreviousAuto Login NextError Management

Last updated 1 day ago

Was this helpful?