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>

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 higher
npm 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'

Flutter

supertokens_flutter: ^X.Y.Z

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

2) Call the init function

Web

Via NPM

To learn more about what these properties mean read here.

Your app's name:*

This is the name of your application

API Domain:*

This is the URL of your app's API server.

API Base Path:

SuperTokens will expose it's APIs scoped by this base API path.

Website Domain:*

This is the URL of your website.

Website Base Path:

The path where the login UI will be rendered

Submit form

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';

SuperTokens.init({
    appInfo: {
        apiDomain: "<YOUR_API_DOMAIN>",
        apiBasePath: "/auth",
        appName: "...",
    },
    recipeList: [
        Session.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(),
    ],
});

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.Application
import 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 UIKit
import 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
    }
    
}

Flutter

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

import 'package:supertokens_flutter/supertokens.dart';

void main() {
    SuperTokens.init(
        apiDomain: "<YOUR_API_DOMAIN>",
        apiBasePath: "/auth",
    );
}