Authentication & User Management - Documentatie

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 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:

Ga naar /login
Klik op "Demo Account Proberen"
Automatisch ingelogd en doorgestuurd

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

// 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:

// 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

Timeline:

Week 1 - Foundation & Marketing

Code:

Documentation:

Supabase Auth Docs