77 lines
2.0 KiB
Markdown
77 lines
2.0 KiB
Markdown
# 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!
|