Skip to main content

Frontend Integration

Supported frameworks#

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

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        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>        );    }}
  • SuperTokens.init uses both the EmailPassword and Session recipes. EmailPassword provides the login feature and Session is used for session management (post login).
  • We've wrapped the entire application with SuperTokensWrapper. This provides session information in all of your components. Check here to see how you can access it.

3) Setup Routing to show the login UI#

Do you use react-router-dom?

4) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?

5) View the login UI (Prebuilt UI only)#

You can view the login UI by visiting /auth.

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