Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

Share sessions across sub domains

Sharing sessions across multiple sub domains in SuperTokens can be configured by setting the sessionTokenFrontendDomain attribute of the Session recipe in your frontend code.

Example:

• Your app has two subdomains abc.example.com and xyz.example.com. We assume that the user logs in via example.com
• To enable sharing sessions across example.com, abc.example.com and xyz.example.com the sessionsScope attribute must be set to .example.com

ReactJS

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

SuperTokens.init({
    appInfo: {
        // ...
        // this should be equal to the domain where the user will see the login UI
        apiDomain: "...",
        appName: "...",
        websiteDomain: "https://example.com"
    },
    recipeList: [
        Session.init({
            sessionTokenFrontendDomain: ".example.com"
        })
    ]
});

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 SuperTokens from "supertokens-auth-react";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
    appInfo: {
        // ...
        // this should be equal to the domain where the user will see the login UI
        apiDomain: "...",
        appName: "...",
        websiteDomain: "https://example.com"
    },
    recipeList: [
        Session.init({
            sessionTokenFrontendDomain: ".example.com"
        })
    ]
});

/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({
            sessionTokenFrontendDomain: ".example.com"
        }),
    ],
})

Vue

important

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

/components/Supertokens.tsx

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

SuperTokens.init({
    appInfo: {
        // ...
        // this should be equal to the domain where the user will see the login UI
        apiDomain: "...",
        appName: "...",
        websiteDomain: "https://example.com"
    },
    recipeList: [
        Session.init({
            sessionTokenFrontendDomain: ".example.com"
        })
    ]
});

/main.ts

import SuperTokens from "supertokens-web-js";
import Session from "supertokens-web-js/recipe/session";

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            sessionTokenFrontendDomain: ".example.com"
        }),
    ],
})

caution

Do not set sessionTokenFrontendDomain to a value that's in the public suffix list (Search for your value without the leading dot). Otherwise session management will not work.