# Les 9 — Supabase Auth
## Docenttekst

**Les:** 9 van 18
**Onderwerp:** Supabase Authentication (signUp, signIn, signOut, middleware, RLS)
**Duur:** 120 minuten
**Vorige les:** Les 8 — Students hebben Supabase gekoppeld, /create pagina werkend, Server Component patroon, polls database

---

## Leerdoelen
- Authenticatie vs autorisatie begrijpen
- Supabase Auth functies gebruiken: signUp, signInWithPassword, signOut, getUser
- Server client (SSR) vs Browser client onderscheiden
- Middleware voor session refresh implementeren
- Authenticated Navbar bouwen met getUser
- Row Level Security (RLS) voor authenticated users toepassen

---

## Lesopbouw & Timing

### 09:00–09:10 | Welkom + Terugblik (10 min)
**Slides:** 1, 2, 3

Ik start de les. Korte recap van Les 8:
- Supabase project aangemaakt
- NEXT_PUBLIC_SUPABASE_URL en ANON_KEY in .env
- /create pagina with VoteForm component
- Polls tabel in database met votes
- "Na vandaag kunnen jullie je app beveiligen met authenticatie"

**Planning tonen (slide 3):**
- 09:10–10:00: Uitleg Auth concepten + Demo
- 10:00–10:15: Samen Middleware + Auth Callback bouwen
- 10:15–10:30: Pauze
- 10:30–11:30: Zelf Doen (signup, login, logout, Navbar)
- 11:30–11:45: Vragen
- 11:45–12:00: Huiswerk + Afsluiting

---

### 09:10–10:00 | Deel 1a: Uitleg Auth Concepten (50 min)
**Slides:** 4, 5, 6

#### 09:10 | Slide 4: Wat is Auth?

**Vertel:**
"Authenticatie is: wie ben jij? Login, password, je identiteit bewijzen.
Autorisatie is: wat mag je doen? Wie mag polls maken? Dit regelen we later met RLS.
Supabase Auth beheert alles: signUp, login, sessies, JWT tokens."

**Demo:** Open https://supabase.com/dashboard
- Klik project → Authentication → Providers → Email
- Laat zien: Disable Email Confirmations is AAN (sneller testen)
- Zeg: "Students zien zelf deze checkbox na Le 9"

#### 09:20 | Slide 5: Auth Functies

**Vertel:**
"Vier kern functies in Supabase Auth:
1. signUp({ email, password }) — Nieuw account
2. signInWithPassword({ email, password }) — Inloggen
3. signOut() — Uitloggen
4. getUser() — Wie is ingelogd?

Hieronder toon ik hoe we deze gebruiken in Next.js."

**Code tonen (slide 5):**
```typescript
// signUp
const { error } = await supabase.auth.signUp({ email, password });

// signIn
const { error } = await supabase.auth.signInWithPassword({ email, password });

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

// getUser (server of browser)
const { data: { user } } = await supabase.auth.getUser();
```

#### 09:30 | Slide 6: Server vs Browser Client

**Vertel:**
"Supabase Auth werkt in twee omgevingen:
- **Server Client** (Node.js, SSR): via cookies, secure
- **Browser Client** (React, CSR): via localstorage, minder secure

We gebruiken @supabase/ssr package. Dit handelt beide af."

**Toon twee code blokken naast elkaar (slide 6):**

**Server Client** (middleware, Navbar):
```typescript
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createSupabaseServerClient() {
    const cookieStore = await cookies();
    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() { return cookieStore.getAll(); },
                setAll(cookiesToSet) {
                    try {
                        cookiesToSet.forEach(({ name, value, options }) =>
                            cookieStore.set(name, value, options)
                        );
                    } catch { }
                },
            },
        }
    );
}
```

**Browser Client** (signup, login, logout):
```typescript
import { createBrowserClient } from "@supabase/ssr";

export function createSupabaseBrowserClient() {
    return createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    );
}
```

