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

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

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

Reading custom request information in the backend

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