Frontend Integration

important

For framework specific implementation (like Next.js), please skip this section and go directly to the section with the name of your framework.

An example implementation can be found here.

1) Install

ReactJS

npm i -s supertokens-auth-react

Plain JavaScript

Via NPM

npm i -s supertokens-website

Via Script Tag

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

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

2) Call the init function

ReactJS

Please fill the form below to see the code snippet (* = Required)

Your app's name:*

This is the name of your application

API Domain:*

This is the URL of your app's API domain, without any path.

Website Domain:*

This is the URL of your website, without any path.

Fill form to submit

Plain JavaScript

Via NPM

Please fill the form below to see the code snippet (* = Required)

API Domain:*

This is the URL of your app's API domain, without any path.

Fill form to submit

Via Script Tag

Please fill the form below to see the code snippet (* = Required)

API Domain:*

This is the URL of your app's API domain, without any path.

Fill form to submit

React Native

Please fill the form below to see the code snippet (* = Required)

API Domain:*

This is the URL of your app's API domain, without any path.

Fill form to submit

3) Setup the login UI

ReactJS

Do you use react-router-dom?

YesNo

Refresh the page to undo your selection

Plain JavaScript

Not supported

We do not provide a UI for non ReactJS frameworks yet. So you will have to build your own UI, and integrate them with our APIs.

React Native

Not supported

We do not provide a UI for React Native apps yet. So you will have to build your own UI, and integrate them with our APIs.

4) Add API interceptors for automatic session refreshing

Do you use axios on your frontend?

YesNo

Refresh the page to undo your selection

5) Visit /auth to see the login UI (ReactJS only)

At this stage, you've successfully integrated your website with SuperTokens. The next section will guide you through setting up your backend.