fix: Fix the sign out

Author: LubomirGeorgiev

src/app/(auth)/sign-in/sign-in.client.tsx

@@ -26,14 +26,34 @@ interface PasskeyAuthenticationButtonProps {
 }
 
 function PasskeyAuthenticationButton({ className, disabled, children }: PasskeyAuthenticationButtonProps) {
+  const { execute: generateOptions } = useServerAction(generateAuthenticationOptionsAction, {
+    onError: (error) => {
+      toast.dismiss();
+      toast.error(error.err?.message || "Failed to get authentication options");
+    },
+  });
+
+  const { execute: verifyAuthentication } = useServerAction(verifyAuthenticationAction, {
+    onError: (error) => {
+      toast.dismiss();
+      toast.error(error.err?.message || "Authentication failed");
+    },
+    onSuccess: () => {
+      toast.dismiss();
+      toast.success("Authentication successful");
+      window.location.href = "/dashboard";
+    },
+  });
+
   const [isAuthenticating, setIsAuthenticating] = useState(false);
 
   const handleAuthenticate = async () => {
     try {
       setIsAuthenticating(true);
+      toast.loading("Authenticating with passkey...");
 
       // Get authentication options from the server
-      const [options] = await generateAuthenticationOptionsAction({});
+      const [options] = await generateOptions({});
 
       if (!options) {
         throw new Error("Failed to get authentication options");
@@ -45,16 +65,14 @@ function PasskeyAuthenticationButton({ className, disabled, children }: PasskeyA
       });
 
       // Send the response back to the server for verification
-      await verifyAuthenticationAction({
+      await verifyAuthentication({
         response: authenticationResponse,
         challenge: options.challenge,
       });
-
-      toast.success("Authentication successful");
-      window.location.href = "/dashboard"; // Redirect to dashboard after successful authentication
     } catch (error) {
       console.error("Passkey authentication error:", error);
-      toast.error((error as { err?: { message: string } })?.err?.message || "Authentication failed");
+      toast.dismiss();
+      toast.error("Authentication failed");
     } finally {
       setIsAuthenticating(false);
     }

src/app/(settings)/settings/security/passkey-settings.actions.ts

@@ -160,7 +160,7 @@ export const verifyAuthenticationAction = createServerAction()
     const { verification, credential } = await verifyPasskeyAuthentication(input.response, input.challenge);
 
     if (!verification.verified) {
-      throw new Error("Passkey authentication failed");
+      throw new ZSAError("FORBIDDEN", "Passkey authentication failed");
     }
 
     await createAndStoreSession(credential.userId, "passkey", input.response.id);

src/components/nav-user.tsx

@@ -84,31 +84,35 @@ export function NavUser({
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="cursor-pointer">
                 <Sparkles />
                 Upgrade to Pro
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="cursor-pointer">
                 <BadgeCheck />
                 Account
               </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="cursor-pointer">
                 <CreditCard />
                 Billing
               </DropdownMenuItem>
-              <DropdownMenuItem>
+              <DropdownMenuItem className="cursor-pointer">
                 <Bell />
                 Notifications
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => {
-              signOut()
-              router.push('/')
-            }}>
+            <DropdownMenuItem
+              onClick={() => {
+                signOut().then(() => {
+                  router.push('/')
+                })
+              }}
+              className="cursor-pointer"
+            >
               <LogOut />
               Log out
             </DropdownMenuItem>

src/hooks/useSignOut.ts

@@ -1,16 +1,16 @@
 import { useSessionStore } from "@/state/session";
 import { signOutAction } from "@/actions/sign-out.action";
-
-
+import { toast } from "sonner";
 const useSignOut = () => {
   const { clearSession } = useSessionStore();
 
-  const signOut = () => {
-    signOutAction().then(() => {
-      setTimeout(() => {
-        clearSession()
-      }, 200)
-    })
+  const signOut = async () => {
+    toast.loading("Signing out...")
+    await signOutAction();
+    clearSession();
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    toast.dismiss()
+    toast.success("Signed out successfully")
   }
 
   return { signOut }