Skip to main content
Which UI do you use?
Custom UI
Pre built UI

Frontend Setup

Start the setup by configuring your frontend application to use SuperTokens for authentication.

This guide uses the SuperTokens Pre Built UI components. If you want to create your own interface please check the Custom UI tutorial.

1. Install the SDK #

Run the following command in your terminal to install the package.

npm i -s supertokens-auth-react

2. Initialize the SDK #

In your main application file call the SuperTokens.init function to initialize the SDK. The init call includes the main configuration details, as well as the recipes that you will be using in your setup. After that you will have to wrap the application with the SuperTokensWrapper component. This will provide authentication context for the rest of the UI tree.

Based on your setup, edit the ThirdParty recipe init call and remove the providers you don't want to use.

import React from 'react';

import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import ThirdParty, {Github, Google, Facebook, Apple} from "supertokens-auth-react/recipe/thirdparty";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
    appInfo: {
        appName: "<YOUR_APP_NAME>",
        apiDomain: "<YOUR_API_DOMAIN>",
        websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
        apiBasePath: "/auth",
        websiteBasePath: "/auth"
    },
    recipeList: [
        ThirdParty.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>
        );
    }
}

3. Configure Routing #

In order for the Pre Built UI to be rendered inside your application, will will have to specify which routes will show the authentication components. The React SDK uses React Router under the hood to achieve this. Based on whether you already use this package or not in your project, there are two different ways of configuring the routes.

Do you use react-router-dom?
YesNo

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

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

import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import { getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react/ui";
import { ThirdPartyPreBuiltUI } from 'supertokens-auth-react/recipe/thirdparty/prebuiltui';
import * as reactRouterDom from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <SuperTokensWrapper>
                <BrowserRouter>
                    <Routes>
                        {/*This renders the login UI on the /auth route*/}
                        {getSuperTokensRoutesForReactRouterDom(reactRouterDom, [ThirdPartyPreBuiltUI])}
                        {/*Your app routes*/}
                    </Routes>
                </BrowserRouter>
            </SuperTokensWrapper>
        );
    }
}

4. Handle Session Tokens #

This part is handled automatically by the Frontend SDK. You don not need to do anything. The step serves more as a way for us to tell you how is this handled under the hood.

After you call the init function, the SDK will add interceptors to both fetch and XHR, XMLHTTPRequest. The latter is used by the axios library. The interceptors save the session tokens that are generated from the authentication flow. Those tokens are then added to requests initialized by your frontend app which target the backend API. By default, the tokens are stored through session cookies but you can also switch to header based authentication.

5. Secure Application Routes #

In order to prevent unauthorized access to ceratain parts of your frontend application you can use our utilities. Follow the code samples below to understand how to do this.

You can wrap your components with the <SessionAuth> react component. This will ensure that your component renders only if the user is logged in. If they are not logged in, the user will be redirected to the login page.

import React from "react";
import {
    BrowserRouter,
    Routes,
    Route,
} from "react-router-dom";
import { SessionAuth } from "supertokens-auth-react/recipe/session";
import MyDashboardComponent from "./dashboard";

class App extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <Routes>
                    <Route path="/dashboard" element={
                        <SessionAuth>
                            {/*Components that require to be protected by authentication*/}
                            <MyDashboardComponent />
                        </SessionAuth>
                    } />
                </Routes>
            </BrowserRouter>
        );
    }
}

6. View the login UI #

You can check the login UI by visiting the /auth route, in your frontend application. To review all the components of our pre-built UI please follow this link.

🎉 Congratulations 🎉

Congratulations! You've successfully integrated your frontend app with SuperTokens.

The next section will guide you through setting up your backend and then you should be able to complete a login flow.

Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI