Magic Link Auth

1// src/app/api/auth/magic-link/route.ts
2import { NextResponse } from "next/server";
3import { prisma } from "@/lib/db";
4import { sendMagicLinkEmail } from "@/lib/email";
5import { nanoid } from "nanoid";
6import { config } from "@/config";
7
8export async function POST(request: Request) {
9  const { email } = await request.json();
10
11  if (!email) {
12    return NextResponse.json({ error: "Email required" }, { status: 400 });
13  }
14
15  // Find or create user
16  let user = await prisma.user.findUnique({
17    where: { email },
18  });
19
20  if (!user) {
21    user = await prisma.user.create({
22      data: {
23        email,
24        emailVerified: null, // Will be verified on click
25      },
26    });
27  }
28
29  // Generate secure token
30  const token = nanoid(32);
31  const expires = new Date(Date.now() + config.auth.magicLinkExpiry);
32
33  // Store token
34  await prisma.verificationToken.create({
35    data: {
36      identifier: email,
37      token,
38      expires,
39    },
40  });
41
42  // Send magic link email
43  const magicLink = `${config.app.url}/api/auth/verify?token=${token}&email=${email}`;
44
45  await sendMagicLinkEmail({
46    to: email,
47    magicLink,
48    expiresIn: "24 hours",
49  });
50
51  return NextResponse.json({
52    success: true,
53    message: "Magic link sent to your email",
54  });
55}

1"use client";
2
3import { useState } from "react";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6
7export function MagicLinkForm() {
8  const [email, setEmail] = useState("");
9  const [loading, setLoading] = useState(false);
10  const [sent, setSent] = useState(false);
11
12  const handleSubmit = async (e: React.FormEvent) => {
13    e.preventDefault();
14    setLoading(true);
15
16    try {
17      const response = await fetch("/api/auth/magic-link", {
18        method: "POST",
19        headers: { "Content-Type": "application/json" },
20        body: JSON.stringify({ email }),
21      });
22
23      if (!response.ok) {
24        throw new Error("Failed to send magic link");
25      }
26
27      setSent(true);
28    } catch (_) {
29      alert("Failed to send magic link. Please try again.");
30    } finally {
31      setLoading(false);
32    }
33  };
34
35  if (sent) {
36    return (
37      <div className="text-center py-8">
38        <h3>Check your email</h3>
39        <p>We sent a magic link to <strong>{email}</strong></p>
40        <p>Click the link in the email to sign in.</p>
41      </div>
42    );
43  }
44
45  return (
46    <form onSubmit={handleSubmit} className="space-y-4">
47      <Input
48        type="email"
49        placeholder="you@example.com"
50        value={email}
51        onChange={(e) => setEmail(e.target.value)}
52        required
53      />
54      <Button type="submit" className="w-full" disabled={loading}>
55        {loading ? "Sending..." : "Send Magic Link"}
56      </Button>
57    </form>
58  );
59}