Handling session expiry

note

A session can expire if:

• The user has been inactive for too long and their refresh token has expired.
• The session has been revoked from the backend, but not the frontend.

Using the onSessionExpired prop

When you use ThirdPartyAuth to provide SessionContext to your components, you can a pass function to onSessionExpired prop. This function will be called when the session expires.

ReactJS

import React from "react";import { ThirdPartyAuth } from "supertokens-auth-react/recipe/thirdparty";import MyComponent from "./myComponent";
const App = () => {    return (        <ThirdPartyAuth            requireAuth={true}            onSessionExpired={() => {/* ... */ }}>            <MyComponent />        </ThirdPartyAuth>    );}

important

You will need to either reload the current page or redirect the user to the sign in page if you provide this callback.

Plain JavaScript

Via NPM

The SDK will fire an UNAUTHORISED event if the user is not logged in or the session expired. You can listen to this event by passing the onHandleEvent function in the config like so:

import SuperTokens from "supertokens-website";
SuperTokens.init({    apiDomain: "...",    onHandleEvent: (context) => {        if (context.action === "UNAUTHORISED") {            // called when the user doesn't have a valid session but made a request that requires one            // NOTE: This event can fire multiple times
            if (context.sessionExpiredOrRevoked) {                // the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage                // this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes            }        }    }})

Via Script Tag

The SDK will fire an UNAUTHORISED event if the user is not logged in or the session expired. You can listen to this event by passing the onHandleEvent function in the config like so:

supertokens.init({    apiDomain: "...",    onHandleEvent: (context) => {        if (context.action === "UNAUTHORISED") {            // called when the user doesn't have a valid session but made a request that requires one            // NOTE: This event can fire multiple times
            if (context.sessionExpiredOrRevoked) {                // the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage                // this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes            }        }    }})

React Native

The SDK will fire an UNAUTHORISED event if the user is not logged in or the session expired. You can listen to this event by passing the onHandleEvent function in the config like so:

import SuperTokens from "supertokens-react-native";
SuperTokens.init({    apiDomain: "...",    onHandleEvent: (context) => {        if (context.action === "UNAUTHORISED") {            // called when the user doesn't have a valid session but made a request that requires one            // NOTE: This event can fire multiple times
            if (context.sessionExpiredOrRevoked) {                // the sessionExpiredOrRevoked property is set to true if the current call cleared the session from storage                // this happens only once, even if multiple tabs sharing the same session are open, making it useful for analytics purposes            }        }    }})