Writing

Classic Login + Passwordless with Auth0 in Next.js

A concrete guide based on a real case. If you already have your Next.js app working with Auth0, here's how to add passwordless login (code via email) without breaking anything.

Context

In an already-working Next.js app with Auth0, we added support for passwordless login (code via email), while keeping traditional login too. All using Auth0's modern Universal Login, without custom screens.

What we achieved

Steps

1. Enable the Passwordless connection

Go to Authentication → Passwordless → Email and enable the connection. Mode: Code (Magic Links don't work with modern Universal Login). On the Applications tab, enable the connection for your app.

2. The most common error (that burned hours)

Emails with the code never arrived. The problem was in the "From" field within Passwordless Settings.

We had a different email from what was configured in Branding → Email Provider (which uses Amazon SES by default).

⚠️ The "From" address in Passwordless must match exactly the one in the Email Provider. If they don't match, emails fail silently.

Error sending email: Email address is not verified.
The following identities failed the check in region US-EAST-1...

3. Code in Next.js

// pages/api/auth/[...auth0].ts
import { handleAuth, handleLogin, handleCallback } from '@auth0/nextjs-auth0';

export default handleAuth({
  async login(req, res) {
    const { connection } = req.query;
    await handleLogin(req, res, {
      authorizationParams: {
        audience: process.env.AUTH0_CLIENT_AUDIENCE,
        scope: 'openid profile email offline_access',
        ...(connection && { connection: String(connection) }),
      },
    });
  },
  async callback(req, res) {
    await handleCallback(req, res);
  },
});

4. On the frontend: two buttons, two flows

// Classic login
<a href="/api/auth/login">Login with email and password</a>

// Passwordless
<a href="/api/auth/login?connection=email">Login without password (email code)</a>

Final checklist