Which UI do you use?

Custom UI

Pre built UI

How to use

Use the override config

ReactJS

info

See all the functions that can be overrided here

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)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUISession.init({
            override: {
                functions: (originalImplementation) => {
                    return {
                        ...originalImplementation,

                        // we will only be overriding the function for checking
                        // if a session exists
                        doesSessionExist: async function (input) {
                            // TODO: some custom logic

                            // or call the default behaviour as show below
                            return originalImplementation.doesSessionExist(input);
                        }
                    }
                }
            }
        })
    ]
});

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({
            override: {
                functions: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        doesSessionExist: async function (input) {
                            // TODO: some custom logic

                            // or call the default behaviour as show below
                            return originalImplementation.doesSessionExist(input);
                        },
                        // ...
                        // TODO: override more functions
                    }
                }
            }
        }),
    ],
});

Angular

info

See all the functions that can be overrided here

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            override: {
                functions: (originalImplementation) => {
                    return {
                        ...originalImplementation,

                        // we will only be overriding the function for checking
                        // if a session exists
                        doesSessionExist: async function (input) {
                            // TODO: some custom logic

                            // or call the default behaviour as show below
                            return originalImplementation.doesSessionExist(input);
                        }
                    }
                }
            }
        })
    ]
});

Vue

info

See all the functions that can be overrided here

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)

(window as any).supertokensUIInit("supertokensui", {
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUISession.init({
            override: {
                functions: (originalImplementation) => {
                    return {
                        ...originalImplementation,

                        // we will only be overriding the function for checking
                        // if a session exists
                        doesSessionExist: async function (input) {
                            // TODO: some custom logic

                            // or call the default behaviour as show below
                            return originalImplementation.doesSessionExist(input);
                        }
                    }
                }
            }
        })
    ]
});

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({
            override: {
                functions: (originalImplementation) => {
                    return {
                        ...originalImplementation,
                        doesSessionExist: async function (input) {
                            // TODO: some custom logic

                            // or call the default behaviour as show below
                            return originalImplementation.doesSessionExist(input);
                        },
                        // ...
                        // TODO: override more functions
                    }
                }
            }
        }),
    ],
});

• originalImplementation is an object that contains functions that has the original implementation for this recipe. It can be used in your functions as a way to use the SuperTokens' default behaviour.
• In the above code snippet, we override the doesSessionExist function of this recipe. This means that when another recipe is using this recipe to check if a session exists, it will use your function.