Share sessions across sub domains

Configure SuperTokens to share sessions across multiple subdomains.

Overview

Configure sharing sessions across multiple subdomains in SuperTokens by setting the sessionTokenFrontendDomain attribute of the Session recipe in your frontend code.

Steps

1. Update the frontend configuration

UI type

Pre-built UIDrop-in components that handle the flows for you.Custom UIBuild your own UI and call the SDK directly.

You need to make changes to the auth route configuration, as well as to the supertokens-web-js SDK configuration at the root of your application:

This change is in your auth route configuration.

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

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

This change goes in the supertokens-web-js SDK configuration 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({
      sessionTokenFrontendDomain: ".example.com",
    }),
  ],
});

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

supertokens.init({
  appInfo: {
    apiDomain: "...",
    appName: "...",
  },
  recipeList: [
    supertokensSession.init({
      // ...
      sessionTokenFrontendDomain: ".example.com",
    }),
  ],
});