gui.do
Barazo default frontend
barazo.forum
1/**
2 * Auth error boundary -- catches OAuth and authentication flow errors.
3 * Common triggers: expired tokens, revoked access, PDS unavailable.
4 * Next.js requires a default export for error boundaries.
5 */
6
7'use client'
8
9import { useEffect } from 'react'
10import Link from 'next/link'
11import { WarningCircle, ArrowClockwise, SignIn } from '@phosphor-icons/react'
12import { reportError } from '@/lib/error-reporting'
13
14export default function AuthError({
15 error,
16 reset,
17}: {
18 error: Error & { digest?: string }
19 reset: () => void
20}) {
21 useEffect(() => {
22 reportError(error, { boundary: 'auth' })
23 }, [error])
24
25 const message =
26 process.env.NODE_ENV === 'development'
27 ? error.message
28 : 'There was a problem with authentication. This can happen when a session expires or the identity provider is unavailable.'
29
30 return (
31 <>
32 <title>Error | Barazo</title>
33 <div className="flex min-h-[60vh] items-center justify-center bg-background px-4">
34 <div role="alert" aria-live="assertive" className="w-full max-w-md text-center">
35 <WarningCircle size={48} className="mx-auto mb-4 text-destructive" aria-hidden="true" />
36 <h1 className="mb-2 text-xl font-bold text-foreground">Authentication error</h1>
37 <p className="mb-6 text-sm text-muted-foreground">{message}</p>
38 <div className="flex items-center justify-center gap-3">
39 <button
40 type="button"
41 onClick={reset}
42 className="inline-flex items-center gap-1.5 rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
43 >
44 <ArrowClockwise size={16} aria-hidden="true" />
45 Try again
46 </button>
47 <Link
48 href="/login"
49 className="inline-flex items-center gap-1.5 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary-hover"
50 >
51 <SignIn size={16} aria-hidden="true" />
52 Log in again
53 </Link>
54 </div>
55 </div>
56 </div>
57 </>
58 )
59}