Skip to main content
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react

1. Configuration

1) Install supertokens package #

yarn add supertokens-node supertokens-auth-react nextjs-cors

2) Create configuration files #

  • Create a config folder in the root directory of your project
  • Create an appInfo.ts inside the config folder.
  • Create a backendConfig.ts inside the config folder.
  • Create a frontendConfig.ts inside the config folder.
  • An example of these files can be found here.

3) Create the appInfo configuration. #

/config/appInfo.ts

export const appInfo = {  // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo  appName: "<YOUR_APP_NAME>",  apiDomain: "<YOUR_API_DOMAIN>",  websiteDomain: "<YOUR_WEBSITE_DOMAIN>",  apiBasePath: "/auth",  websiteBasePath: "/auth"}

4) Create a frontend config function #

/config/frontendConfig.ts
import EmailPasswordReact from 'supertokens-auth-react/recipe/emailpassword'import SessionReact from 'supertokens-auth-react/recipe/session'import { appInfo } from './appInfo'import Router from 'next/router'
export const frontendConfig = () => {  return {    appInfo,    recipeList: [      EmailPasswordReact.init(),      SessionReact.init(),    ],    windowHandler: (oI: any) => {      return {        ...oI,        location: {          ...oI.location,          setHref: (href: string) => {            Router.push(href)          },        },      }    },  }}

5) Create a backend config function#

/config/backendConfig.ts

import EmailPasswordNode from 'supertokens-node/recipe/emailpassword'import SessionNode from 'supertokens-node/recipe/session'import { appInfo } from './appInfo'import { TypeInput } from "supertokens-node/types";
export const backendConfig = (): TypeInput => {  return {    framework: "express",    supertokens: {      connectionURI: "",      apiKey: "",    },    appInfo,    recipeList: [      EmailPasswordNode.init(),      SessionNode.init(),    ],    isInServerlessEnv: true,  }}

6) Call the frontend init functions and wrap with <SuperTokensWrapper> component #

  • Create a /pages/_app.tsx file. You can learn more about this file here.
  • An example of this can be found here
/pages/_app.tsx
import '../styles/globals.css'import React from 'react'import { AppProps } from 'next/app'import SuperTokensReact, { SuperTokensWrapper } from 'supertokens-auth-react'
import { frontendConfig } from '../config/frontendConfig'
if (typeof window !== 'undefined') {  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'  SuperTokensReact.init(frontendConfig())}
function MyApp({ Component, pageProps }: AppProps) {  return (    <SuperTokensWrapper>      <Component {...pageProps} />    </SuperTokensWrapper>  );}
export default MyApp
Which frontend SDK do you use?
supertokens-web-js / mobile
supertokens-auth-react