623 lines
20 KiB
Markdown
623 lines
20 KiB
Markdown
# Les 9 — Supabase Auth
|
||
## Live Coding Guide voor Docent
|
||
|
||
This is your cheat sheet for the full lesson. Follow the timing in Les09-Docenttekst.md.
|
||
|
||
---
|
||
|
||
## DEEL 1A: UITLEG AUTH (09:10–10:00)
|
||
|
||
### 09:10 | SLIDE 4: Wat is Auth?
|
||
|
||
**Demo:** Open https://supabase.com/dashboard
|
||
|
||
Vertel:
|
||
"Authenticatie is: wie ben jij? Login en password, je identiteit bewijzen.
|
||
Autorisatie is: wat mag je doen? Wie mag polls maken? Dit regelen we met RLS policies.
|
||
Supabase Auth beheert alles: signUp, login, sessies, JWT tokens."
|
||
|
||
**Stap 1:** Dashboard openen, project selecteren
|
||
**Stap 2:** Klik Authentication → Providers → Email
|
||
**Stap 3:** Toon: "Disable Email Confirmations" is AAN
|
||
|
||
Vertel:
|
||
"Deze checkbox is cruciaal voor testen. Normaal zouden users een confirmation email krijgen voordat ze inloggen. Dat slaan we over voor deze les. In productie zet je dit uit."
|
||
|
||
---
|
||
|
||
### 09:20 | SLIDE 5: Auth Functies
|
||
|
||
**Vertel:**
|
||
"Supabase Auth heeft vier kern functies:"
|
||
|
||
**Code tonen (copy-paste in terminal of code editor):**
|
||
|
||
```typescript
|
||
// 1. signUp — Nieuw account
|
||
const { error } = await supabase.auth.signUp({
|
||
email: "user@example.com",
|
||
password: "secure123"
|
||
});
|
||
if (error) console.error(error.message);
|
||
|
||
// 2. signInWithPassword — Inloggen
|
||
const { error } = await supabase.auth.signInWithPassword({
|
||
email: "user@example.com",
|
||
password: "secure123"
|
||
});
|
||
if (error) console.error(error.message);
|
||
|
||
// 3. signOut — Uitloggen
|
||
await supabase.auth.signOut();
|
||
|
||
// 4. getUser — Wie is ingelogd?
|
||
const { data: { user } } = await supabase.auth.getUser();
|
||
console.log(user.email); // "user@example.com"
|
||
console.log(user.id); // "abc-123-def"
|
||
```
|
||
|
||
Vertel:
|
||
"Diese vier functies zijn alles wat je nodig hebt. Error handling: altijd checken of `error` null is."
|
||
|
||
---
|
||
|
||
### 09:30 | SLIDE 6: Server vs Browser Client
|
||
|
||
**Vertel:**
|
||
"Supabase Auth werkt op twee plaatsen:
|
||
1. **Server (Node.js)** — Secure, via cookies
|
||
2. **Browser (React)** — Less secure, via localStorage
|
||
|
||
We gebruiken @supabase/ssr. Dit switcht automatisch."
|
||
|
||
**Show left code block (Server Client):**
|
||
|
||
```typescript
|
||
// lib/supabase-server.ts
|
||
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 { }
|
||
},
|
||
},
|
||
}
|
||
);
|
||
}
|
||
```
|
||
|
||
Vertel:
|
||
"Server client gebruikt cookies. Cookies kunnen beveiligd worden (httpOnly, secure-only). Dit is safer."
|
||
|
||
**Show right code block (Browser Client):**
|
||
|
||
```typescript
|
||
// lib/supabase-browser.ts
|
||
import { createBrowserClient } from "@supabase/ssr";
|
||
|
||
export function createSupabaseBrowserClient() {
|
||
return createBrowserClient(
|
||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||
);
|
||
}
|
||
```
|
||
|
||
Vertel:
|
||
"Browser client werkt in React. localStorage is minder secure (scripts kunnen het uitlezen), maar nodig voor login forms."
|
||
|
||
**Key difference:**
|
||
"Server component (Navbar) → Server client (getUser)
|
||
Client component (LoginForm) → Browser client (signUp, signIn, signOut)"
|
||
|
||
---
|
||
|
||
## DEEL 1B: SAMEN CODEREN (10:00–10:15)
|
||
|
||
Students volgen mee terwijl je dit live codeert (of ze kopieren uit les09-live-coding-guide.md).
|
||
|
||
### Stap 1: npm install
|
||
|
||
```bash
|
||
npm install @supabase/ssr
|
||
```
|
||
|
||
Wacht tot dit klaar is.
|
||
|
||
### Stap 2: lib/supabase-server.ts
|
||
|
||
Maak dit bestand aan:
|
||
|
||
```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
|
||
|
||
```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 of project, naast app/)
|
||
|
||
```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)$).*)"],
|
||
};
|
||
```
|
||
|
||
Vertel:
|
||
"Middleware runt op elke request. `await supabase.auth.getUser()` refresht de session token. Dit zorgt dat je niet uitgelogd wordt als je token expired."
|
||
|
||
### Stap 5: 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);
|
||
}
|
||
```
|
||
|
||
Vertel:
|
||
"Dit is voor OAuth (Google, GitHub). Supabase stuur je hier naartoe na login. De `code` wordt ge-exchanged voor een session. Voor nu: boilerplate, niet essentieel."
|
||
|
||
### Test middleware
|
||
|
||
Vertel:
|
||
"Test of middleware werkt: open http://localhost:3000. Je zou geen errors moeten zien. In browser dev tools → Application → Cookies → zoek naar `sb-*`. Die cookies beteken dat middleware goed werkt."
|
||
|
||
---
|
||
|
||
## PAUZE (10:15–10:30)
|
||
|
||
---
|
||
|
||
## DEEL 2: ZELF DOEN (10:30–11:30)
|
||
|
||
Students bouwen nu zelf. Jij loopt rond, helpt, en toont code op beamer als studenten stuck zijn.
|
||
|
||
### Zelf Doen Checklist (wat moet elke student doen):
|
||
|
||
- [ ] app/signup/page.tsx
|
||
- [ ] app/login/page.tsx
|
||
- [ ] components/LogoutButton.tsx
|
||
- [ ] components/Navbar.tsx
|
||
- [ ] app/layout.tsx updated
|
||
- [ ] Test signup → login → poll maken → logout
|
||
|
||
---
|
||
|
||
### 1. app/signup/page.tsx
|
||
|
||
Dit is een 'use client' component met form. Students schrijven dit zelf, maar hier is de reference:
|
||
|
||
```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>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Students moeten begrijpen:**
|
||
- `'use client'` = React component
|
||
- `createSupabaseBrowserClient()` = browser auth
|
||
- `supabase.auth.signUp({ email, password })` = nieuwe user
|
||
- `if (error)` = error handling
|
||
- `router.push("/login")` = redirect na success
|
||
|
||
---
|
||
|
||
### 2. 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>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Key difference van signup:**
|
||
- `signInWithPassword()` i.p.v. `signUp()`
|
||
- `router.refresh()` om Navbar te update
|
||
- Error styling: `text-red-600`
|
||
|
||
---
|
||
|
||
### 3. 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>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Dit is een klein client component. Belangrijk:**
|
||
- `'use client'` (event handler)
|
||
- `signOut()` — geen params
|
||
- `router.refresh()` — update Navbar
|
||
|
||
---
|
||
|
||
### 4. components/Navbar.tsx
|
||
|
||
Dit is het interessantste component. Server Component met `async`:
|
||
|
||
```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>
|
||
);
|
||
}
|
||
```
|
||
|
||
**Vertel:**
|
||
"Navbar is een **Server Component** (geen 'use client'). Dit betekent `async` is ok. We callen `getUser()` direct — geen hooks nodig!
|
||
|
||
`getUser()` gebruikt server client + cookies. Dit is beveiligd en efficient."
|
||
|
||
**Logica:**
|
||
- Als `user` bestaat: toon email + LogoutButton
|
||
- Anders: toon Inloggen + Registreren links
|
||
|
||
---
|
||
|
||
### 5. app/layout.tsx (update)
|
||
|
||
Voeg Navbar toe:
|
||
|
||
```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>
|
||
);
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
### TROUBLESHOOTING (10:30–11:30)
|
||
|
||
Als studenten stuck zijn, gebruik deze tabel:
|
||
|
||
| Symptoom | Oorzaak | Oplossing |
|
||
|----------|---------|----------|
|
||
| "Module not found: @supabase/ssr" | npm install niet gedaan | `npm install @supabase/ssr` |
|
||
| Navbar toont altijd "Inloggen" (ook na login) | getUser() returns null | Check: cookies middleware working? Browser dev tools → Cookies (zoek sb-*) |
|
||
| Login werkt, maar redirect loopt vast | router.refresh() niet in handleLogin | Voeg `router.refresh()` toe na success |
|
||
| "Invalid PKCE flow" | Browser client not configured | Check .env: NEXT_PUBLIC_SUPABASE_URL en ANON_KEY kloppen |
|
||
| Logout knop werkt niet | signOut() niet awaited | Zorg: `await supabase.auth.signOut()` |
|
||
| Navbar.tsx error: "cannot use async in component" | Navbar is client component | Zorg: geen `'use client'` aan top van Navbar! |
|
||
|
||
---
|
||
|
||
### 11:00 | CHECK-IN: NAVBAR DEMO
|
||
|
||
Toon op beamer je eigen Navbar. Vertel:
|
||
|
||
"Navbar is een **Server Component**. Dit is uniek voor Next.js. In React kan je geen `async` functions gebruiken als components.
|
||
|
||
Hier kan het wel, omdat Next.js bij build-time Server Components render. Cookies zijn secure. getUser() is beveiligd. Dit is beter dan client-side auth check."
|
||
|
||
Toon: `const { data: { user } } = await supabase.auth.getUser();`
|
||
|
||
"Dat een lijn doet alles: leest cookies → vraagt Supabase → geeft user object."
|
||
|
||
---
|
||
|
||
### 11:15 | RLS UPDATE
|
||
|
||
Voer in Supabase dashboard SQL uit:
|
||
|
||
**SQL Editor → New Query:**
|
||
|
||
```sql
|
||
-- Enable RLS on polls table
|
||
ALTER TABLE polls ENABLE ROW LEVEL SECURITY;
|
||
|
||
-- Anyone can read polls
|
||
CREATE POLICY "polls_select_all" ON polls
|
||
FOR SELECT USING (true);
|
||
|
||
-- Only authenticated users can create polls
|
||
CREATE POLICY "polls_insert_authenticated" ON polls
|
||
FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);
|
||
|
||
-- Only the creator can update their own poll
|
||
CREATE POLICY "polls_update_owner" ON polls
|
||
FOR UPDATE USING (auth.uid() = created_by);
|
||
```
|
||
|
||
Vertel:
|
||
"RLS = Row Level Security. Dit enforces wie wat kan doen op database level.
|
||
- Iedereen (anoniem) kan polls zien (SELECT)
|
||
- Alleen ingelogde users (auth.uid() NOT NULL) mogen polls maken (INSERT)
|
||
- Alleen de maker mag hun eigen poll updaten (UPDATE)
|
||
|
||
auth.uid() is de user ID van Supabase. NULL als je niet ingelogd bent."
|
||
|
||
**Test:**
|
||
1. Open http://localhost:3000/create
|
||
2. Niet ingelogd → knop grijs / form gedeactiveerd
|
||
3. Inloggen
|
||
4. Poll aanmaken → werkt!
|
||
5. Uitloggen
|
||
6. /create opnieuw → weer grijs (RLS blokkeert INSERT)
|
||
|
||
---
|
||
|
||
### 11:30–11:45 | VRAGEN & DEBUGGING
|
||
|
||
Loopround. Antwoord vragen:
|
||
|
||
**Q: Hoe debug ik auth?**
|
||
A: Supabase dashboard → Auth → Users. Daar zie je alle users. Of: Browser dev tools → Application → Cookies (zoek `sb-*` prefix).
|
||
|
||
**Q: Hoe reset ik mijn test account?**
|
||
A: Dashboard → Auth → Users → klik user → delete → registreer opnieuw.
|
||
|
||
**Q: Waarom zie ik geen email na login?**
|
||
A: Middleware werkt niet. Zorg middleware.ts in root project staat. Check: `matcher` is correct.
|
||
|
||
**Q: Kan ik multiple providers (Google, GitHub) toevoegen?**
|
||
A: Ja, later. Dashboard → Auth → Providers. Voor nu: email-password is genoeg.
|
||
|
||
---
|
||
|
||
## HUISWERK & AFSLUITING (11:45–12:00)
|
||
|
||
**Huiswerk (slides 9):**
|
||
|
||
1. **Profiel pagina (Les 10)**
|
||
```typescript
|
||
// app/profile/page.tsx
|
||
import { createSupabaseServerClient } from "@/lib/supabase-server";
|
||
|
||
export default async function ProfilePage() {
|
||
const supabase = await createSupabaseServerClient();
|
||
const { data: { user } } = await supabase.auth.getUser();
|
||
return <div>{user?.email}</div>;
|
||
}
|
||
```
|
||
|
||
2. **Maker tonen bij poll (Les 10)**
|
||
- Voeg `created_by uuid` kolom toe polls tabel
|
||
- Update INSERT in /create om `created_by: user.id` toe te voegen
|
||
- Toon "Gemaakt door: [email]" op homepage
|
||
|
||
3. **Google OAuth (Bonus)**
|
||
- Supabase dashboard → Auth → Providers → Google
|
||
- Copy Client ID en Secret van Google Cloud
|
||
- Voeg button toe: `signInWithOAuth({ provider: 'google' })`
|
||
|
||
**Afsluiting (slide 10):**
|
||
|
||
"Volgende les: **Deployment**. We zetten je app live op Vercel. Dan kunnen je vrienden echt je polls gebruiken!
|
||
|
||
Daarna: Google OAuth, profiel updaten, meer security features.
|
||
|
||
Vandaag hebben we de kern van auth gebouwd. Goed gedaan!"
|
||
|
||
---
|
||
|
||
## DOCS
|
||
|
||
Supabase Auth docs: https://supabase.com/docs/guides/auth/server-side/nextjs
|
||
|
||
Next.js Server Components: https://nextjs.org/docs/app/building-your-application/rendering/server-components
|