Skip to main content

Frontend Integration (5 mins)

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#

npm i -s supertokens-auth-react

2️) Call the init function#

In your App.js file, import SuperTokens and call the init function.

important
  • Please make sure to replace all the appInfo configurations values with yours.
  • To learn more about filling in appInfo, please visit the appInfo page
import React from 'react';
import SuperTokens 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.io/docs/emailpassword/appinfo        appName: "YOUR APP NAME",        apiDomain: "YOUR API DOMAIN",        websiteDomain: "YOUR WEBSITE DOMAIN"    },    recipeList: [        EmailPassword.init(),        Session.init()    ]});

/* Your App */class App extends React.component {    render() {       return (...)    }}

3️) Setup routes#

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

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 EmailPassword from "supertokens-auth-react/recipe/emailpassword";import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({    // Previously added configs});

class App extends React.Components {    render() {        return (            <Router>                <YourNavBar/>                <Switch>                    {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}                    {...}                </Switch>                <YourFooter />            </Router>        );    }}

4️) Protect your application with the Authentication wrapper#

Use EmailPasswordAuth component in order to enforce that a user is logged in when they access a route. If they are not logged in, then will be redirected to the login page.

import React from 'react';import {  BrowserRouter as Router,  Switch,  Route,  Link} from "react-router-dom";
import SuperTokens, { getSuperTokensRoutesForReactRouterDom }  from "supertokens-auth-react";import EmailPassword, { EmailPasswordAuth } from "supertokens-auth-react/recipe/emailpassword";import Session from "supertokens-auth-react/recipe/session";
SuperTokens.init({    // Previously added configs});

class App extends React.Components {    render() {        return (            <Router>                <YourNavBar/>                <Switch>                    {getSuperTokensRoutesForReactRouterDom(require("react-router-dom"))}                                        <Route path="/dashboard">                        <EmailPasswordAuth>                            // Components that require to be protected by authentication                        </EmailPasswordAuth>                    </Route>
                    // Other components without authentication                    {...}                </Switch>                <YourFooter />            </Router>        );    }}

5️) Add axios session interceptor#

important
  • This step is only applicable if you are using axios
  • You must call addAxiosInterceptors on all axios imports.
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(...);}

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.