From 4e7c56eec95e632af9a81d57272653835c20a2fe Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Mon, 6 Apr 2026 23:25:40 -0400
Subject: [PATCH] fix(ui): add error handling and loading state to sign-in

Add try/catch with toast notification and loading state for sign-in
button to improve UX and error visibility.
---
 src/app/auth/signin/page.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
index b27787d..9e42205 100644
--- a/src/app/auth/signin/page.tsx
+++ b/src/app/auth/signin/page.tsx
@@ -5,11 +5,13 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
 
 export default function SignInPage() {
   const { data: session, isPending } = useSession()
   const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
     if (session?.user) {
@@ -18,10 +20,17 @@ export default function SignInPage() {
   }, [session, router])
 
   const handleSignIn = async () => {
-    await signIn.oauth2({
-      providerId: "authentik",
-      callbackURL: "/",
-    })
+    setIsLoading(true)
+    try {
+      await signIn.oauth2({
+        providerId: "authentik",
+        callbackURL: "/",
+      })
+    } catch (error) {
+      toast.error("Failed to sign in. Please try again.")
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   if (isPending) {
@@ -42,8 +51,8 @@ export default function SignInPage() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <Button onClick={handleSignIn} className="w-full" size="lg">
-            Continue with Authentik
+          <Button onClick={handleSignIn} className="w-full" size="lg" disabled={isLoading}>
+            {isLoading ? "Signing in..." : "Continue with Authentik"}
           </Button>
 
           <div className="text-center">