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>
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-web-js/bundle/thirdparty.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 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

Add the dependency to your pubspec.yaml

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';
import ThirdParty from 'supertokens-web-js/recipe/thirdparty'
import Passwordless from 'supertokens-web-js/recipe/passwordless'

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

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