Which UI do you use?

Custom UI

Pre built UI

Pre API 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.

(window as any).supertokensUISession.init({
    preAPIHook: async (context) => {
        let url = context.url;

        // is the fetch config object that contains the header, body etc..
        let requestInit = context.requestInit;

        let action = context.action;
        if (action === "SIGN_OUT") {

        } else if (action === "REFRESH_SESSION") {

        }
        return {
            requestInit, url
        };
    }
})

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({
            preAPIHook: async (context) => {
                let url = context.url;

                // is the fetch config object that contains the header, body etc..
                let requestInit = context.requestInit;

                let action = context.action;
                if (action === "SIGN_OUT") {

                } else if (action === "REFRESH_SESSION") {

                }
                return {
                    requestInit, url
                };
            }
        }),
    ],
})

Angular

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

Session.init({
    preAPIHook: async (context) => {
        let url = context.url;

        // is the fetch config object that contains the header, body etc..
        let requestInit = context.requestInit;

        let action = context.action;
        if (action === "SIGN_OUT") {

        } else if (action === "REFRESH_SESSION") {

        }
        return {
            requestInit, url
        };
    }
})

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.

(window as any).supertokensUISession.init({
    preAPIHook: async (context) => {
        let url = context.url;

        // is the fetch config object that contains the header, body etc..
        let requestInit = context.requestInit;

        let action = context.action;
        if (action === "SIGN_OUT") {

        } else if (action === "REFRESH_SESSION") {

        }
        return {
            requestInit, url
        };
    }
})

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({
            preAPIHook: async (context) => {
                let url = context.url;

                // is the fetch config object that contains the header, body etc..
                let requestInit = context.requestInit;

                let action = context.action;
                if (action === "SIGN_OUT") {

                } else if (action === "REFRESH_SESSION") {

                }
                return {
                    requestInit, url
                };
            }
        }),
    ],
})

Reading custom request information in the backend

Visit this page to learn how to read custom headers etc from the request on the backend.