Which UI do you use?

Custom UI

Pre built UI

Handle Event Hook

This function is called for various user actions. It can be used for logging, analytics or any side effect purposes (these are essentially fire and forget events).

ReactJS

You will have to make changes to the auth route config, as well as to the supertokens-web-js SDK config at the root of your application:

This change is in your auth route config.

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

supertokensUISession.init({
    onHandleEvent: (context) => {
        if (context.action === "SIGN_OUT") {
            // called when the user clicks on sign out
        } else if (context.action === "REFRESH_SESSION") {
            // called with refreshing a session
            // NOTE: This is an undeterministic event
        } else 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
            }
        } else if (context.action === "SESSION_CREATED") {
            // Called when session is created - post login / sign up.
        } else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
            // This is called when the access token payload has been updated
        } else if (context.action === "API_INVALID_CLAIM") {
            // This is called when the access token payload has an invalid claim
            // as per one of the validators on the frontend
        } else if (context.action === "SESSION_ALREADY_EXISTS") {
            // called when a user visits the login / sign up page with a valid session
            // in this case, they are usually redirected to the main app
        }
    }
})

This change goes in the supertokens-web-js SDK config at the root of your application:

import SuperTokens from "supertokens-web-js";
import Session from "supertokens-web-js/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            onHandleEvent: (context) => {
                if (context.action === "SIGN_OUT") {
                    // called when the user clicks on sign out
                } else if (context.action === "REFRESH_SESSION") {
                    // called with refreshing a session
                    // NOTE: This is an undeterministic event
                } else 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
                    }
                } else if (context.action === "SESSION_CREATED") {
                    // Called when session is created - post login / sign up.
                } else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
                    // This is called when the access token payload has been updated
                } else if (context.action === "API_INVALID_CLAIM") {
                    // This is called when the access token payload has an invalid claim
                    // as per one of the validators
                } else if (context.action === "SESSION_ALREADY_EXISTS") {
                    // called when a user visits the login / sign up page with a valid session
                    // in this case, they are usually redirected to the main app
                }
            }
        }),
    ],
})

Angular

import Session from "supertokens-auth-react/recipe/session";

Session.init({
    onHandleEvent: (context) => {
        if (context.action === "SIGN_OUT") {
            // called when the user clicks on sign out
        } else if (context.action === "REFRESH_SESSION") {
            // called with refreshing a session
            // NOTE: This is an undeterministic event
        } else 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
            }
        } else if (context.action === "SESSION_CREATED") {
            // Called when session is created - post login / sign up.
        } else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
            // This is called when the access token payload has been updated
        } else if (context.action === "API_INVALID_CLAIM") {
            // This is called when the access token payload has an invalid claim
            // as per one of the validators on the frontend
        } else if (context.action === "SESSION_ALREADY_EXISTS") {
            // called when a user visits the login / sign up page with a valid session
            // in this case, they are usually redirected to the main app
        }
    }
})

Vue

You will have to make changes to the auth route config, as well as to the supertokens-web-js SDK config at the root of your application:

This change is in your auth route config.

// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)

supertokensUISession.init({
    onHandleEvent: (context) => {
        if (context.action === "SIGN_OUT") {
            // called when the user clicks on sign out
        } else if (context.action === "REFRESH_SESSION") {
            // called with refreshing a session
            // NOTE: This is an undeterministic event
        } else 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
            }
        } else if (context.action === "SESSION_CREATED") {
            // Called when session is created - post login / sign up.
        } else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
            // This is called when the access token payload has been updated
        } else if (context.action === "API_INVALID_CLAIM") {
            // This is called when the access token payload has an invalid claim
            // as per one of the validators on the frontend
        } else if (context.action === "SESSION_ALREADY_EXISTS") {
            // called when a user visits the login / sign up page with a valid session
            // in this case, they are usually redirected to the main app
        }
    }
})

This change goes in the supertokens-web-js SDK config at the root of your application:

import SuperTokens from "supertokens-web-js";
import Session from "supertokens-web-js/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            onHandleEvent: (context) => {
                if (context.action === "SIGN_OUT") {
                    // called when the user clicks on sign out
                } else if (context.action === "REFRESH_SESSION") {
                    // called with refreshing a session
                    // NOTE: This is an undeterministic event
                } else 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
                    }
                } else if (context.action === "SESSION_CREATED") {
                    // Called when session is created - post login / sign up.
                } else if (context.action === "ACCESS_TOKEN_PAYLOAD_UPDATED") {
                    // This is called when the access token payload has been updated
                } else if (context.action === "API_INVALID_CLAIM") {
                    // This is called when the access token payload has an invalid claim
                    // as per one of the validators
                } else if (context.action === "SESSION_ALREADY_EXISTS") {
                    // called when a user visits the login / sign up page with a valid session
                    // in this case, they are usually redirected to the main app
                }
            }
        }),
    ],
})