# Auto Logout

### 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:

* [Keycloak](/docs/v7/providers-configuration/keycloak.md#security-sensitive-apps-banking-admin-panels-etc)
* [Auth0](/docs/v7/providers-configuration/auth0.md#optional-configuring-auto-logout)

[If your OIDC provider issues a Refresh Token and if this refresh token is a JWT](#user-content-fn-1)[^1] 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.

{% tabs %}
{% tab title="Vanilla API" %}

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

{% endtab %}

{% tab title="React API" %}

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

{% endtab %}
{% endtabs %}

### Displaying a countdown timer before auto logout

{% embed url="<https://youtu.be/GeZaZIr-d68>" %}
The demo app with a short SSO Session Idle
{% endembed %}

{% tabs %}
{% tab title="Vanilla API" %}

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

{% endtab %}

{% tab title="React API" %}
You can have a component like this one mounted at all time:

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

{% endtab %}
{% endtabs %}

[^1]: If you're not sure use `createOidc({ debugLogs: true })` and see what's printed in the console after you log in.\
    \
    For reference, if you are using Keycloak, you do not need to provide the `idleSessionLifetimeInSeconds` parameter to oidc-spa, with Auth0, you do.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.oidc-spa.dev/docs/v7/auto-logout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.