# 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