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.
found here.#
An example implementation can be#
1) Install- ReactJS
- Plain JavaScript
- React Native
npm i -s supertokens-auth-react
- Via NPM
- Via Script Tag
npm i -s supertokens-website
<script src="https://cdn.jsdelivr.net/gh/supertokens/supertokens-website/bundle/bundle.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
init
function#
2) Call the - ReactJS
- Plain JavaScript
- React Native





- Via NPM
- Via Script Tag






#
3) Setup the login UI- ReactJS
- Plain JavaScript
- React Native

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.
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#
5) View the login UI (ReactJS only)