Which UI do you use?

Custom UI

Pre built UI

1. Configuration

1) Install supertokens package

yarn add supertokens-node supertokens-auth-react supertokens-web-js nextjs-cors

2) Create configuration files

• Create a config folder in the root directory of your project
• Create an appInfo.ts inside the config folder.
• Create a backendConfig.ts inside the config folder.
• Create a frontendConfig.ts inside the config folder.

3) Create the appInfo configuration.

/config/appInfo.ts

export const appInfo = {
  // learn more about this on https://supertokens.com/docs/thirdpartyemailpassword/appinfo
  appName: "<YOUR_APP_NAME>",
  apiDomain: "<YOUR_API_DOMAIN>",
  websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
  apiBasePath: "/auth",
  websiteBasePath: "/auth"
}

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 email / sms delivery method

How do you want to identify your users?

Only phone numberOnly emailEmail or phone number

7) Call the frontend init functions and wrap with <SuperTokensWrapper> component

• Create a /pages/_app.tsx file. You can learn more about this file here.

/pages/_app.tsx

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