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.