Skip to main content

Frontend Integration

Supported frameworks#

1) Install#

npm i -s supertokens-auth-react

2) Call the init function#

import React from 'react';
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";import ThirdPartyEmailPassword, {Github, Google, Facebook, Apple} from "supertokens-auth-react/recipe/thirdpartyemailpassword";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: [        ThirdPartyEmailPassword.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>        );    }}
  • SuperTokens.init uses both the ThirdPartyEmailPassword and Session recipes. ThirdPartyEmailPassword 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.