---
title: "Authentication & User Management"
category: "authentication"
group: "foundation"
version: "0.1.0"
releaseDate: "2024-11-15"
status: "completed"
description: "Login, signup en password reset functionaliteit via Supabase Auth"
---

## Overview

De authentication flow vormt de basis van het Mini-ECD systeem. Gebruikers kunnen nu veilig inloggen, accounts aanmaken en wachtwoorden resetten via Supabase Auth integratie.

**Key features:**
- Email/password authentication
- Demo account voor quick testing
- Password reset flow
- Session management met JWT tokens
- Security via RLS policies

---

## Features

### Login Flow

![Login screen](/releases/authentication/login-screen.png)
*Login formulier met email/password fields en demo account optie*

De login pagina biedt twee opties:
- **Handmatige login:** Email en wachtwoord
- **Demo account:** One-click toegang met `demo@mini-ecd.demo`

**Functionaliteit:**
- Client-side validatie (email format, min 8 characters)
- Server-side authenticatie via Supabase
- Error handling met user-friendly messages
- Redirect naar `/epd/clients` na succesvolle login

**Demo:**
1. Ga naar `/login`
2. Klik op "Demo Account Proberen"
3. Automatisch ingelogd en doorgestuurd

### Signup Flow

Nieuwe gebruikers kunnen zich registreren met:
- Email adres (moet uniek zijn)
- Wachtwoord (min 8 karakters)
- Wachtwoord confirmatie

**Auto-login functionaliteit:**
- Email confirmation is uitgeschakeld voor development
- Direct ingelogd na signup
- Redirect naar EPD applicatie

**Duplicate email handling:**
- Auth hook detecteert bestaande emails
- Automatische login als email al bestaat
- User-friendly message: "Dit emailadres bestaat al. Je bent nu ingelogd!"

### Password Reset

*Coming soon - gepland voor volgende release*

---

## Technical Notes

### Architecture

**Stack:**
- Supabase Auth voor user management
- Next.js 15 Server Components
- Client-side auth helpers in `/lib/auth/client.ts`

**Security:**
- PKCE flow voor OAuth (toekomst)
- JWT tokens in httpOnly cookies
- RLS policies voor data isolatie
- No API keys in frontend code

### File Structure

```
app/
├── login/
│   └── page.tsx           # Login/signup form
└── auth/
    └── callback/
        └── route.ts       # OAuth callback (future)

lib/
├── auth/
│   ├── client.ts          # loginWithPassword, signUpWithPassword
│   └── server.ts          # createClient for server components

supabase/
└── functions/
    └── auth-hook/
        └── index.ts       # Duplicate email detection
```

### Key Functions

```tsx
// Login function
export async function loginWithPassword(email: string, password: string) {
  const supabase = createClient()
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  })

  if (error) throw error
  return data
}

// Signup with auto-login
export async function signUpWithPassword(email: string, password: string) {
  const supabase = createClient()
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      emailRedirectTo: `${origin}/auth/callback`,
    },
  })

  if (error) throw error
  return data
}
```

### Auth Hook

Edge Function voor duplicate email detection:

```typescript
// Prevents duplicate signups by auto-logging in existing users
if (event === 'signup' && existingUser) {
  return new Response(
    JSON.stringify({
      error: {
        message: 'Dit emailadres is al geregistreerd. Je wordt automatisch ingelogd.',
        code: 'user_already_registered',
        data: { shouldAutoLogin: true }
      }
    }),
    { status: 400 }
  )
}
```

---

## Metrics

**Development:**
- ⏱️ Build tijd: 6 uur
- 📝 Lines of code: ~380
- 🧪 Tests: Manual testing (geautomatiseerde tests komen later)

**Performance:**
- 🚀 Login response: < 500ms
- 📦 Bundle size: +15kb (auth client)
- 💾 Database queries: 1 per login

**Cost:**
- 💰 Supabase: €0 (free tier)
- 💰 Edge Functions: €0 (within limits)

---

## What's Next

Geplande verbeteringen voor volgende releases:

- 🔜 Password reset flow
- 🔜 Email verification (production)
- 🔜 OAuth providers (Google, GitHub)
- 🔜 Multi-factor authentication
- 🔜 Session management dashboard

---

## Related Links

**Timeline:**
- [Week 1 - Foundation & Marketing](#timeline)

**Code:**
- [Authentication client library](https://github.com/yourusername/mini-ecd/blob/main/lib/auth/client.ts)
- [Auth hook function](https://github.com/yourusername/mini-ecd/blob/main/supabase/functions/auth-hook)

**Documentation:**
- [Supabase Auth Docs](https://supabase.com/docs/guides/auth)