Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

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

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

Angular

important

Session recipe config changes need to be reflected in both supertokens-auth-react and supertokens-web-js configs.

/app/auth/supertokensAuthComponent.tsx

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

/app/app.component.ts

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
                };
            }
        }),
    ],
})

Vue

important

Session recipe config changes need to be reflected in both supertokens-auth-react and supertokens-web-js configs.

/components/Supertokens.tsx

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

/main.ts

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
                };
            }
        }),
    ],
})