Skip to main content

Usage inside an iframe

Overview​

If your website can embed in an iframe that other websites consume, update your configuration based on this guide.

Before you start​

If the sites where your iframe can embed share the same top-level domain as the iframe domain, then you can ignore this section.

Steps​

1. Update the frontend configuration​

  • Set isInIframe to true during Session.init on the frontend.
  • You 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 to ensure that the app works on safari and chrome incognito. These handlers 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 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).

What type of UI are you using?

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

Because of the restrictions on access to storage on Chrome incognito, you must use 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 logs out.