175 lines
4.0 KiB
Markdown
175 lines
4.0 KiB
Markdown
# 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!"
|