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:*
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.
Submit form

4) Create a frontend config function#


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#


import EmailPasswordNode from 'supertokens-node/recipe/emailpassword'import SessionNode from 'supertokens-node/recipe/session'import { appInfo } from './appInfo'
export const backendConfig = () => {  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

import '../styles/globals.css'import React from 'react'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 }) {  return <Component {...pageProps} />}
export default MyApp

7) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?
YesNo
Refresh the page to undo your selection