1. Configuration
#
1) Install supertokens packageyarn 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.js
inside theconfig
folder. - Create a
backendConfig.js
inside theconfig
folder. - Create a
frontendConfig.js
inside theconfig
folder. - An example of this file can be found here.
appInfo
configuration.#
3) Create the Please fill the form below to see the code snippet (* = Required)
To learn more about what these properties mean read here.
Your app's name:*

This is the name of your application
API Base Path:

SuperTokens will expose it's APIs scoped by this base API path.
Website Domain:*

This is the URL of your website.
Website Base Path:

SuperTokens UI will be shown on this website route.
#
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'
export const frontendConfig = () => { return { appInfo, recipeList: [ EmailPasswordReact.init(), SessionReact.init(), ], }}
#
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, }}
init
functions#
6) Call the frontend - Create a
/pages/_app.js
file. You can learn more about this file here. - An example of this can be found here
/pages/_app.ts
import '../styles/globals.css'import React from 'react'import { AppProps } from 'next/app'import SuperTokensReact 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 <Component {...pageProps} />}
export default MyApp
#
7) Add API interceptors for automatic session refreshingDo you use axios on your frontend?
YesNo