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)

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:

SuperTokens UI will be shown on this website route.

Submit form

Plain JavaScript

Via NPM

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

To learn more about what these properties mean read here.

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.

Submit form

Via Script Tag

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

To learn more about what these properties mean read here.

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.

Submit form

React Native

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

To learn more about what these properties mean read here.

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.

Submit form

3) Setup the login UI

ReactJS

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

To learn more about what these properties mean read here.

Website Base Path:

SuperTokens UI will be shown on this website route.

Submit form

Plain JavaScript

Note

To use SuperTokens with plain javascript you need to use the supertokens-website 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

You can refer to this blog post to know how this is done, the example uses social login but the same setup applies to other recipes as well.

React Native

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?

YesNo

5) View the login UI (ReactJS only)

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

To learn more about what these properties mean read here.

Website Base Path:

SuperTokens UI will be shown on this website route.

Submit form