Password Reset

Goal

This snapshot advances Wavelength Daily by teaching you to request and complete a secure password reset.

Each numbered folder is a complete app. Run it independently and compare adjacent snapshots to isolate the new responsibility.

Prerequisites

Use Node.js 20 or newer, npm, and a terminal. Basic TypeScript, HTML, and CSS familiarity will help.

The development server uses port 5173. Database snapshots also need Docker and the Supabase CLI.

• Node.js and npm
• A code editor
• Docker from part 4 onward

Concepts

Supabase sends a recovery link; the callback exchanges its code before the user submits a new password.

SvelteKit keeps route UI, server loading, and form actions close together while preserving a clear browser/server boundary.

Walkthrough

Create request and update actions, validate both inputs, and use a safe local next path.

Trace the example from request to rendered page, then inspect the complete matching snapshot for types, validation, and failure handling.

await supabase.auth.resetPasswordForEmail(email, { redirectTo });

Run and verify

Enter 11-Password-Reset, install dependencies, and start the app. Supabase stages must start the local stack and copy the printed anon key into .env.

Open http://localhost:5173 and keep the terminal visible so browser actions can be matched to server errors.

git clone https://github.com/michaeldunga1/fcc-sveltekit-blog.git
cd fcc-sveltekit-blog/11-Password-Reset
npm install
npx supabase start
cp .env.example .env
npm run dev

Troubleshooting

Inspect local Supabase mail output and allowed redirect URLs if no usable recovery link arrives.

A missing package usually means npm install ran in another snapshot. After changing environment variables, restart the SvelteKit process.

• Read the first error first
• Check the current snapshot path
• Never commit .env or node_modules

Try this

Reset Ada's password, sign in with it, then restore password123 for later exercises.

Test one happy path and one invalid or unauthorized path before moving on.

• Make one focused change
• Verify it in the browser
• Compare with the next snapshot after it works