✅ 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>
139 lines
2.8 KiB
TypeScript
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
|
|
}
|