SuperTokens

SuperTokens

  • Docs
  • Discord
  • Blog

›Quick setup

SIDEBAR_REPLACE_DOC_About this recipe

  • About this recipe

Quick setup

  • Frontend
  • Backend
  • Core

    • Self Hosted setup with Docker
    • Self Hosted setup without Docker
    • Managed Service

    Database Setup

    • MySQL
    • PostgreSQL
    • MongoDB
    • Rename database tables

Common customizations

  • Redirect To Auth Screen
  • Sign Out
  • SignUp Form

    • Prerequisite
    • Adding Extra Fields
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Embed in a page
    • Terms of service & Privacy policy links
    • Show Sign Up by default

    SignIn Form

    • Prerequisite
    • Adding / Modifying field validators
    • Built in providers
    • Custom providers
    • Password managers
    • Embed in a page
  • Post sign up callbacks
  • Post sign in callbacks
  • User Roles

    • Assigning roles to users
    • Assigning roles to a session
    • Reading roles in an API
    • Reading roles in the frontend
    • Updating roles in a session

    Reset Password

    • About
    • Reset Password Email
    • Embed in a page

    Email Verification

    • About
    • Customising the email sent
    • Embed in a page

    Sessions

    • About
    • Storing session data
    • Session Verification in API
    • Revoking a session manually
    • Change session timeout
    • Checking if a session exists on the frontend
    • Get user information on the frontend
    • Fetching sessions for a user
    • Update JWT Payload
    • Update Session Data
    • Cookies and Https
    • Cookie Consent
    • Share sessions across sub domains
    • Anti CSRF
    • Same site cookies
    • JWT Signing key rotation
    • Access token blacklisting
    • Customizing Error Handling

    Styling

    • Changing Colours
    • Changing Style via CSS
    • Themes

    Changing base path

    • Website Base Path
    • API Base Path
  • User Pagination
  • Core

    • Adding API Keys
    • Tuning Performance
    • Logging

    Core CLI

    • Overview
    • Start
    • List
    • Stop
    • Uninstall

NextJS

  • About
  • 1. Configuration
  • 2. Showing Login UI
  • 3. Adding auth APIs
  • 4. Protecting a website route
  • 5. Session verification

    • 5a. Session verification in an API call
    • 5b. Session verification in getServerSideProps
  • 6. Next steps

SIDEBAR_REPLACE_DOC_Serverless Optimisation

  • Running on serverless env

SIDEBAR_REPLACE_DOC_SDKs API Reference

  • SDKs API Reference

React Installation (5 mins)

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

This library provides a set of modules that you can add to your React application to implement authentication.

An example implementation can be found here.

1️⃣ npm install

npm i -s supertokens-auth-react

2️⃣ Call the init function

Then in your App.js file, import SuperTokens and call the init function. Please make sure to replace all the appInfo configurations values with yours.

ReactJS
import React from 'react';

import SuperTokens from "supertokens-auth-react";
import ThirdPartyEmailPassword, {Github, Google, Facebook} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
appInfo: {
appName: "YOUR APP NAME", // Example: "SuperTokens",
apiDomain: "YOUR API DOMAIN", // Example: "https://api.supertokens.io",
websiteDomain: "YOUR WEBSITE DOMAIN" // Example: "https://supertokens.io"
},
recipeList: [
ThirdpartyEmailPassword.init({
signInAndUpFeature: {
providers: [
Github.init()
Google.init()
Facebook.init()
]
}
}),
Session.init()
]
});



/* Your App */
class App extends React.component {
render() {
return (...)
}
}
If you only want to use email and password, you do not have to pass any providers in the config. If you only want to use ThirdParty providers, you can set `disableEmailPassword` in the config to `true`. In that case you must pass at least 1 provider.

3️⃣ Setup routes

Enabling routing will allow SuperTokens to insert components in specific pages, such as for Sign-up / Sign-in page.

With react-router-dom
With custom routing

Call the getSuperTokensRoutesForReactRouterDom method from within any react-router-dom Switch component.

import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

import SuperTokens, { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
import ThirdPartyEmailPassword from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
// Previously added configs
});


class App extends React.Components {
render() {
return (
<Router>
<YourNavBar/>
<Switch>
{getSuperTokensRoutesForReactRouterDom()}
{...}
</Switch>
<YourFooter />
</Router>

);
}
}

If you use a custom routing system in your React application, you can add SuperTokens routes via:

import React from 'react';
import SuperTokens from "supertokens-auth-react";

class App extends React.Components {
render() {
if (SuperTokens.canHandleRoute()) {
return SuperTokens.getRoutingComponent()
}


return (
(...)
);
}

}

4️⃣ Protect your application with the Authentication wrapper

Use ThirdPartyEmailPasswordAuth component in order to protect authenticated parts of your application:

With react-router-dom
With custom routing
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

import SuperTokens, { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
import ThirdPartyEmailPassword, {ThirdPartyEmailPasswordAuth} from "supertokens-auth-react/recipe/thirdpartyemailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
// Previously added configs
});


class App extends React.Components {
render() {
return (
<Router>
<YourNavBar/>
<Switch>
{getSuperTokensRoutesForReactRouterDom()}

<Route path="/dashboard">
<ThirdPartyEmailPasswordAuth>
// Components that require to be protected by authentication
</ThirdPartyEmailPasswordAuth>
</Route>


// Other components without authentication
{...}
</Switch>
<YourFooter />
</Router>

);
}
}
import React from 'react';
import SuperTokens from "supertokens-auth-react";
import {ThirdPartyEmailPasswordAuth} from "supertokens-auth-react/recipe/thirdpartyemailpassword";

class App extends React.Components {
render() {
if (SuperTokens.canHandleRoute()) {
return SuperTokens.getRoutingComponent()
}

return (
<ThirdPartyEmailPasswordAuth>
// Components that require to be protected by authentication
</ThirdPartyEmailPasswordAuth>

);

}

}

5️⃣ Add axios session interceptor

This step is only applicable if you are using axios

Add the interceptor for each axios import call

ReactJS
import axios from "axios";
import Session from "supertokens-auth-react/recipe/session";
Session.addAxiosInterceptors(axios);


async function callAPI() {
// use axios as you normally do
let response = await axios.get(...);
}

An example of this can be found in our demo app.

Frontend setup completed 🎉🥳

If you navigate to /auth in your application, you should see the SuperTokens Sign-up / Sign-in widgets.

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

← About this recipeBackend →