mandant-crm/frontend/composables/useAuth.ts
Tim Stollberg e5e0be57da feat(frontend): scaffold Nuxt 3 CSR SPA with full auth + client/history UI
- Nuxt 3 CSR (ssr:false), @nuxtjs/tailwindcss, dev proxy to backend
- useAuth composable: CSRF cookie, XSRF token, login/logout/fetchUser
- auth middleware: redirects to /login if no session
- Login page, client list with search + create modal
- Client detail with editable name, dynamic notes (JSON), history feed
- History form with type select, inline edit/delete per entry
- Print layout at /clients/:id/print (calls window.print on mount)
- TypeScript interfaces: User, Client, HistoryEntry, PaginatedResponse
- German UI labels throughout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-23 17:33:39 +07:00

48 lines
1.2 KiB
TypeScript

import type { User } from '~/types'
export const useAuth = () => {
const user = useState<User | null>('auth.user', () => null)
const getCsrfCookie = async () => {
await $fetch('/sanctum/csrf-cookie', { credentials: 'include' })
}
const getXsrfToken = (): string => {
const match = document.cookie.match(/XSRF-TOKEN=([^;]+)/)
return match ? decodeURIComponent(match[1]) : ''
}
const fetchUser = async (): Promise<void> => {
try {
const response = await $fetch<{ data: User }>('/api/user', {
credentials: 'include',
})
user.value = response.data
} catch {
user.value = null
}
}
const login = async (email: string, password: string): Promise<void> => {
await getCsrfCookie()
await $fetch('/api/login', {
method: 'POST',
body: { email, password },
credentials: 'include',
headers: { 'X-XSRF-TOKEN': getXsrfToken() },
})
await fetchUser()
}
const logout = async (): Promise<void> => {
await $fetch('/api/logout', {
method: 'POST',
credentials: 'include',
headers: { 'X-XSRF-TOKEN': getXsrfToken() },
})
user.value = null
await navigateTo('/login')
}
return { user, login, logout, fetchUser }
}