Which UI do you use?

Custom UI

Pre built UI

Handling session tokens

success

No action required.

Our frontend SDK handles everything for you. You only need to make sure that you have called supertokens.init before making any network requests.

Our SDK adds interceptors to fetch and XHR (used by axios) to save and add session tokens from and to the request.

note

By default, our web SDKs use cookies to provide credentials.

Getting the access token

caution

Our SDK automatically handles adding the access token to request headers. You only need to add the access token to the request if you want to send the access token to a different API domain than what is configured on the frontend SDK init function call.

If you are using a header-based session or enabled exposeAccessTokenToFrontendInCookieBasedAuth (see below), you can read the access token on the frontend using the getAccessToken method:

ReactJS

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

async function getToken(): Promise<void> {
    const accessToken = await Session.getAccessToken();
    console.log(accessToken);
}

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

async function getToken(): Promise<void> {
    const accessToken = await Session.getAccessToken();
    console.log(accessToken);
}

If using cookie-based sessions

caution

This will expose the access token to the frontend, meaning it could be vulnerable to XSS attacks.

important

If you are using header-based sessions, you can skip this step

By enabling this setting, you'll expose the access token to your frontend code even if you use cookies for authentication.

• 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({
            exposeAccessTokenToFrontendInCookieBasedAuth: true,
        })
    ]
});