Email Passwordless Login with Web3Auth

Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of passwordless authentication simplifies the onboarding process, removes friction for end users, and expands accessibility—especially in regions where social login options may be limited.

Set Up a Custom Email Connection

Enable on Dashboard

To use this feature, developers must first enable Email Passwordless from the Social Connections section in the Web3Auth Dashboard.

By default, Web3Auth uses its own pre-configured credentials for email login.

For enhanced control and branding, developers are encouraged to configure a custom email connection. Follow these steps:

1. Visit the Web3Auth Dashboard.
2. Go to the Social Connections section.
3. Click the Settings icon next to the toggle for Email Passwordless.
4. Enter your custom Auth Connection ID.
5. Click Add Connection to complete the setup.

Usage

web3authContext.tsx

import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
import { type Web3AuthContextConfig } from "@web3auth/modal/react";

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions: {
    clientId: "YOUR_CLIENT_ID",
    web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
    modalConfig: {
      connectors: {
        [WALLET_CONNECTORS.AUTH]: {
          label: "auth",
          loginMethods: {
            email_passwordless: {
              name: "email passwordless login",
              authConnectionId: "w3a-email_passwordless-demo",
            },
          },
        },
      },
    },
  },
};

export default web3AuthContextConfig;

Follow our Quickstart Guide to setup the basic flow.