Which UI do you use?

Custom UI

Pre built UI

2. Backend config

1) Install supertokens package

npm i supertokens-node

2) Create a configuration file (config/supertokensConfig.js)

• Create a config folder in the root directory of your project.
• Create a supertokensConfig.js inside the config folder.
• An example of this file can be found here.

3) Create a backend config function

To learn more about what these properties mean read here.

Your app's name:*

This is the name of your application

API Domain:*

This is the URL of your app's API server.

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:

The path where the login UI will be rendered

I am using Netlify Serverless Functions

Submit form

Single app setup

/config/supertokensConfig.ts

import ThirdParty from 'supertokens-node/recipe/thirdparty';
import Session from 'supertokens-node/recipe/session'

function getBackendConfig() {
  return {
    framework: "awsLambda",
    supertokens: {
      connectionURI: "",
      apiKey: "",
    },
    appInfo: {
      // learn more about this on https://supertokens.com/docs/thirdparty/appinfo
      appName: "<YOUR_APP_NAME>",
      apiDomain: "<YOUR_API_DOMAIN>",
      websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
      apiBasePath: "/.netlify/functions/auth",
      websiteBasePath: "/auth"
    },
    recipeList: [
      ThirdParty.init({
        signInAndUpFeature: {
          // 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.
          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",
                }
              }]
            }
          }],
        }
      }),
      Session.init(),
    ],
    isInServerlessEnv: true,
  }
}

module.exports.getBackendConfig = getBackendConfig;

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>/.netlify/functions/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.

Multi app setup

/config/supertokensConfig.ts

import ThirdParty from 'supertokens-node/recipe/thirdparty';
import Session from 'supertokens-node/recipe/session'

function getBackendConfig() {
  return {
    framework: "awsLambda",
    supertokens: {
      connectionURI: "",
      apiKey: "",
    },
    appInfo: {
      // learn more about this on https://supertokens.com/docs/thirdparty/appinfo
      appName: "<YOUR_APP_NAME>",
      apiDomain: "<YOUR_API_DOMAIN>",
      websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
      apiBasePath: "/.netlify/functions/auth",
      websiteBasePath: "/auth"
    },
    recipeList: [
      ThirdParty.init({
        signInAndUpFeature: {
          // 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.
          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",
                }
              }]
            }
          }],
        }
      }),
      Session.init(),
    ],
    isInServerlessEnv: true,
  }
}

module.exports.getBackendConfig = getBackendConfig;

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>/.netlify/functions/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.