From 69839611983118dd6b274819b0d625e15adbc9d3 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 1 Apr 2025 22:55:43 -0500
Subject: [PATCH] Optimize sign out behavior

---
 src/admin/AdminAppMenu.tsx     |  4 ++--
 src/app/Footer.tsx             |  4 ++--
 src/auth/SignInForm.tsx        | 17 ++++++++++-------
 src/cmdk/CommandKClient.tsx    |  6 ++++--
 src/state/AppState.ts          |  2 +-
 src/state/AppStateProvider.tsx | 10 ++++++----
 6 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 5bdc8521..2f53d0a1 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -44,7 +44,7 @@ export default function AdminAppMenu({
     startUpload,
     setSelectedPhotoIds,
     refreshAdminData,
-    clearAuthStateAndRedirect,
+    clearAuthStateAndRedirectIfNecessary,
   } = useAppState();
 
   const isSelecting = selectedPhotoIds !== undefined;
@@ -148,7 +148,7 @@ export default function AdminAppMenu({
   }, {
     label: 'Sign Out',
     icon: <IconSignOut size={15} />,
-    action: () => signOutAction().then(clearAuthStateAndRedirect),
+    action: () => signOutAction().then(clearAuthStateAndRedirectIfNecessary),
   });
 
   return (
diff --git a/src/app/Footer.tsx b/src/app/Footer.tsx
index eb982578..ba9930fc 100644
--- a/src/app/Footer.tsx
+++ b/src/app/Footer.tsx
@@ -17,7 +17,7 @@ import { useAppState } from '@/state/AppState';
 export default function Footer() {
   const pathname = usePathname();
 
-  const { userEmail, clearAuthStateAndRedirect } = useAppState();
+  const { userEmail, clearAuthStateAndRedirectIfNecessary } = useAppState();
 
   const showFooter = !isPathSignIn(pathname);
 
@@ -49,7 +49,7 @@ export default function Footer() {
                         {userEmail}
                       </div>
                       <form action={() => signOutAction()
-                        .then(clearAuthStateAndRedirect)}>
+                        .then(clearAuthStateAndRedirectIfNecessary)}>
                         <SubmitButtonWithStatus styleAs="link">
                           Sign out
                         </SubmitButtonWithStatus>
diff --git a/src/auth/SignInForm.tsx b/src/auth/SignInForm.tsx
index a59e7119..cc51dc86 100644
--- a/src/auth/SignInForm.tsx
+++ b/src/auth/SignInForm.tsx
@@ -61,15 +61,18 @@ export default function SignInForm({
     password.length > 0;
 
   return (
-    <Container className={clsx(
-      'w-[calc(100vw-1.5rem)] sm:w-[min(360px,90vw)]',
-      'px-6 py-5',
-      className,
-    )}>
+    <Container
+      className={clsx(
+        'w-[calc(100vw-1.5rem)] sm:w-[min(360px,90vw)]',
+        'px-6 py-5',
+        className,
+      )}
+    >
       {includeTitle &&
         <h1 className={clsx(
           'flex gap-3 items-center justify-center',
-          'self-start text-2xl mb-3.5',
+          'self-start text-2xl',
+          'mb-6',
         )}>
           <IconLock className="text-main translate-y-[0.5px]" />
           <span className="text-main">
@@ -77,7 +80,7 @@ export default function SignInForm({
           </span>
         </h1>}
       <form action={action} className="w-full">
-        <div className="space-y-6 w-full -translate-y-0.5">
+        <div className="space-y-5 w-full -translate-y-0.5">
           {response === KEY_CREDENTIALS_SIGN_IN_ERROR &&
             <ErrorNote>
               Invalid email/password
diff --git a/src/cmdk/CommandKClient.tsx b/src/cmdk/CommandKClient.tsx
index 42fd5501..ef6d9320 100644
--- a/src/cmdk/CommandKClient.tsx
+++ b/src/cmdk/CommandKClient.tsx
@@ -124,7 +124,7 @@ export default function CommandKClient({
 
   const {
     isUserSignedIn,
-    clearAuthStateAndRedirect,
+    clearAuthStateAndRedirectIfNecessary,
     isCommandKOpen: isOpen,
     startUpload,
     photosCountHidden,
@@ -521,7 +521,9 @@ export default function CommandKClient({
     }
     adminSection.items.push({
       label: 'Sign Out',
-      action: () => signOutAction().then(clearAuthStateAndRedirect),
+      action: () => signOutAction()
+        .then(clearAuthStateAndRedirectIfNecessary)
+        .then(() => setIsOpen?.(false)),
     });
   } else {
     adminSection.items.push({
diff --git a/src/state/AppState.ts b/src/state/AppState.ts
index 0ce7039e..590a6ebc 100644
--- a/src/state/AppState.ts
+++ b/src/state/AppState.ts
@@ -39,7 +39,7 @@ export type AppStateContextType = {
   setUserEmail?: Dispatch<SetStateAction<string | undefined>>
   isUserSignedIn?: boolean
   isUserSignedInEager?: boolean
-  clearAuthStateAndRedirect?: () => void
+  clearAuthStateAndRedirectIfNecessary?: () => void
   // ADMIN
   isCheckingAuth?: boolean
   adminUpdateTimes?: Date[]
diff --git a/src/state/AppStateProvider.tsx b/src/state/AppStateProvider.tsx
index 60fca69e..7a18fd76 100644
--- a/src/state/AppStateProvider.tsx
+++ b/src/state/AppStateProvider.tsx
@@ -21,7 +21,7 @@ import {
   hasAuthEmailCookie,
 } from '@/auth/client';
 import { useRouter, usePathname } from 'next/navigation';
-import { isPathAdmin, PATH_SIGN_IN } from '@/app/paths';
+import { isPathAdmin, PATH_ROOT } from '@/app/paths';
 import { INITIAL_UPLOAD_STATE, UploadState } from '@/admin/upload';
 import { RecipeProps } from '@/recipe';
 import { getCountsForCategoriesCachedAction } from '@/category/actions';
@@ -105,6 +105,8 @@ export default function AppStateProvider({
     setIsUserSignedInEager(hasAuthEmailCookie());
     if (!authError) {
       setUserEmail(auth?.user?.email ?? undefined);
+    } else {
+      setIsUserSignedInEager(false);
     }
   }, [auth, authError]);
   const isUserSignedIn = Boolean(userEmail);
@@ -133,11 +135,11 @@ export default function AppStateProvider({
     setAdminUpdateTimes(updates => [...updates, new Date()])
   , []);
 
-  const clearAuthStateAndRedirect = useCallback(() => {
+  const clearAuthStateAndRedirectIfNecessary = useCallback(() => {
     setUserEmail(undefined);
     setIsUserSignedInEager(false);
     clearAuthEmailCookie();
-    if (isPathAdmin(pathname)) { router.push(PATH_SIGN_IN); }
+    if (isPathAdmin(pathname)) { router.push(PATH_ROOT); }
   }, [router, pathname]);
 
   // Returns false when upload is cancelled
@@ -187,7 +189,7 @@ export default function AppStateProvider({
         setUserEmail,
         isUserSignedIn,
         isUserSignedInEager,
-        clearAuthStateAndRedirect,
+        clearAuthStateAndRedirectIfNecessary,
         // ADMIN
         adminUpdateTimes,
         registerAdminUpdate,