novi-lessons/Les09-Supabase-Auth/Les09-Lesopdracht.md

Les 9 — Lesopdracht

Bouw de auth-flow voor QuickPoll

Duur: ~60 minuten in-class, samen met klasgenoten.

---

Doel

Aan het einde van deze opdracht heeft jouw QuickPoll-fork een werkende signup-, login- en logout-flow met een Navbar die de sessie-status toont.

---

Vereisten

1. Supabase Auth aan

   • Open je Supabase dashboard → Authentication → Providers → Email
   • Zet "Disable Email Confirmations" tijdelijk AAN (voor testen)

2. /signup pagina

   • Form met email + password
   • Server action die supabase.auth.signUp aanroept
   • Bij succes: redirect naar /
   • Bij fout: toon de error-message

3. /login pagina

   • Form met email + password
   • Server action die supabase.auth.signInWithPassword aanroept
   • Bij succes: redirect naar /
   • Bij fout: toon de error-message

4. Navbar component

   • Server component
   • Vraagt getUser() op
   • Toont email + "Uitloggen" als ingelogd
   • Toont "Inloggen" + "Registreren" als anoniem

5. /signout server action

   • Roept supabase.auth.signOut() aan
   • Redirect naar /

6. Middleware

   • Gebruik de updateSession-helper uit de Supabase docs
   • Configureer matcher om alle routes te dekken behalve statische assets

---

Stappenplan

1. Installeer @supabase/ssr (10 min)
2. Maak lib/supabase-server.ts (10 min)
3. Maak /signup route + action (15 min)
4. Maak /login route + action (10 min)
5. Maak Navbar component (10 min)
6. Test de volledige flow (5 min)

---

Op te leveren

• GitHub-commit met werkende code
• Screenshot van Navbar in beide states (ingelogd + anoniem)
• 2 zinnen reflectie: wat ging makkelijker dan verwacht, wat lastiger?

Inleveren: Push naar je QuickPoll-repo én plaats een screenshot in de Teams chat.

---

Hulp nodig?

• Stuck op cookies? Vraag een klasgenoot, dan Tim
• Stuck op middleware? Les09-Live-Coding-Guide.md heeft de complete code
• Stuck op Supabase config? Loop met Tim mee in een browser-share

Veel succes!