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
totrue
duringSession.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
- Angular
- Plain JavaScript
- React Native
Note
supertokens-react-native
SDK. The SDK provides session management features.To add login functionality, you need to build your own UI and call the APIs exposed by the backend SDKs. You can find the API spec here
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 }) ]});
- Via NPM
- Via Script Tag
import SuperTokens from "supertokens-web-js";import Session from "supertokens-web-js/recipe/session";
SuperTokens.init({ appInfo: { apiDomain: "...", appName: "...", }, recipeList: [ Session.init({ isInIframe: true }) ],})
supertokens.init({ appInfo: { apiDomain: "...", appName: "...", }, recipeList: [ supertokensSession.init({ isInIframe: true, }) ],})
#
Backend changesimportant
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
- GoLang
- Python
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" }) ]});
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, }), }, })}
from supertokens_python import init, InputAppInfofrom 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).
This problem is described in more detail (aloong with solutions) in this GitHub issue.
You can also find one of the solutions here.