The final chapter of the series. Learn how to implement a complete password reset and recovery flow using Supabase email links, plus essential security considerations like rate limiting, token expiry, and one-time-use tokens.

Next.js Authentication with Supabase and NextAuth.js: Password Reset & Recovery (Part 3 of 3) 🔐

By Sidharrth Mahadevan | Published: March 3, 2025 Original Article on Medium

Introduction

Welcome to the final installment of our Next.js authentication adventure! 🎉 Here's where we've been:

In Part 1, we set up the foundation with NextAuth.js and Supabase.
In Part 2, we implemented sign-up, sign-in, and sign-out flows.
And here in Part 3, we're adding the crucial password reset and recovery functionality.

Building authentication from scratch is challenging — there are countless security considerations, edge cases, and user experience details to get right. By combining Supabase's robust auth services with NextAuth.js's elegant React integration, we've created a system that's both secure and developer-friendly.

// app/auth/update-password/page.tsx 'use client'; import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { supabase } from '@/lib/supabase'; export default function UpdatePasswordPage() { const router = useRouter(); const [password, setPassword] = useState(''); const [confirm, setConfirm] = useState(''); const [error, setError] = useState(''); const [message, setMessage] = useState(''); const [loading, setLoading] = useState(false); // Supabase places the session tokens in the URL hash after the reset link is clicked useEffect(() => { const hash = window.location.hash; if (hash) { const params = new URLSearchParams(hash.substring(1)); const accessToken = params.get('access_token'); const refreshToken = params.get('refresh_token'); if (accessToken && refreshToken) { supabase.auth.setSession({ access_token: accessToken, refresh_token: refreshToken }); } } }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (password !== confirm) { setError('Passwords do not match.'); return; } if (password.length < 8) { setError('Password must be at least 8 characters.'); return; } setLoading(true); const { error: updateError } = await supabase.auth.updateUser({ password }); setLoading(false); if (updateError) { setError(updateError.message); } else { setMessage('Password updated successfully! Redirecting to sign in...'); setTimeout(() => router.push('/auth/signin'), 2000); } }; return ( <div> <h1>Set New Password</h1> <form onSubmit={handleSubmit}> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="New password" required /> <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Confirm new password" required /> <button type="submit" disabled={loading}> {loading ? 'Updating...' : 'Update Password'} </button> </form> {message && <p style={{ color: 'green' }}>{message}</p>} {error && <p style={{ color: 'red' }}>{error}</p>} </div> ); }

Next.js Authentication with Supabase and NextAuth.js: Password Reset & Recovery (Part 3 of 3)

Next.js Authentication with Supabase and NextAuth.js: Password Reset & Recovery (Part 3 of 3) 🔐

Introduction

Deepen Your Knowledge

Stay updated with the latest in AI

Series Overview

The Password Reset Flow

1. Request a Password Reset

2. The "Forgot Password" Page

3. The Update Password Page

4. 🔒 Security Considerations

One-Time Use Tokens

Rate Limiting

Secure Transmission

Password Requirements

Don't Leak Email Existence

🎉 Series Wrap-Up

Core Principles We Applied

Resources

Part	What We Covered
Part 1	NextAuth setup, Supabase client, env variables
Part 2	Sign-up, sign-in, sign-out, JWT sessions, route protection
Part 3	Password reset flow, security best practices