File length: 4803
# Post Authentication - Session Management - Advanced Workflows -  Usage inside an iframe
Source: https://supertokens.com/docs/post-authentication/session-management/advanced-workflows/in-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](https://ngrok.com/) 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`)](https://github.com/SuperTokens/supertokens-auth-react/blob/master/examples/with-next-iframe/config/windowHandler.js) and [here (`cookieHandler`)](https://github.com/SuperTokens/supertokens-auth-react/blob/master/examples/with-next-iframe/config/cookieHandler.js).



<PrebuiltUIInstructions>

<Tabs>

<Tab value="reactjs">

```tsx
declare let cookieHandler: any // REMOVE_FROM_OUTPUT
declare let windowHandler: any // REMOVE_FROM_OUTPUT

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

</Tab>

<Tab value="angular">

You need to make changes to the auth route configuration, as well as to the `supertokens-web-js` SDK configuration at the root of your application:

This change is in your auth route configuration.

```tsx
declare let cookieHandler: any // REMOVE_FROM_OUTPUT
declare let windowHandler: any // REMOVE_FROM_OUTPUT

supertokensUIInit({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
        websiteDomain: "..."
    },
    recipeList: [
        supertokensUISession.init({
            // highlight-start
            tokenTransferMethod: "header",
            isInIframe: true
            // highlight-end
        })
    ]
});
```

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

```tsx
declare let cookieHandler: any // REMOVE_FROM_OUTPUT
declare let windowHandler: any // REMOVE_FROM_OUTPUT

SuperTokens.init({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            // highlight-start
            tokenTransferMethod: "header",
            isInIframe: true
            // highlight-end
        })
    ],
})
```

</Tab>

</Tabs>

</PrebuiltUIInstructions>

<CustomUIInstructions>

<Tabs>
<Tab value="web">

<Tabs>
<Tab value="npm">

```tsx
declare let cookieHandler: any // REMOVE_FROM_OUTPUT
declare let windowHandler: any // REMOVE_FROM_OUTPUT

SuperTokens.init({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        Session.init({
            // highlight-start
            tokenTransferMethod: "header",
            isInIframe: true
            // highlight-end
        })
    ],
})
```

</Tab>
<Tab value="scripts">

```tsx
declare let cookieHandler: any // REMOVE_FROM_OUTPUT
declare let windowHandler: any // REMOVE_FROM_OUTPUT
supertokens.init({
    cookieHandler,
    windowHandler,
    appInfo: {
        apiDomain: "...",
        appName: "...",
    },
    recipeList: [
        supertokensSession.init({
            // highlight-start
            tokenTransferMethod: "header",
            isInIframe: true
            // highlight-end
        })
    ],
})
```

</Tab>
</Tabs>

</Tab>

<Tab value="mobile">

:::caution
Not applicable to mobile apps
:::

</Tab>

</Tabs>

</CustomUIInstructions>

:::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.
:::