fix: lessons

2026-06-07 15:15:11 +02:00
parent 83779e0d7a
commit 4f13aadc1a
121 changed files with 2038 additions and 23690 deletions
--- a/Samenvattingen/Les09-Samenvatting.md
+++ b/Samenvattingen/Les09-Samenvatting.md
@@ -1,96 +1,77 @@
-# Les 9: Cursor Deep Dive (Student Plan)
+# 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)

 ---

-## Hoofdstuk
-**Deel 2: Technical Foundations** (Les 4-9)
+## Deel
+**Deel 2 — Technical Foundations** (Les 4-10)

 ## Beschrijving
-Studenten hebben Cursor met het Student Plan. Tijd voor een deep dive in de 5 professionele workflows: **Rules & Skills, Plan Mode, Agent Mode, Debug Mode, en Code Review & Testing**. We bouwen een nieuwe app from scratch: **LinkVault** (bookmark manager, in-memory, Next.js 16 + TypeScript + Tailwind).
+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).

 ---

-## Lesopbouw (3 uur)
+## Te Behandelen

-| Tijd | Onderwerp | Vorm |
-|------|-----------|------|
-| 09:00–09:10 | Welkom + terugblik | Klassikaal |
-| 09:10–09:35 | Theorie: Agent Harness, Rules, Plan/Debug/Review Mode | Klassikaal |
-| 09:35–09:55 | Setup: nieuw project + 3 `.cursor/rules` bestanden | Samen |
-| 09:55–10:15 | Plan Mode: plan LinkVault → review → Build | Klassikaal |
-| 10:15–10:30 | Pauze | — |
-| 10:30–11:05 | Agent Mode: features bouwen | Klassikaal |
-| 11:05–11:25 | Debug Mode: deterministische bug vinden en fixen | Klassikaal |
-| 11:25–11:45 | Code Review & Testing + semantic commits + git push | Klassikaal |
-| 11:45–11:55 | (Optioneel) PR review met Cursor | Klassikaal |
-| 11:55–12:00 | Afsluiting + huiswerk | Klassikaal |
+### 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?"

---
-
-## De 5 Kernvaardigheden
-
-### 1. Rules & Skills
- `.cursor/rules/` directory met `.mdc` bestanden (YAML frontmatter)
- 3 bestanden: `project.mdc` (alwaysApply), `components.mdc` (globs: tsx), `styles.mdc` (globs: css/tsx)
- Houd rules kort, specifiek, en wijs naar voorbeelden
-
-### 2. Plan Mode
- `Shift+Tab` → agent researcht, stelt vragen, maakt interactief plan
- Plan bewerken in markdown → "Build" klikken
- Start elke feature met een plan
-
-### 3. Agent Mode
- Agent = uitvoeren (files, terminal, multi-file). Ask = alleen vragen.
- Goede context geven: `@file`, `@folder`, `@codebase`, `@docs`
- Itereren met screenshots en feedback
-
-### 4. Debug Mode
- Voor complexe bugs: hypotheses → logging → reproduceren → analyseren → fix
- Tim introduceert bug handmatig (deterministic) → studenten debuggen
-
-### 5. Code Review & Testing
- "Find Issues" voor self-review
- Tests schrijven met Agent Mode
- Semantic commits: achteraf changes opdelen in logische groepen
- (Optioneel) PR review met Cursor
+### 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
- Cursor (Student Plan)
- Next.js 16
- TypeScript
- Tailwind CSS
+- Supabase (Auth + Postgres + RLS)
+- Next.js 16 App Router + Server Actions
+- `@supabase/ssr`
+- TypeScript + Tailwind CSS

 ---

-## Lesmateriaal
- `Les09-Slide-Overzicht.md`
- `Les09-Docenttekst.md`
- `Les09-Huiswerk.md`
+## 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:
- Uitleggen hoe een coding agent werkt (harness: instructions + tools + model)
- `.cursor/rules` opzetten met meerdere bestanden (alwaysApply, globs)
- Plan Mode gebruiken om een feature te plannen
- Agent Mode inzetten voor multi-file feature development
- Debug Mode gebruiken voor systematisch debuggen
- Code review doen met "Find Issues" en tests schrijven
- Semantic commits maken en een PR aanmaken
- Een app from scratch bouwen met alle 5 technieken
-
---
-
-## Voorbereiding docent
- [ ] `npx create-next-app@latest` getest
- [ ] 3 `.cursor/rules` bestanden voorbereid
- [ ] Plan Mode demo doorgelopen
- [ ] Bug voor Debug Mode voorbereid (tag.toUpperCase() in filter)
- [ ] GitHub repo klaar voor push demo
-
---
-
-*Laatste update: april 2026*
+- 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