Skip to main content

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.js inside the config folder.
  • Create a backendConfig.js inside the config folder.
  • Create a frontendConfig.js inside the config folder.
  • An example of this file can be found here.

3) Create the appInfo configuration.#

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:*
Information about the question
This is the name of your application
API Base Path:
Information about the question
SuperTokens will expose it's APIs scoped by this base API path.
Website Domain:*
Information about the question
This is the URL of your website.
Website Base Path:
Information about the question
SuperTokens UI will be shown on this website route.
Submit form

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,  }}

6) Call the frontend init functions#

  • 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 refreshing#

Do you use axios on your frontend?
YesNo