What Are Magic Links?

Magic links are a form of email-based authentication that eliminate the need for passwords. When a user requests access, the system generates a unique URL containing a signed token, typically valid for 10-15 minutes, and sends it to their email. Clicking the link authenticates the user instantly, leveraging the security of email delivery over static credentials. Unlike traditional passwords, which users must remember and manage, magic links shift the burden to a temporary, self-contained mechanism—making them a standout choice for Next.js authentication workflows.

Why Use Magic Links?

Magic links bring distinct advantages to the table, resonating with developer and user needs alike:

• Convenience: Users bypass password entry, reducing friction in the login process.

• Security: Time-limited, unique links minimize risks compared to reusable passwords, assuming proper expiration and delivery safeguards.

• User Experience: A single-click login boosts engagement, a point echoed in a recent X post noting their impact on mobile-first apps.

Community discussions often highlight these benefits, with developers seeking ways to simplify authentication without sacrificing robustness. Magic links deliver on that promise, especially when paired with platforms like Supabase.

How to Implement Magic Links with Next.js and Supabase

Implementing magic links in Next.js with Supabase is straightforward, leveraging Supabase’s built-in email authentication. Below is a step-by-step guide, addressing common questions and incorporating community insights for a secure, efficient setup.

Step 1: Set Up Your Environment

Start with a Next.js project (npx create-next-app@latest my-app --typescript) and a Supabase account (supabase.com). Create a new Supabase project, then enable email authentication under Authentication > Providers in the dashboard. Install the Supabase client:

npm install @supabase/supabase-js

Configure environment variables in .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Create a Supabase client in utils/supabase.js:

import { createClient } from '@supabase/supabase-js';
 
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
 
export const supabase = createClient(supabaseUrl, supabaseKey);

This setup lays the foundation for sending and handling magic links.

Step 2: Generate and Send the Magic Link

Developers often ask, “How do I implement magic links with Supabase?” The process starts with a form where users enter their email to receive the link. In pages/sign-in.js:

'use client';
import { supabase } from '../utils/supabase';
import { useState } from 'react';
 
export default function SignInPage() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(null);
  const [message, setMessage] = useState(null);
 
  const handleSendMagicLink = async () => {
    const { error } = await supabase.auth.signInWithOtp({
      email,
      options: { emailRedirectTo: 'http://localhost:3000/dashboard' },
    });
    if (error) {
      setError(error.message);
    } else {
      setMessage('Check your email for the magic link.');
    }
  };
 
  return (
    <div>
      <input
        type="email"
        value={email}
        placeholder="Enter your email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={handleSendMagicLink}>Send Magic Link</button>
      {error && <p>{error}</p>}
      {message && <p>{message}</p>}
    </div>
  );
}

Here, signInWithOtp sends a magic link (an OTP in Supabase’s terminology) to the user’s email. The emailRedirectTo option specifies where users land after clicking the link.

Step 3: Handle the Redirect

When users click the link, Supabase authenticates them and redirects to the specified URL. To verify the session, use Next.js middleware in middleware.ts:

import { createClient } from '@supabase/supabase-js';
import { NextResponse } from 'next/server';
 
export async function middleware(req) {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
  );
  const { data: { session } } = await supabase.auth.getSession();
  if (!session && req.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/sign-in', req.url));
  }
  return NextResponse.next();
}
 
export const config = { matcher: '/dashboard/:path*' };

This checks for an active session, redirecting unauthenticated users to the sign-in page—a common concern in threads about protecting routes.

Step 4: Secure the Implementation

“Are there security concerns with magic links?” developers ask. Yes, but they’re manageable:

• Set link expiration to 10-15 minutes (Supabase defaults to 60 minutes, adjustable in settings).

• Validate email domains to prevent abuse.

• Avoid HTTP calls in middleware for performance, a pitfall noted in Supabase’s default approach. Instead, rely on session cookies or local JWT validation when needed.

For deployment, update the emailRedirectTo URL in Supabase’s Authentication > URL Configuration to your production domain (e.g., https://myapp.com/dashboard).

Step 5: Display User Data

To show authenticated user info, use a Server Component in app/dashboard/page.tsx:

import { createClient } from '@/utils/supabase';
 
export default async function Dashboard() {
  const supabase = createClient();
  const { data: { session } } = await supabase.auth.getSession();
  const user = session?.user;
 
  return (
    <div>
      {user ? (
        <p>Welcome, {user.email}</p>
      ) : (
        <p>Please sign in.</p>
      )}
    </div>
  );
}

Note: For Server Components, adapt the client setup from previous examples to handle cookies, ensuring edge runtime compatibility.

Addressing Common Developer Questions

Community threads reveal practical concerns worth addressing:

• How do magic links differ from passwords? They’re temporary, email-delivered tokens, not static credentials, reducing reuse risks.

• How do I handle link expiration? Supabase enforces expiration; configure shorter times in the dashboard for added security.

• Can magic links work beyond login? Yes, they’re flexible for email changes or verifications, as implied in thread discussions.

Enhancing with Update

Magic links shine for authentication, but integrating them with billing or multi-tenancy can complicate matters. Update simplifies this by pairing Supabase authentication with providers like Stripe or Lemon Squeezy. A developer on X showcased a template with magic links and Stripe, noting conversion boosts—Update takes this further, offering usage-based pricing and provider-switching flexibility without refactoring.

Conclusion

Magic links redefine authentication with simplicity and security, making them ideal for Next.js and Supabase projects. By generating time-limited links, validating sessions efficiently, and securing the flow, developers can craft a seamless user experience. Key takeaways include optimizing middleware performance, automating user data syncing where needed, and ensuring robust security practices. Start with this implementation today, or explore Update to extend it with billing and beyond. Your app—and your users—will benefit from the effort.