Working with multiple API endpoints

To enable use of sessions for multiple API endpoints, you need to use the cookieDomain config on the frontend and backend Session.init function call.

important

All your API endpoints must have the same top level domain. For example, they can be {"api.example.com", "api2.example.com"}, but they cannot be {"api.example.com", "api.otherdomain.com"}.

Step 1) Backend config#

You need to set the cookieDomain value to be the common top level domain. For example, if your API endpoints are {"api.example.com", "api2.example.com", "api3.example.com"}, the common portion of these endpoints is ".example.com" (The dot is important). So you would need to set the following:

NodeJS
GoLang
Python

import SuperTokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";

SuperTokens.init({
    supertokens: {
        connectionURI: "...",
    },
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            cookieDomain: ".example.com",
        })
    ]
});

import (
    "github.com/supertokens/supertokens-golang/recipe/session"
    "github.com/supertokens/supertokens-golang/recipe/session/sessmodels"
    "github.com/supertokens/supertokens-golang/supertokens"
)

func main() {
    cookieDomain := ".example.com"

    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            session.Init(&sessmodels.TypeInput{
                CookieDomain: &cookieDomain,
            }),
        },
    })
}

from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import session


init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        session.init(
            cookie_domain='.example.com'
        )
    ]
)

The above will set the session cookies' domain to .example.com, allowing them to be sent to *.example.com.

note

The value of apiDomain in appInfo must point to an exact API domain only.

This should be the API in which you want to expose all the auth related endpoints (for example /auth/signin).
The frontend login widgets will talk to these APIs

Step 2) Frontend config#

You need to set the same value for cookieDomain on the frontend. This will allow the frontend SDK to apply interception and automatic refreshing across all your API calls:

ReactJS
Angular
Vue

import React from 'react';

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

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

important

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

/app/auth/supertokensAuthComponent.tsx

import React from 'react';

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            cookieDomain: ".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({
            cookieDomain: ".example.com"
        }),
    ],
});

important

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

/components/Supertokens.tsx

import React from 'react';

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            cookieDomain: ".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({
            cookieDomain: ".example.com"
        }),
    ],
});