From 2a07f5addc7f8a9ed48cfbd0b8365e1a4cef43f4 Mon Sep 17 00:00:00 2001
From: Pierre Jacquier <pierre@zoo.dev>
Date: Mon, 21 Apr 2025 10:05:13 -0400
Subject: [PATCH] Back button on SignIn page leads to Home page Fixes #6413

---
 src/hooks/useAuthNavigation.tsx |  3 ++-
 src/routes/SignIn.tsx           | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useAuthNavigation.tsx b/src/hooks/useAuthNavigation.tsx
index 116f8e1d8..86414a2f3 100644
--- a/src/hooks/useAuthNavigation.tsx
+++ b/src/hooks/useAuthNavigation.tsx
@@ -15,6 +15,7 @@ export function useAuthNavigation() {
 
   // Subscribe to the auth state of the app and navigate accordingly.
   useEffect(() => {
+    console.log('authState', authState.value)
     if (
       authState.matches('loggedIn') &&
       location.pathname.includes(PATHS.SIGN_IN)
@@ -26,5 +27,5 @@ export function useAuthNavigation() {
     ) {
       navigate(PATHS.SIGN_IN)
     }
-  }, [authState])
+  }, [authState, location.pathname])
 }
diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx
index 40b98102b..8685e289a 100644
--- a/src/routes/SignIn.tsx
+++ b/src/routes/SignIn.tsx
@@ -76,6 +76,11 @@ const SignIn = () => {
     authActor.send({ type: 'Log in', token })
   }
 
+  const cancelSignIn = async () => {
+    authActor.send({ type: 'Log out' })
+    setUserCode('')
+  }
+
   return (
     <main
       className="bg-primary h-screen grid place-items-stretch m-0 p-2"
@@ -141,6 +146,17 @@ const SignIn = () => {
                         </span>
                       ))}
                     </p>
+                    <button
+                      onClick={toSync(cancelSignIn, reportRejection)}
+                      className={
+                        'm-0 mt-8 w-fit flex gap-4 items-center px-3 py-1 ' +
+                        '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
+                      }
+                      data-testid="cancel-sign-in-button"
+                    >
+                      <CustomIcon name="arrowLeft" className="w-6 h-6" />
+                      Cancel
+                    </button>
                   </>
                 )}
               </div>