novi-lessons/Les08-Supabase-Auth/Les08-Slide-Overzicht.md

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!"