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:*
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#

How do you want to identify your users?
Only phone numberOnly emailEmail or phone number

5) Create a backend config function#

How 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 method#

important

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

7) 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

8) Add API interceptors for automatic session refreshing#

Do you use axios on your frontend?
YesNo