**Zeg:**
"Cookies zijn beveiligd. localStorage in browser kan hack worden. Daarom: server client voor getUser in Navbar, browser client voor login forms."

**📌 Slide 6 referentie voor Middleware:**

Middleware zorgt dat de session word gerefresht op elke request:
```typescript
// middleware.ts
export async function middleware(request: NextRequest) {
    let supabaseResponse = NextResponse.next({ request });
    const supabase = createServerClient(...);
    await supabase.auth.getUser();
    return supabaseResponse;
}
```

"Dit zorgt dat je Session JWT token altijd up-to-date is."

---

### 10:00–10:15 | Deel 1b: Samen Coderen (15 min)

#### Stap 1: npm install
```bash
npm install @supabase/ssr
```

#### Stap 2: lib/supabase-server.ts aanmaken
Voeg dit in (hieronder exact):
```typescript
import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export async function createSupabaseServerClient() {
    const cookieStore = await cookies();
    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() { return cookieStore.getAll(); },
                setAll(cookiesToSet) {
                    try {
                        cookiesToSet.forEach(({ name, value, options }) =>
                            cookieStore.set(name, value, options)
                        );
                    } catch { }
                },
            },
        }
    );
}
```

#### Stap 3: lib/supabase-browser.ts aanmaken
```typescript
import { createBrowserClient } from "@supabase/ssr";

export function createSupabaseBrowserClient() {
    return createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    );
}
```

#### Stap 4: middleware.ts (root project)
```typescript
import { createServerClient } from "@supabase/ssr";
import { NextResponse, type NextRequest } from "next/server";

export async function middleware(request: NextRequest) {
    let supabaseResponse = NextResponse.next({ request });
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() { return request.cookies.getAll(); },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value));
                    supabaseResponse = NextResponse.next({ request });
                    cookiesToSet.forEach(({ name, value, options }) =>
                        supabaseResponse.cookies.set(name, value, options)
                    );
                },
            },
        }
    );
    await supabase.auth.getUser();
    return supabaseResponse;
}

export const config = {
    matcher: ["/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)"],
};
```

#### Stap 5: auth/callback route
`app/auth/callback/route.ts`:
```typescript
import { NextResponse } from "next/server";
import { createSupabaseServerClient } from "@/lib/supabase-server";

export async function GET(request: Request) {
    const { searchParams, origin } = new URL(request.url);
    const code = searchParams.get("code");
    if (code) {
        const supabase = await createSupabaseServerClient();
        await supabase.auth.exchangeCodeForSession(code);
    }
    return NextResponse.redirect(origin);
}
```

**Zeg:** "Dit is standaard Supabase/Next.js boilerplate. Niet allemaal letterlijk begrijpen. Focus op: server vs browser client."

---

### 10:15–10:30 | Pauze
**Slide 7**

---

### 10:30–11:30 | Deel 2: Zelf Doen (60 min)
**Slide 8**

Students bouwen nu zelf:
1. app/signup/page.tsx
2. app/login/page.tsx
3. components/LogoutButton.tsx
4. components/Navbar.tsx (met getUser)
5. Uitloggen in layout.tsx

**Reference code:**

#### app/signup/page.tsx
```typescript
'use client'
import { createSupabaseBrowserClient } from "@/lib/supabase-browser";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Link from "next/link";

export default function SignUp() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [message, setMessage] = useState("");
    const [loading, setLoading] = useState(false);
    const router = useRouter();
    const supabase = createSupabaseBrowserClient();

    const handleSignUp = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setMessage("");
        const { error } = await supabase.auth.signUp({ email, password });
        if (error) { setMessage(error.message); }
        else { setMessage("Account aangemaakt!"); router.push("/login"); }
        setLoading(false);
    };

    return (
        <div className="w-full max-w-md mx-auto p-6">
            <h1 className="text-2xl font-bold mb-6">Registreren</h1>
            <form onSubmit={handleSignUp} className="space-y-4">
                <div>
                    <label className="block text-sm font-medium mb-1">Email</label>
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                        className="w-full p-2 border rounded" required />
                </div>
                <div>
                    <label className="block text-sm font-medium mb-1">Wachtwoord</label>
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
                        className="w-full p-2 border rounded" minLength={6} required />
                </div>
                <button type="submit" disabled={loading}
                    className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:opacity-50">
                    {loading ? "Bezig..." : "Registreren"}
                </button>
            </form>
            {message && <p className="mt-4 text-sm text-center">{message}</p>}
            <p className="mt-4 text-sm text-center">
                Al een account? <Link href="/login" className="text-blue-600 hover:underline">Inloggen</Link>
            </p>
        </div>
    );
}
```

