How to build a register user flow in Next.js 15 (frontend, backend, database, email)

How to build a register user flow in Next.js 15 (frontend, backend, database, email)

This technical guide details the implementation of a full-stack user registration system using Next.js 15, Postgres, and Resend. It emphasizes a security-first approach where verification emails are sent before a session is established to mitigate bot risks and secure user data.

Why This Matters

In ideal models, registration is a simple record insertion, but technical reality requires handling account enumeration leaks and spam prevention. Failing to return consistent 200 OK responses regardless of input allows attackers to map existing user bases, while lack of rate limiting leads to resource exhaustion via automated sign-ups. Secure systems must prioritize cryptographically sound tokens and case-insensitive email handling to ensure database integrity.

Key Insights

• Postgres citext extension prevents duplicate accounts by enforcing case-insensitive unique constraints on email fields.
• Secure token storage uses SHA-256 hashes in the database while only raw base64url tokens are transmitted to the user via Resend (2026).
• Security-focused endpoints return a generic 200 OK for existing emails, malformed inputs, or rate limits to block account enumeration attacks.
• Password complexity enforcement (12+ characters, mixed case, numbers) balances NIST recommendations for length with basic complexity filters.
• Next.js 15 autoComplete=“new-password” attribute optimizes browser password manager integration and prompts for strong password generation.

Working Examples

Database schema for users and verification tokens using Postgres citext and partial indexes.

create table users (id bigserial primary key, email citext not null unique, password_hash text not null, email_verified boolean not null default false, created_at timestamptz not null default now(), updated_at timestamptz not null default now()); create table email_verification_tokens (id bigserial primary key, user_id bigint not null references users(id) on delete cascade, token_hash text not null unique, expires_at timestamptz not null, used_at timestamptz, created_at timestamptz not null default now()); create index idx_evt_user_unused on email_verification_tokens(user_id) where used_at is null;

Server-side registration endpoint with rate limiting and constant-time response logic.

export async function POST(req: NextRequest) { const ip = req.headers.get("x-forwarded-for") ?? "unknown"; if (await rateLimit(`register:${ip}`, { max: 3, window: 60 })) { return NextResponse.json({ ok: true }); } const parsed = body.safeParse(await req.json()); if (!parsed.success) { return NextResponse.json({ ok: true }); } const email = parsed.data.email.toLowerCase().trim(); const passwordHash = await bcrypt.hash(parsed.data.password, 12); const existing = await db.query.users.findFirst({ where: eq(users.email, email) }); if (existing) { return NextResponse.json({ ok: true }); } const [user] = await db.insert(users).values({ email, passwordHash, emailVerified: false }).returning({ id: users.id }); const raw = randomBytes(32).toString("base64url"); const tokenHash = createHash("sha256").update(raw).digest("hex"); await db.insert(emailVerificationTokens).values({ userId: user.id, tokenHash, expiresAt: new Date(Date.now() + 24 * 60 * 60 * 1000) }); await sendVerificationEmail(email, raw); return NextResponse.json({ ok: true }); }

Practical Applications

• Use case: SaaS platforms implementing secure signup flows using crypto.randomBytes(32) for non-deterministic tokens. Pitfall: Using Math.random() results in predictable tokens that compromise account security.
• Use case: High-traffic applications utilizing x-forwarded-for headers for IP-based rate limiting (3 requests/min). Pitfall: Lacking rate limits on registration endpoints attracts expensive spam and bot activity.
• Use case: Identity providers using citext to prevent duplicate accounts for ‘[email protected]’ and ‘[email protected]’. Pitfall: Standard text types allow duplicate records that break authentication logic.

References:

• https://dev.to/thegdsks/how-to-build-a-register-user-flow-in-nextjs-15-frontend-backend-database-email-50b5