78 lines
2.3 KiB
Markdown
78 lines
2.3 KiB
Markdown
# Les 9: Supabase Auth — Eerste Login Flow
|
|
|
|
> ✅ **Deze les is volledig uitgewerkt**
|
|
|
|
## Lesmateriaal
|
|
|
|
- [Slide Overzicht](../Les09-Supabase-Auth/Les09-Slide-Overzicht.md)
|
|
- [Docenttekst](../Les09-Supabase-Auth/Les09-Docenttekst.md)
|
|
- [Lesstof](../Les09-Supabase-Auth/Les09-Lesstof.md)
|
|
- [Lesopdracht](../Les09-Supabase-Auth/Les09-Lesopdracht.md)
|
|
- [Huiswerk](../Les09-Supabase-Auth/Les09-Huiswerk.md)
|
|
- [Live Coding Guide](../Les09-Supabase-Auth/Les09-Live-Coding-Guide.md)
|
|
|
|
---
|
|
|
|
## Deel
|
|
**Deel 2 — Technical Foundations** (Les 4-10)
|
|
|
|
## Beschrijving
|
|
Eerste kennismaking met Supabase Auth in de QuickPoll-app: `signUp`, `signIn`, `signOut`, een werkende Navbar met sessie-status en een middleware die routes beschermt. We sluiten af met een eerste blik op Row Level Security (RLS).
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Theorie
|
|
- Waarom je auth nooit zelf moet bouwen
|
|
- Supabase Auth in vogelvlucht (e-mail, magic link, OAuth)
|
|
- Sessie-cookies en `@supabase/ssr` in Next.js 16
|
|
- Middleware-patroon voor beschermde routes
|
|
- Eerste introductie van RLS: "wie mag wat zien?"
|
|
|
|
### Live coding
|
|
- `signUp` + `signIn` server actions
|
|
- Navbar component met `user`-prop
|
|
- `signOut` server action + redirect
|
|
- `middleware.ts` met `updateSession`
|
|
- RLS-policy voor `polls` tabel
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Supabase (Auth + Postgres + RLS)
|
|
- Next.js 16 App Router + Server Actions
|
|
- `@supabase/ssr`
|
|
- TypeScript + Tailwind CSS
|
|
|
|
---
|
|
|
|
## Lesopdracht (in-class, 60 min)
|
|
|
|
Bouw de signup + login + Navbar in je eigen QuickPoll-fork:
|
|
- `/signup` en `/login` routes met server actions
|
|
- Navbar toont "Inloggen" of "Uitloggen" op basis van sessie
|
|
- `middleware.ts` blokkeert `/create` voor anonieme bezoekers
|
|
- Werkende redirect na succesvolle login
|
|
|
|
**Inleveren:** GitHub repo + screenshot van werkende flow.
|
|
|
|
---
|
|
|
|
## Huiswerk (take-home)
|
|
- Voeg een `/profile` pagina toe die alleen ingelogd zichtbaar is
|
|
- Toon e-mailadres en gebruikers-ID
|
|
- Schrijf een korte RLS-policy zodat gebruikers alleen hun eigen polls zien
|
|
- Reflectie van 300 woorden: wat is het verschil tussen authenticatie en autorisatie?
|
|
|
|
**Inleveren:** Via Teams/Brightspace.
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Het verschil tussen authenticatie en autorisatie uitleggen
|
|
- Een werkende signup/login/logout-flow bouwen met Supabase Auth
|
|
- Een Next.js middleware schrijven die routes beschermt
|
|
- Een eerste RLS-policy formuleren en activeren
|