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.#

/config/appInfo.ts

export const appInfo = {  // learn more about this on https://supertokens.com/docs/emailpassword/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'
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 and wrap with <SuperTokensWrapper> component#

  • 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, { 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

7) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?
YesNo
What type of UI do you want to use?
Custom UI
Pre built UI