Which frontend SDK do you use?

supertokens-web-js / mobile

supertokens-auth-react

Frontend Integration

Supported frameworks

1) Install

Web

Via NPM

npm i -s supertokens-web-js

Via Script Tag

You need to add all of the following scripts to your app

<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/website.js"></script><script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/supertokens.js"></script><script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/session.js"></script><script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/passwordless.js"></script>

Mobile

React Native

npm i -s supertokens-react-native# IMPORTANT: If you already have @react-native-async-storage/async-storage as a dependency, make sure the version is 1.12.1 or highernpm i -s @react-native-async-storage/async-storage

Android

Add to your settings.gradle:

dependencyResolutionManagement {    ...    repositories {        ...        maven { url 'https://jitpack.io' }    }}

Add the following to you app level's build.gradle:

implementation 'com.github.supertokens:supertokens-android:X.Y.Z'

You can find the latest version of the SDK here (ignore the v prefix in the releases).

iOS

Add the Cocoapod dependency to your Podfile

pod 'SuperTokensIOS'

2) Call the init function

Web

Via NPM

Call the following init function at the start of your app (ideally on the global scope).

import SuperTokens from 'supertokens-web-js';import Session from 'supertokens-web-js/recipe/session';import Passwordless from 'supertokens-web-js/recipe/passwordless'
SuperTokens.init({    appInfo: {        apiDomain: "<YOUR_API_DOMAIN>",        apiBasePath: "/auth",        appName: "...",    },    recipeList: [        Session.init(),        Passwordless.init(),    ],});

Via Script Tag

Call the following init function at the start of your app (ideally on the global scope).

supertokens.init({    appInfo: {        apiDomain: "<YOUR_API_DOMAIN>",        apiBasePath: "/auth",        appName: "...",    },    recipeList: [        supertokensSession.init(),        supertokensPasswordless.init(),    ],});

Mobile

React Native

Call the following init function at the start of your app (ideally on the global scope).

import SuperTokens from 'supertokens-react-native';
SuperTokens.init({    apiDomain: "<YOUR_API_DOMAIN>",    apiBasePath: "/auth",});

Android

Add the SuperTokens.init function call at the start of your application.

import android.app.Applicationimport com.supertokens.session.SuperTokens
class MainApplication: Application() {    override fun onCreate() {        super.onCreate()                SuperTokens.Builder(this, "<YOUR_API_DOMAIN>")            .apiBasePath("/auth")            .build()    }}

iOS

Add the SuperTokens.initialize function call at the start of your application.

import UIKitimport SuperTokensIOS
class ApplicationDelegate: UIResponder, UIApplicationDelegate {        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {        do {            try SuperTokens.initialize(                apiDomain: "<YOUR_API_DOMAIN>",                apiBasePath: "/auth"            )        } catch SuperTokensError.initError(let message) {            // TODO: Handle initialization error        } catch {            // Some other error        }
        return true    }    }

What to do next?

The above code snippet sets up session management network interceptors on the frontend. Our frontend SDK will now be able to automatically save and add session tokens to each request to your API layer and also do auto session refreshing.

The next steps are to:

• Step 2: setup the backend SDK in your API layer
• Step 3: Setup the SuperTokens core (sign up for managed service, or self host it)
• Step 4: Enable the user management dashboard
• Use the frontend SDK's helper functions to build your own UI - follow along the docs in the "Using your own UI" section and you will find docs for this after "Step 4".