fix: add les 8
This commit is contained in:
174
Les08-Supabase-Auth/Les08-Slide-Overzicht.md
Normal file
174
Les08-Supabase-Auth/Les08-Slide-Overzicht.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# 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!"
|
||||
Reference in New Issue
Block a user