Passwordless Setup for Magic Link Login and OTPs - SuperTokens Docs

Passwordless Setup for Magic Link Login and OTPs

Set up magic link login with the SuperTokens Passwordless recipe, or use email and SMS OTPs with prebuilt or custom UI.

Implement passwordless authentication with the right contact and flow options.

Implement SuperTokens passwordless authentication in this application. Inspect the existing frontend, backend, recipes, and routing first. Ask whether users should authenticate through email, SMS, or both, and whether the flow should use magic links, OTPs, or both. Configure the frontend and backend Passwordless and Session recipes, the selected UI, auth routes, and email or SMS delivery. Preserve existing conventions, keep credentials in environment variables, and validate sign-in, resend, expiry, and session behavior.

Overview

This page shows you how to add the Passwordless recipe to your project. The tutorial creates a login flow, rendered by either the Prebuilt UI components or by your own Custom UI.

Terminology

Before going into the actual steps lets first talk about two terms that influence how you configure the Passwordless recipe.

Contact Method: This defines how the user receives the credentials from your app. You can choose between email, phone number or both (the user has to choose one during the login flow).
Flow Type: This is the credential type used for authentication. You can choose Magic Link, OTP (One-Time Password), or both. The combined flow sends both credentials and the user can complete authentication with either one.

Steps

UI type

Pre-built UI Drop-in components that handle the flows for you. Custom UI Build your own UI and call the SDK directly.

1. Initialize the frontend SDK

Reactjs

1.1 Add the `Passwordless` recipe in your main configuration file.

React:

import React from "react";
import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
import Passwordless from "supertokens-auth-react/recipe/passwordless";
import Session from "supertokens-auth-react/recipe/session";

SuperTokens.init({
  appInfo: {
    // learn more about this on https://supertokens.com/docs/references/frontend-sdks/reference#sdk-configuration
    appName: "<YOUR_APP_NAME>",
    apiDomain: "<YOUR_API_DOMAIN>",
    websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
    apiBasePath: "/auth",
    websiteBasePath: "/auth",
  },
  recipeList: [
    Passwordless.init({
      contactMethod: "EMAIL",
    }),
    Session.init(),
  ],
});

Angular: Add the Passwordless recipe in your AuthComponent.
Vue: Add the Passwordless recipe in your AuthView file.

2. Initialize the backend SDK

You need to initialize the Backend SDK alongside the code that starts your server. The init call includes configuration details for your app. It specifies how the backend connects to the SuperTokens Core, as well as the Recipes used in your setup.

For the Passwordless recipe, you also need to specify the flowType and contactMethod.

Node.js Example

import supertokens from "supertokens-node";
import Session from "supertokens-node/recipe/session";
import Passwordless from "supertokens-node/recipe/passwordless";

supertokens.init({
  framework: "express",
  supertokens: {
    connectionURI: "https://try.supertokens.io",
  },
  appInfo: {
    appName: "<YOUR_APP_NAME>",
    apiDomain: "<YOUR_API_DOMAIN>",
    websiteDomain: "<YOUR_WEBSITE_DOMAIN>",
    apiBasePath: "/auth",
    websiteBasePath: "/auth",
  },
  recipeList: [
    Passwordless.init({
      flowType: "MAGIC_LINK",
      contactMethod: "EMAIL",
    }),
    Session.init(),
  ],
});

Next steps

Having completed the main setup, you can explore more advanced topics related to the Passwordless recipe.