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

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

Single app setup

/config/supertokensConfig.ts

import ThirdParty from "supertokens-node/recipe/thirdparty"
import Passwordless from "supertokens-node/recipe/passwordless"
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/thirdpartypasswordless/appinfo
      appName: "<YOUR_APP_NAME>",
      apiDomain: "<YOUR_API_DOMAIN>",
      websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
      apiBasePath: "/auth",
      websiteBasePath: "/auth",
      apiGatewayPath: "/dev"
    },
    recipeList: [
      Passwordless.init({
        flowType: "USER_INPUT_CODE",
        contactMethod: "PHONE",
      }),
      ThirdParty.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",
                      }
                  }]
              }
          }],
        }
      }),
      Session.init(),
    ],
    isInServerlessEnv: true,
  }
}

module.exports.getBackendConfig = getBackendConfig;

Multi app setup

/config/supertokensConfig.ts

import ThirdParty from "supertokens-node/recipe/thirdparty"
import Passwordless from "supertokens-node/recipe/passwordless"
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/thirdpartypasswordless/appinfo
      appName: "<YOUR_APP_NAME>",
      apiDomain: "<YOUR_API_DOMAIN>",
      websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
      apiBasePath: "/auth",
      websiteBasePath: "/auth",
      apiGatewayPath: "/dev"
    },
    recipeList: [
      Passwordless.init({
        flowType: "USER_INPUT_CODE",
        contactMethod: "PHONE",
      }),
      ThirdParty.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",
                      }
                  }]
              }
          }],
        }
      }),
      Session.init(),
    ],
    isInServerlessEnv: true,
  }
}

module.exports.getBackendConfig = getBackendConfig;

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