Which UI do you use?

Custom UI

Pre built UI

Using in an iframe

If your website can be embedded in an iframe which is consumed by other websites, then this section is for you.

info

If the sites in which your iframe can be embedded share the same top level domain as the iframe domain, then you can ignore this section.

Frontend changes

• Set isInIframe to true during Session.init on the frontend.
• You will need to use https during testing / dev for this to work. You can use tools like ngrok to create a dev env with https on your website / API domain.

ReactJS

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            isInIframe: true
        })
    ]
});

Angular

Important

SuperTokens does not provide non-React UI components. So we will be using the supertokens-auth-react SDK and will inject the React components to show the UI. Therefore, the code snippet below refers to the supertokens-auth-react SDK.

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            isInIframe: true
        })
    ]
});

Vue

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            isInIframe: true
        })
    ]
});

Backend changes

important

Make the changes below only if your CORS setting allows any origin to query your API. Ignore these backend changes if your iframe is only allowed to work within certain trusted sites (and you have whitelisted them via the allowed origins config in your CORS setting).

NodeJS

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

SuperTokens.init({
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        Session.init({
            cookieSameSite: "none",
            antiCsrf: "VIA_TOKEN"
        })
    ]
});

GoLang

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

func main() {
    cookieSameSite := "none"
    antiCSRF := "VIA_TOKEN"

    supertokens.Init(supertokens.TypeInput{
        RecipeList: []supertokens.Recipe{
            session.Init(&sessmodels.TypeInput{
                CookieSameSite: &cookieSameSite,
                AntiCsrf:       &antiCSRF,
            }),
        },
    })
}

Python

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_same_site='none',
            anti_csrf='VIA_TOKEN'
        )
    ]
)

A note on Safari and Chrome (Incognito mode only)

The default behaviour for these is that third party cookies / localstorage are blocked. This means that sessions will not work, and we should instead show the user instructions on how to enable them (depending on their browser)