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