Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

How to use

Use the override config

ReactJS

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

Angular

important

• Session recipe config changes need to be reflected in both supertokens-auth-react and supertokens-web-js configs.
• See all the functions that can be overrided here

/app/auth/supertokensAuthComponent.tsx

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

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

Vue

important

• Session recipe config changes need to be reflected in both supertokens-auth-react and supertokens-web-js configs.
• See all the functions that can be overrided here

/components/Supertokens.tsx

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

/main.ts

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.