Frontend Integration

Supported frameworks#

1) Install#

ReactJS
Angular
Vue
Plain JavaScript
React Native

npm i -s supertokens-auth-react

Via NPM
Via Script Tag

npm i -s supertokens-web-js

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

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

2) Call the `init` function#

ReactJS
Angular
Vue
Plain JavaScript
React Native


import React from 'react';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";import ThirdPartyEmailPassword, {Github, Google, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartyemailpassword";import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({    appInfo: {        // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo        appName: "<YOUR_APP_NAME>",        apiDomain: "<YOUR_API_DOMAIN>",        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",        apiBasePath: "/auth",        websiteBasePath: "/auth"    },    recipeList: [        ThirdPartyEmailPassword.init({            signInAndUpFeature: {                providers: [                    Github.init(),                    Google.init(),                    Facebook.init(),                    Apple.init(),                ]            }        }),        Session.init()    ]});

/* Your App */class App extends React.Component {    render() {        return (            <SuperTokensWrapper>                {/*Your app components*/}            </SuperTokensWrapper>        );    }}

NOTE

SuperTokens.init uses both the ThirdPartyEmailPassword and Session recipes. ThirdPartyEmailPassword provides the login feature and Session is used for session management (post login).
We've wrapped the entire application with SuperTokensWrapper. This provides session information in all of your components. Check here to see how you can access it.

Via NPM
Via Script Tag

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

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

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

3) Setup Routing to show the login UI#

ReactJS
Angular
Vue
Plain JavaScript
React Native

Do you use react-router-dom?

YesNo

info

You will have to manage routing of auth screens yourself since you are building your own UI.
The supertokens-web-js SDK exposes several helper functions that you can use to build your UI. Checkout the SDK reference docs.

Note

To use SuperTokens with React Native you need to use the 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

4) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?