Back button on SignIn page leads to Home page

Fixes #6413

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])
 }

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>