feat: confirm logout component

Author: ivan-dalmet

app/features/account/user-card.tsx

@@ -6,15 +6,13 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardAction, CardHeader, CardTitle } from '@/components/ui/card';
-import { ConfirmResponsiveDrawer } from '@/components/ui/confirm-responsive-drawer';
 
 import { AccountCardRow } from '@/features/account/account-card-row';
 import { ChangeNameDrawer } from '@/features/account/change-name-drawer';
-import { useSignOut } from '@/features/auth/utils';
+import { ConfirmLogout } from '@/features/auth/confirm-logout';
 
 export const UserCard = () => {
   const session = authClient.useSession();
-  const signOut = useSignOut();
   return (
     <Card className="gap-0 p-0">
       <CardHeader className="gap-y-0 py-4">
@@ -34,26 +32,12 @@ export const UserCard = () => {
           </div>
         </div>
         <CardAction>
-          <ConfirmResponsiveDrawer
-            onConfirm={async () => signOut.mutateAsync()}
-            title="Account logout"
-            description="You are about to end your session"
-            confirmText={
-              <>
-                <LogOutIcon />
-                Logout
-              </>
-            }
-          >
-            <Button
-              size="sm"
-              variant="ghost"
-              loading={signOut.isPending || signOut.isSuccess}
-            >
+          <ConfirmLogout>
+            <Button size="sm" variant="ghost">
               <LogOutIcon />
-              Logout
+              Logout {/* TODO translations */}
             </Button>
-          </ConfirmResponsiveDrawer>
+          </ConfirmLogout>
         </CardAction>
       </CardHeader>
 

app/features/auth/confirm-logout.tsx

@@ -0,0 +1,35 @@
+import { LogOutIcon } from 'lucide-react';
+import { ReactElement } from 'react';
+import { toast } from 'sonner';
+
+import { authClient } from '@/lib/auth/client';
+
+import { ConfirmResponsiveDrawer } from '@/components/ui/confirm-responsive-drawer';
+
+export const ConfirmLogout = (props: {
+  children: ReactElement<{ onClick: () => unknown }>;
+}) => {
+  const session = authClient.useSession();
+  return (
+    <ConfirmResponsiveDrawer
+      onConfirm={async () => {
+        const response = await authClient.signOut();
+        if (response.error) {
+          toast.error('Failed to logout');
+          return;
+        }
+        await session.refetch();
+      }}
+      title="Account logout"
+      description="You are about to end your session"
+      confirmText={
+        <>
+          <LogOutIcon />
+          Logout
+        </>
+      }
+    >
+      {props.children}
+    </ConfirmResponsiveDrawer>
+  );
+};

app/features/auth/guard-authenticated.tsx

@@ -38,6 +38,11 @@ export const GuardAuthenticated = ({
     return null;
   }
 
+  // Check if onboarding is done
+  if (!session.data.user.onboardedAt) {
+    return <PageOnboarding />;
+  }
+
   // Unauthorized if the user permission do not match
   if (
     permissionApps &&
@@ -51,10 +56,5 @@ export const GuardAuthenticated = ({
     return <PageError errorCode={403} />;
   }
 
-  // Check if onboarding is done
-  if (!session.data.user.onboardedAt) {
-    return <PageOnboarding />;
-  }
-
   return <>{children}</>;
 };

app/features/auth/page-onboarding.tsx

@@ -16,15 +16,14 @@ import {
 } from '@/components/form';
 import { Button } from '@/components/ui/button';
 
+import { ConfirmLogout } from '@/features/auth/confirm-logout';
 import { LayoutLogin } from '@/features/auth/layout-login';
 import { useMascot } from '@/features/auth/mascot';
 import { zFormFieldsOnboarding } from '@/features/auth/schema';
-import { useSignOut } from '@/features/auth/utils';
 
 export const PageOnboarding = () => {
   const { t } = useTranslation(['auth']);
   const session = authClient.useSession();
-  const signOut = useSignOut();
 
   const submitOnboarding = useMutation(
     orpc.account.submitOnboarding.mutationOptions({
@@ -55,16 +54,12 @@ export const PageOnboarding = () => {
               email: session.data?.user.email,
             })}
           </p>
-          <Button
-            size="xs"
-            variant="link"
-            className="opacity-80"
-            loading={signOut.isPending || signOut.isSuccess}
-            onClick={() => signOut.mutate()}
-          >
-            <LogOutIcon />
-            {t('auth:pageOnboarding.signOut')}
-          </Button>
+          <ConfirmLogout>
+            <Button size="xs" variant="link" className="opacity-80">
+              <LogOutIcon />
+              {t('auth:pageOnboarding.signOut')}
+            </Button>
+          </ConfirmLogout>
         </div>
       }
     >

app/features/auth/utils.ts

@@ -1,24 +1,9 @@
-import { useMutation } from '@tanstack/react-query';
 import { useRouter, useSearch } from '@tanstack/react-router';
 import { useEffect } from 'react';
 
 import { authClient } from '@/lib/auth/client';
 import { Role } from '@/lib/auth/permissions';
 
-export const useSignOut = () => {
-  const router = useRouter();
-  return useMutation({
-    mutationFn: async () => {
-      const response = await authClient.signOut();
-      if (response.error) {
-        throw new Error(response.error.message);
-      }
-      router.navigate({ to: '/' });
-      return response.data;
-    },
-  });
-};
-
 export const useRedirectAfterLogin = () => {
   const search = useSearch({ strict: false });
   const router = useRouter();

app/layout/manager/nav-user.tsx

@@ -34,16 +34,14 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from '@/components/ui/sidebar';
-import { Spinner } from '@/components/ui/spinner';
 import { themes } from '@/components/ui/theme-switcher';
 
-import { useSignOut } from '@/features/auth/utils';
+import { ConfirmLogout } from '@/features/auth/confirm-logout';
 
 export function NavUser() {
   const { t } = useTranslation(['common']);
   const { isMobile } = useSidebar();
   const session = authClient.useSession();
-  const signOut = useSignOut();
   const { setOpenMobile } = useSidebar();
   const { theme, setTheme } = useTheme();
 
@@ -69,11 +67,7 @@ export function NavUser() {
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">{user.name}</span>
               </div>
-              {signOut.isPending ? (
-                <Spinner className="ml-auto size-4" />
-              ) : (
-                <ChevronsUpDownIcon className="ml-auto size-4" />
-              )}
+              <ChevronsUpDownIcon className="ml-auto size-4" />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -140,10 +134,16 @@ export function NavUser() {
               </DropdownMenuItem>
             </DropdownMenuGroup>
             <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => signOut.mutate()}>
-              <LogOutIcon />
-              Log out
-            </DropdownMenuItem>
+            <ConfirmLogout>
+              <DropdownMenuItem
+                onSelect={(e) => {
+                  e.preventDefault();
+                }}
+              >
+                <LogOutIcon />
+                Log out
+              </DropdownMenuItem>
+            </ConfirmLogout>
           </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>