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 this file 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 functionHow do you want to identify your users?
Only phone numberOnly emailEmail or phone number
#
5) Create a backend config functionHow do you want to identify your users?
Only phone numberOnly emailEmail or phone number
Which authentication type will you use?
OTPMagic linksOTP and Magic link
#
6) Set up your delivery methodimportant
We are working on our own SMS / email delivery service which will make this step much easier. Until then, you have to send the SMS / emails yourself.
The See next step
comment above is a placeholder where you must provide a function that will send the user the information necessary to log in or sign up:
How do you want to identify your users?
Only phone numberOnly emailEmail or phone number
init
functions#
7) 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
#
8) Add API interceptors for automatic session refreshingDo you use axios on your frontend?
YesNo