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.

caution

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.
• Switch to using header based auth
• Provide a custom windowHandler and a custom cookieHandler which will make sure that the app works on safari and chrome incognito. These handlers will switch from using document.cookies to localstorage to store tokens on the frontend (since safari doesn't allow access to document.cookies in iframes), and will use in memory storage for chrome incognito (since chrome incognito doesn't even allow access to localstorage). You can find implementations of these handlers here (windowHandler) and here (cookieHandler).

ReactJS

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

This change is in your auth route config.

(window as any).supertokensUIInit("supertokensui", {
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUISession.init({
            tokenTransferMethod: "header",
            isInIframe: true
        })
    ]
});

This change goes in the supertokens-web-js SDK config at the root of your application:

import SuperTokens from "supertokens-web-js";
import Session from "supertokens-web-js/recipe/session";

SuperTokens.init({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            tokenTransferMethod: "header",
            isInIframe: true
        })
    ],
})

Angular

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

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

Vue

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

This change is in your auth route config.

(window as any).supertokensUIInit("supertokensui", {
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        (window as any).supertokensUISession.init({
            tokenTransferMethod: "header",
            isInIframe: true
        })
    ]
});

This change goes in the supertokens-web-js SDK config at the root of your application:

import SuperTokens from "supertokens-web-js";
import Session from "supertokens-web-js/recipe/session";

SuperTokens.init({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            tokenTransferMethod: "header",
            isInIframe: true
        })
    ],
})

caution

Because of the restrictions on access to storage on Chrome incognito, we are forced to use an in memory storage to store the tokens on the frontend. This in turn implies that if the user refreshes the page, or if your app does a full page navigation, the user will be logged out.