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.

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

CAUTION

This guide only applies to scenarios which involve SuperTokens Session Access Tokens.

If you are implementing either, Unified Login or Microservice Authentication, features that make use of OAuth2 Access Tokens, please check the separate page that shows you how to verify those types of tokens.

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-web-js/recipe/session";

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

Angular

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

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

Vue

import Session from "supertokens-web-js/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

Important

For other backend frameworks, you can follow our guide on how to spin up a separate server configured with the SuperTokens backend SDK to authenticate requests and issue session tokens.

GoLang

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

Python

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

func main() {
    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            session.Init(&sessmodels.TypeInput{
                ExposeAccessTokenToFrontendInCookieBasedAuth: true,
            }),
        },
    })
}

Other Frameworks

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(
            expose_access_token_to_frontend_in_cookie_based_auth=True
        )
    ]
)