Skip to main content
Which UI do you use?
Custom UI
Pre built UI

1. Configuration

1) Install supertokens package #

yarn add supertokens-node supertokens-auth-react supertokens-web-js 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 UI do you use?
Custom UI
Pre built UI