# Les 8 — Slide Overzicht
## Supabase Auth: Inloggen & Registreren

---

## Slide 1: Titelslide
**Layout:** Split (cream links, blauw rechts) — Keynote stijl
- NOVI Hogeschool logo
- "AI leerlijn"
- **Next.js**
- **Les 8**

---

## Slide 2: Terugblik vorige les
**Layout:** Cream + blauw blob rechts
- **Titel:** Terugblik vorige les
- Links: Wat we gebouwd hebben
  - Stemmen werkend gemaakt
  - Supabase account + project aangemaakt
  - Polls + options tabellen
  - Foreign keys & CASCADE
  - RLS policies (SELECT/UPDATE voor anon)
  - Testdata via Table Editor
- Rechts: Wat nog mist
  - Supabase niet gekoppeld aan Next.js
  - Geen login/registratie

---

## Slide 3: Planning
**Layout:** Gele achtergrond + decoratieve blobs
- **Titel:** Planning
- Deel 1: Live Coding Supabase koppelen — 65 min
  - Client setup, environment variables
  - Data layer herschrijven
  - Components aanpassen
  - Data persisten testen
- Pauze — 15 min
- Deel 2: Uitleg + Zelf Doen — 60 min
  - 30 min: Uitleg Auth functies
  - 30 min: Zelf /create pagina bouwen
- Afsluiting — 30 min

---

## Slide 4: Van Array naar Database
**Layout:** Cream + blauw blob rechts
- **Titel:** Van Array naar Database
- Links: code block met de oude in-memory code
  ```
  let polls: Poll[] = [
    { id: "1", question: "...", ... }
  ];
  ```
- Rechts: Supabase query
  ```
  const { data } = await supabase
    .from("polls")
    .select("*, options(*)");
  ```
- Pijl van links naar rechts: "Zelfde functies, andere data source"

---

## Slide 5: Live Coding Deel 1
**Layout:** Blauw volledig + cream blob links
- **Titel:** Live Coding
- **Subtitel:** Deel 1: Supabase × Next.js
- Stappen:
  - @supabase/supabase-js installeren
  - .env.local configureren
  - Supabase client maken
  - TypeScript types definiëren
  - data.ts herschrijven
  - Components aanpassen
  - Testen: data moet bewaard blijven

---

## Slide 6: Het Patroon
**Layout:** Cream + blauw blob rechts
- **Titel:** Het Patroon
- Server Component:
  ```
  async function PollList() {
    const { data } = await supabase.from("polls").select("*");
    return <div>{/* renderen */}</div>;
  }
  ```
- Client Component:
  ```
  export default function VoteButton() {
    const [loading, setLoading] = useState(false);
    // interactie, fetch naar API
  }
  ```
- Uitleg: "Dit patroon verandert NIET — alleen de data source"

---

## Slide 7: Pauze
**Layout:** Cream + grote blauwe cirkel
- **Titel:** Pauze
- **Subtitel:** 15 minuten
- "Supabase is gekoppeld! Na de pauze: Authentication"

---

## Slide 8: Wat is Auth?
**Layout:** Cream + blauw blob rechts
- **Titel:** Wat is Auth?
- Authenticatie = wie ben je? (login, registratie)
- Autorisatie = wat mag je? (RLS policies, protected routes)
- Supabase Auth biedt:
  - Email/password
  - OAuth (Google, GitHub)
  - Magic links
  - Session management

---

## Slide 9: Auth Functies
**Layout:** Cream + blauw blob rechts
- **Titel:** Auth Functies
- Code examples:
  ```
  // Sign Up
  await supabase.auth.signUp({ email, password });

  // Sign In
  await supabase.auth.signInWithPassword({ email, password });

  // Sign Out
  await supabase.auth.signOut();

  // Get User
  const { data } = await supabase.auth.getUser();
  ```

---

## Slide 10: Zelf Doen
**Layout:** Blauw volledig + cream blob links
- **Titel:** Zelf Doen
- **Subtitel:** Bouw Auth in je project
- Stappen:
  - @supabase/ssr package installeren
  - Auth helpers configureren
  - Sign-up & login pagina's
  - Middleware voor sessies
  - /create pagina bouwen

---

## Slide 11: Huiswerk
**Layout:** Cream + blauw blob rechts
- **Titel:** Huiswerk
- Opdracht: /create pagina bouwen
  1. Alleen ingelogde users kunnen polls maken
  2. Poll wordt gekoppeld aan user.id
  3. Test: zet je eigen polls online
- Extra:
  - Google OAuth integreren
  - Profiel pagina maken
  - Dark mode

---

## Slide 12: Afsluiting
**Layout:** Blauw volledig + cream/roze/zwart blobs links
- **Titel:** Tot volgende week!
- Volgende les: Deployment + meer features
- "Je hebt nu een echte app met login, database en auth!"