# 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**: 
```javascript
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
```javascript
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.
- [Customize the Magic Link](/content/docs/authentication/passwordless/customize-the-magic-link/index.html)
- [OTP Customization](/content/docs/authentication/passwordless/customize-the-otp/index.html)
- [Hooks and overrides](/content/docs/authentication/passwordless/hooks-and-overrides/index.html)
- [Email Delivery](/content/docs/platform-configuration/email-delivery/index.html)
- [SMS Delivery](/content/docs/platform-configuration/sms-delivery/index.html)