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.
• An example of these files can be found here.

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

/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'
import Router from 'next/router'

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

5) Create a backend config function

/config/backendConfig.ts

import ThirdPartyNode from 'supertokens-node/recipe/thirdparty'
import SessionNode from 'supertokens-node/recipe/session'
import { appInfo } from './appInfo'
import { TypeInput } from "supertokens-node/types";

export const backendConfig = (): TypeInput => {
  return {
    framework: "express",
    supertokens: {
      connectionURI: "",
      apiKey: "",
    },
    appInfo,
    recipeList: [
      ThirdPartyNode.init({
        signInAndUpFeature: {
          providers: [
            // 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.
            ThirdPartyNode.Google({
              clientId: "1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
              clientSecret: "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",
            }),
            ThirdPartyNode.Github({
              clientId: "467101b197249757c71f",
              clientSecret: "e97051221f4b6426e8fe8d51486396703012f5bd",
            }),
            ThirdPartyNode.Apple({
              clientId: "4398792-io.supertokens.example.service",
              clientSecret: {
                  keyId: "7M48Y4RYDL",
                  privateKey:
                      "-----BEGIN PRIVATE KEY-----\nMIGTAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBHkwdwIBAQQgu8gXs+XYkqXD6Ala9Sf/iJXzhbwcoG5dMh1OonpdJUmgCgYIKoZIzj0DAQehRANCAASfrvlFbFCYqn3I2zeknYXLwtH30JuOKestDbSfZYxZNMqhF/OzdZFTV0zc5u5s3eN+oCWbnvl0hM+9IW0UlkdA\n-----END PRIVATE KEY-----",
                  teamId: "YWQCXGJRJL",
              },
            }),
            // ThirdPartyNode.Facebook({
            //   clientSecret: "FACEBOOK_CLIENT_SECRET",
            //   clientId: "FACEBOOK_CLIENT_ID",
            // }),
          ],
        }
      }),
      SessionNode.init(),
    ],
    isInServerlessEnv: true,
  }
}

When you want to generate your own keys, please refer to the corresponding documentation to get your client ids and client secrets for each of the below providers:

Google

• Generate your client ID and secret by following the docs here
• Set the authorisation callback URL to <YOUR_WEBSITE_DOMAIN>/auth/callback/google

Github

• Generate your client ID and secret by following the docs here
• Set the authorisation callback URL to <YOUR_WEBSITE_DOMAIN>/auth/callback/github

Facebook

• Generate your client ID and secret by following the docs here
• Set the authorisation callback URL to <YOUR_WEBSITE_DOMAIN>/auth/callback/facebook

Note

Make sure to enable https to be able to use the test users of the Facebook app. On http://localhost, the login flow can be verified only with the app's admin user.

Apple

• Generate your client ID and secret by following this article
• Set the authorisation callback URL to <YOUR_API_DOMAIN>/auth/callback/apple. Note that Apple doesn't allow localhost in the URL. So if you are in dev mode, you can use the dev keys we have provided above.

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

• Create a /pages/_app.tsx file. You can learn more about this file here.
• An example of this can be found 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