Skip to main content

Frontend Integration

Supported frameworks#

for mobile apps

For mobile apps, please see the custom UI section (see left nav bar)

Automatic setup using CLI

Run the following command in your terminal.

npx create-supertokens-app@latest --recipe=emailpassword

Once this is done, you can skip Step (1) and (2) in this section (see left nav bar) and move directly to setting up the SuperTokens core (Step 3).

Or, you can manually integrate SuperTokens by following the steps below.

Manual setup steps below

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 https://supertokens.com/docs/emailpassword/appinfo        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) Setup Routing to show the login UI#

Do you use react-router-dom?
YesNo

4) View the login UI#

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.

Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react