Skip to main content

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.

What type of UI are you using?

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​

App Info

Adjust these values based on the application that you are trying to configure. To learn more about what each field means check the references page.
This is the URL of your app's API server.
This is the URL of your app's API server.
SuperTokens will expose it's APIs scoped by this base API path.
This is the URL of your website.
The path where the login UI will be rendered

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.

import React from "react";

import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    // learn more about this on https://supertokens.com/docs/references/app-info
    appName: "<YOUR_APP_NAME>",
    apiDomain: "<YOUR_API_DOMAIN>",
    websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
    apiBasePath: "/auth",
    websiteBasePath: "/auth",
  },
  recipeList: [EmailPassword.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?

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 { EmailPasswordPreBuiltUI } from 'supertokens-auth-react/recipe/emailpassword/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, [EmailPasswordPreBuiltUI])}
                        {/*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.