Skip to main content

If you are using our backend SDK that is lesser than the following versions, please visit the older documentation link here.

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
/config/frontendConfig.ts
import PasswordlessReact from 'supertokens-auth-react/recipe/passwordless'
import ThirdPartyReact from 'supertokens-auth-react/recipe/thirdparty'
import SessionReact from 'supertokens-auth-react/recipe/session'
import { appInfo } from './appInfo'
import Router from 'next/router'

export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [
        PasswordlessReact.init({
            contactMethod: "PHONE"
        }),
        ThirdPartyReact.init({
          signInAndUpFeature: {
            providers: [
              ThirdPartyReact.Google.init(),
              ThirdPartyReact.Facebook.init(),
              ThirdPartyReact.Github.init(),
              ThirdPartyReact.Apple.init(),
            ],
          },
        }),
        SessionReact.init()
    ],
    windowHandler: (oI: any) => {
      return {
        ...oI,
        location: {
          ...oI.location,
          setHref: (href: string) => {
            Router.push(href)
          },
        },
      }
    },
  }
}

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
/config/backendConfig.ts
import SuperTokens from "supertokens-node";
import ThirdPartyNode from "supertokens-node/recipe/thirdparty"
import PasswordlessNode from "supertokens-node/recipe/passwordless"
import SessionNode from 'supertokens-node/recipe/session'
import { appInfo } from './appInfo'
import { TypeInput } from "supertokens-node/types";

export const backendConfig = (): TypeInput => {
  return {
    framework: "custom",
    supertokens: {
      connectionURI: "",
      apiKey: "",
    },
    appInfo,
    recipeList: [
      PasswordlessNode.init({
        flowType: "USER_INPUT_CODE",
        contactMethod: "PHONE",
      }),
      ThirdPartyNode.init({
        // We have provided you with development keys which you can use for testing.
        // IMPORTANT: Please replace them with your own OAuth keys for production use.
        signInAndUpFeature: {
          providers: [{
              config: {
                  thirdPartyId: "google",
                  clients: [{
                      clientId: "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
                      clientSecret: "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"
                  }]
              }
          }, {
              config: {
                  thirdPartyId: "github",
                  clients: [{
                      clientId: "467101b197249757c71f",
                      clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd"
                  }]
              }
          }, {
              config: {
                  thirdPartyId: "apple",
                  clients: [{
                      clientId: "4398792-io.supertokens.example.service",
                      additionalConfig: {
                          keyId: "7M48Y4RYDL",
                          privateKey:
                              "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
                          teamId: "YWQCXGJRJL",
                      }
                  }]
              }
          }],
        }
      }),
      SessionNode.init(),
    ],
    isInServerlessEnv: true,
  }
}

6) Set up your email / sms delivery method#

How do you want to identify your users?
Only phone numberOnly emailEmail or phone number
  • Using your Twilio account
  • SuperTokens SMS service
  • Custom method with full control

By default, if nothing is configured, the SDK will send SMSs using our APIs (https://api.supertokens.com). This is rate limited and is only meant for development / demo purposes.

You can learn more about each of these methods in the "SMS Delivery" section under "Auth Flow Customizations" (find it in the navigation list on the left).

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
Looking for older versions of the documentation?
Which UI do you use?
Custom UI
Pre built UI