68 lines
2.2 KiB
TypeScript
68 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { useSearchParams } from "next/navigation"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Alert, AlertDescription } from "@/components/ui/alert"
|
|
import { AlertTriangle } from "lucide-react"
|
|
import Link from "next/link"
|
|
|
|
const errorMessages = {
|
|
Configuration: "There is a problem with the server configuration.",
|
|
AccessDenied: "You do not have permission to sign in.",
|
|
Verification: "The verification token has expired or has already been used.",
|
|
Default: "An error occurred during authentication.",
|
|
}
|
|
|
|
export default function AuthError() {
|
|
const searchParams = useSearchParams()
|
|
const error = searchParams.get("error") as keyof typeof errorMessages
|
|
|
|
const errorMessage = errorMessages[error] || errorMessages.Default
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="text-center">
|
|
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
|
|
<AlertTriangle className="h-6 w-6 text-red-600" />
|
|
</div>
|
|
<CardTitle className="text-2xl font-bold text-red-900">
|
|
Authentication Error
|
|
</CardTitle>
|
|
<CardDescription>
|
|
There was a problem signing you in
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<Alert variant="destructive">
|
|
<AlertDescription>
|
|
{errorMessage}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<div className="space-y-4">
|
|
<Button asChild className="w-full">
|
|
<Link href="/auth/signin">
|
|
Try Again
|
|
</Link>
|
|
</Button>
|
|
|
|
<Button variant="outline" asChild className="w-full">
|
|
<Link href="/">
|
|
Back to Home
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="text-center text-sm text-gray-500">
|
|
<p>Error code: {error}</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|