#### app/login/page.tsx
```typescript
'use client'
import { createSupabaseBrowserClient } from "@/lib/supabase-browser";
import { useRouter } from "next/navigation";
import { useState } from "react";
import Link from "next/link";

export default function Login() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [message, setMessage] = useState("");
    const [loading, setLoading] = useState(false);
    const router = useRouter();
    const supabase = createSupabaseBrowserClient();

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        setLoading(true);
        setMessage("");
        const { error } = await supabase.auth.signInWithPassword({ email, password });
        if (error) { setMessage(error.message); }
        else { router.push("/"); router.refresh(); }
        setLoading(false);
    };

    return (
        <div className="w-full max-w-md mx-auto p-6">
            <h1 className="text-2xl font-bold mb-6">Inloggen</h1>
            <form onSubmit={handleLogin} className="space-y-4">
                <div>
                    <label className="block text-sm font-medium mb-1">Email</label>
                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
                        className="w-full p-2 border rounded" required />
                </div>
                <div>
                    <label className="block text-sm font-medium mb-1">Wachtwoord</label>
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
                        className="w-full p-2 border rounded" required />
                </div>
                <button type="submit" disabled={loading}
                    className="w-full bg-blue-600 text-white p-2 rounded hover:bg-blue-700 disabled:opacity-50">
                    {loading ? "Bezig..." : "Inloggen"}
                </button>
            </form>
            {message && <p className="mt-4 text-sm text-red-600 text-center">{message}</p>}
            <p className="mt-4 text-sm text-center">
                Nog geen account? <Link href="/signup" className="text-blue-600 hover:underline">Registreren</Link>
            </p>
        </div>
    );
}
```

#### components/LogoutButton.tsx
```typescript
'use client'
import { createSupabaseBrowserClient } from "@/lib/supabase-browser";
import { useRouter } from "next/navigation";

export function LogoutButton() {
    const router = useRouter();
    const supabase = createSupabaseBrowserClient();
    const handleLogout = async () => {
        await supabase.auth.signOut();
        router.push("/");
        router.refresh();
    };
    return (
        <button onClick={handleLogout} className="text-sm text-gray-600 hover:text-gray-900">
            Uitloggen
        </button>
    );
}
```

#### components/Navbar.tsx
```typescript
import Link from "next/link";
import { createSupabaseServerClient } from "@/lib/supabase-server";
import { LogoutButton } from "./LogoutButton";

export async function Navbar() {
    const supabase = await createSupabaseServerClient();
    const { data: { user } } = await supabase.auth.getUser();
    return (
        <nav className="w-full border-b p-4 flex justify-between items-center">
            <Link href="/" className="text-xl font-bold">QuickPoll</Link>
            <div className="flex items-center gap-4">
                {user ? (
                    <>
                        <span className="text-sm text-gray-600">{user.email}</span>
                        <LogoutButton />
                    </>
                ) : (
                    <>
                        <Link href="/login" className="text-sm hover:underline">Inloggen</Link>
                        <Link href="/signup" className="text-sm bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700">Registreren</Link>
                    </>
                )}
            </div>
        </nav>
    );
}
```

#### app/layout.tsx (updated)
```typescript
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { Navbar } from "@/components/Navbar";

const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

export const metadata: Metadata = { title: "QuickPoll", description: "Stem op je favoriete opties" };

export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
    return (
        <html lang="nl">
            <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
                <Navbar />
                {children}
            </body>
        </html>
    );
}
```

