| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | type AuthResult, |
| 5 | getAuthResultMessage, |
| 6 | parseAuthResult, |
| 7 | } from "@better-auth-ui/core"; |
| 8 | import { useAuth } |
| 9 | import { CircleCheckIcon, CircleXIcon |
| 10 | |
| 11 | import { Button } |
| 12 | import { |
| 13 | Card, |
| 14 | CardContent, |
| 15 | CardDescription, |
| 16 | CardHeader, |
| 17 | CardTitle, |
| 18 | } from "@/components/ui/card"; |
| 19 | import { cn } |
| 20 | import { useIsHydrated } |
| 21 | |
| 22 | type AuthResultProps |
| 23 | className?: string |
| 24 | fallbackIntent: "danger |
| 25 | }; |
| 26 | |
| 27 | function AuthResultView({ className |
| 28 | const { basePaths, |
| 29 | const isHydrated = |
| 30 | const result: |
| 31 | isHydrated ? window. |
| 32 | fallbackIntent, |
| 33 | ); |
| 34 | |
| 35 | const message = |
| 36 | const action = |
| 37 | switch (result.action |
| 38 | case "accountSettings": |
| 39 | return { |
| 40 | label: localization.auth |
| 41 | to: `${basePaths. |
| 42 | }; |
| 43 | case "continue": |
| 44 | return { |
| 45 | label: localization.auth |
| 46 | to: result.redirectTo |
| 47 | }; |
| 48 | case "forgotPassword": |
| 49 | return { |
| 50 | label: localization.auth |
| 51 | to: `${basePaths. |
| 52 | }; |
| 53 | case "signUp": |
| 54 | return { |
| 55 | label: localization.auth |
| 56 | to: `${basePaths. |
| 57 | }; |
| 58 | case "verifyEmail": |
| 59 | return { |
| 60 | label: localization.auth |
| 61 | to: `${basePaths. |
| 62 | }; |
| 63 | default: |
| 64 | return { |
| 65 | label: localization.auth |
| 66 | to: `${basePaths. |
| 67 | }; |
| 68 | } |
| 69 | })(); |
| 70 | const Icon = |
| 71 | result.intent === |
| 72 | ? CircleCheckIcon |
| 73 | : result.intent |
| 74 | ? TriangleAlertIcon |
| 75 | : CircleXIcon; |
| 76 | |
| 77 | return ( |
| 78 | <Card className={ |
| 79 | <CardHeader className=" |
| 80 | <Icon |
| 81 | aria-hidden="true" |
| 82 | className={cn( |
| 83 | "mb-1 size-10", |
| 84 | result.intent === |
| 85 | ? "text-primary" |
| 86 | : result.intent |
| 87 | ? "text-amber-600 dark:text-amber-400" |
| 88 | : "text-destructive", |
| 89 | )} |
| 90 | /> |
| 91 | <CardTitle className=" |
| 92 | <CardDescription>{message. |
| 93 | </CardHeader> |
| 94 | <CardContent> |
| 95 | <Button className=" |
| 96 | {action.label} |
| 97 | </Button> |
| 98 | </CardContent> |
| 99 | </Card> |
| 100 | ); |
| 101 | } |
| 102 | |
| 103 | export function AuthCallback(props |
| 104 | return <AuthResultView { |
| 105 | } |
| 106 | |
| 107 | export function AuthError(props |
| 108 | return <AuthResultView { |
| 109 | } |