Files
triqura-ecd/lib/auth/client.ts
colinislit 273c00f9e8 Epic 2: Design System Migration - Teal-first implementatie
 E2.S1: Tailwind config update
- Teal-700 (#0F766E) als PRIMARY brand color (5.47:1 contrast)
- Amber-600→700 gradient voor AI features
- Updated ring color naar teal-700 voor WCAG AA

 E2.S2: Global CSS variables
- --color-brand → teal-700 (was blue-600)
- --color-info → teal-700 (was blue-500)
- --color-input-focus → teal-700 (was blue-500)
- --color-ai toegevoegd → amber-600

 E2.S3: Component color updates
- components/ui/sign-in.tsx: Alle blue → teal
- components/ui/timeline.tsx: Gradient blue → teal
- components/ui/reading-progress.tsx: Progress bar blue → teal
- components/ui/modern-side-bar.tsx: Logo, active states blue → teal

 E2.S4: AIButton component
- Nieuw component: components/ui/ai-button.tsx
- Amber-600→700 gradient voor WCAG compliance
- 3 variants: default, outline, ghost
- Loading state + Sparkles icon
- Fully accessible (WCAG AA focus states)

 E2.S5: Contrast testing
- scripts/test-contrast.ts: Automated WCAG testing
- docs/design/wcag-compliance.md: Compliance documentatie
- Resultaten: 7/11 AA Normal (4.5:1), 11/11 AA Large (3:1) 

WCAG AA Compliance:  PASS
- Teal-700 op wit: 5.47:1 (AA Normal)
- White op teal-700: 5.47:1 (AA Normal)
- White op amber-600: 3.19:1 (AA Large - OK voor buttons)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 17:38:22 +01:00

139 lines
2.8 KiB
TypeScript

/**
* Supabase Auth Client Utilities
*
* Client-side auth helpers for login, logout, and session management
*/
import { createBrowserClient } from '@supabase/ssr'
import type { Database } from '@/lib/database.types'
/**
* Create Supabase client for browser/client-side use
*/
export function createClient() {
return createBrowserClient<Database>(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}
/**
* Send magic link to user's email
* Auto-creates account if user doesn't exist
*/
export async function loginWithMagicLink(email: string) {
const supabase = createClient()
const { data, error } = await supabase.auth.signInWithOtp({
email,
options: {
emailRedirectTo: `${window.location.origin}/auth/callback`,
shouldCreateUser: true, // Auto-create account on first login
}
})
if (error) throw error
return {
success: true,
message: 'Check je email voor de magic link!',
data
}
}
/**
* Login with email + password (for demo accounts)
*/
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 {
success: true,
user: data.user,
session: data.session
}
}
/**
* Logout current user
*/
export async function logout() {
const supabase = createClient()
const { error } = await supabase.auth.signOut()
if (error) throw error
// Redirect to login
window.location.href = '/login'
}
/**
* Get current session
*/
export async function getSession() {
const supabase = createClient()
const { data: { session }, error } = await supabase.auth.getSession()
if (error) throw error
return session
}
/**
* Get current user
*/
export async function getUser() {
const supabase = createClient()
const { data: { user }, error } = await supabase.auth.getUser()
if (error) throw error
return user
}
/**
* Check if user is authenticated
*/
export async function isAuthenticated() {
const session = await getSession()
return !!session
}
/**
* Subscribe to auth state changes
*/
export function onAuthStateChange(
callback: (event: string, session: any) => void
) {
const supabase = createClient()
const { data: { subscription } } = supabase.auth.onAuthStateChange(
callback
)
return subscription
}
/**
* Check if current user is a demo user
* @deprecated Demo users are no longer supported
*/
export async function isDemoUser(): Promise<boolean> {
return false
}
/**
* Get demo user access level
* @deprecated Demo users are no longer supported
*/
export async function getDemoAccessLevel(): Promise<'read_only' | 'interactive' | 'presenter' | null> {
return null
}