Which UI do you use?

Custom UI

Pre built UI

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

Using Cocoapods

Add the Cocoapod dependency to your Podfile

pod 'SuperTokensIOS'

Using Swift Package Manager

Follow the official documentation to learn how to use Swift Package Manager to add dependencies to your project.

When adding the dependency use the master branch after you enter the supertokens-ios repository URL:

https://github.com/supertokens/supertokens-ios

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

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",
    );
}