**Instructies voor students:**
1. Maak app/signup/page.tsx — form met email/password inputs
2. Maak app/login/page.tsx — inlog form
3. Maak components/LogoutButton.tsx — knop die signOut() aanroept
4. Maak components/Navbar.tsx — toon email als ingelogd, login/signup links anders
5. Update layout.tsx — voeg `<Navbar />` toe

**Ik loop rond en help. Studenten kunnen stuck raken op:**

#### Veelvoorkomende problemen

| Probleem | Oorzaak | Oplossing |
|----------|---------|----------|
| "Module not found: @supabase/ssr" | npm install niet gedaan | `npm install @supabase/ssr` |
| Navbar toont altijd "Inloggen" | getUser() returns null | Check cookies middleware, browser dev tools |
| Login werkt niet | Verkeerde credentials | Check Supabase dashboard → Auth Users |
| "Invalid PKCE flow" | Browser client misconfigured | Zorg dat .env keys correct zijn |
| Logout werkt niet | signOut() niet wacht | `await supabase.auth.signOut()` |
| Layout.tsx error: Navbar is async | Navbar is Server Component | `async` is ok, use await in getUser() |

---

#### 11:00 | Check-in: Navbar

Ik check of iedereen Navbar werkend heeft. Zeg:
"Navbar is een **Server Component** (async). Daarom kunnen we direct getUser() callen zonder hooks. Dit is uniek voor Next.js."

Toon: `const { data: { user } } = await supabase.auth.getUser();`

#### 11:15 | RLS Update

**Vertel:**
"Nu authenticatie werkt, beveiligen we polls. Wie mag die maken?
- Anoniem (niet ingelogd): mag zien en stemmen
- Authenticated (ingelogd): mag polls maken EN zien EN stemmen"

**Stap 1:** Open Supabase dashboard → SQL Editor

**Stap 2:** Voer uit:
```sql
ALTER TABLE polls ENABLE ROW LEVEL SECURITY;

CREATE POLICY "polls_select_all" ON polls
    FOR SELECT USING (true);

CREATE POLICY "polls_insert_authenticated" ON polls
    FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);

CREATE POLICY "polls_update_owner" ON polls
    FOR UPDATE USING (auth.uid() = created_by);
```

(Zeg: "Auth.uid() is de ID van ingelogde user. NULL als anoniem.")

**Stap 3:** Test in /create:
- Niet ingelogd: Knop grijs / gedeactiveerd
- Ingelogd: Knop blauw, poll aanmaken werkt
- Na uitloggen: Weer grijs

---

### 11:30–11:45 | Vragen & Debugging

Ik loop rond. Studenten kunnen vragen:
- "Hoe debug ik auth?"
  - Supabase dashboard → Auth Users
  - Browser dev tools → Application → Cookies (zoek sb-*)
- "Hoe reset ik mijn account?"
  - Dashboard → Auth Users → delete user → registreer opnieuw

---

### 11:45–12:00 | Huiswerk + Afsluiting (15 min)
**Slides:** 9, 10

**Slide 9: Huiswerk**

1. **Google OAuth (optioneel, moeilijk)**
   - Supabase dashboard → Auth → Providers → Google
   - Copy Client ID, Secret
   - Voeg signInWithOAuth button toe

2. **Profiel pagina (les 10)**
   - app/profile/page.tsx
   - Toon user.email, user.id
   - Update password / email form (kan les 10 zijn)

3. **Maker tonen bij poll (les 10)**
   - Voeg `created_by` toe aan polls tabel
   - Toon bij elke poll wie het maakte
   - Autorisatie: alleen maker mag aanpassen

**Slide 10: Afsluiting**

"Volgende les: Deployment! We zetten je app live op Vercel. Daarna: Google OAuth, profiel, meer RLS."

---

## Extra: Supabase Auth Docs
https://supabase.com/docs/guides/auth/server-side/nextjs