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