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 these files 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 ThirdPartyReact, {Google, Facebook} from 'supertokens-auth-react/recipe/thirdparty'import SessionReact from 'supertokens-auth-react/recipe/session'import { appInfo } from './appInfo'
export const frontendConfig = () => {  return {    appInfo,    recipeList: [      ThirdPartyReact.init({        signInAndUpFeature: {          providers: [            ThirdPartyReact.Google.init(),            ThirdPartyReact.Facebook.init(),            ThirdPartyReact.Apple.init(),            ThirdPartyReact.Github.init(),          ],        },      }),      SessionReact.init(),    ],  }}

5) Create a backend config function#

Please fill the form below to see the code snippet (* = Required)
To learn more about what these properties mean read here.
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

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