Fix Back button on SignIn page & Add Cancel button (#6415)

* Back button on SignIn page leads to Home page
Fixes #6413

* Add regression test for the bug, and for new cancel button

* Full sign in e2e test

* Good bot

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

---------

Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>

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"
@@ -128,7 +133,10 @@ const SignIn = () => {
                     <p className="text-xs">
                       You should see the following code in your browser
                     </p>
-                    <p className="text-lg font-bold inline-flex gap-1">
+                    <p
+                      className="text-lg font-bold inline-flex gap-1"
+                      data-testid="sign-in-user-code"
+                    >
                       {userCode.split('').map((char, i) => (
                         <span
                           key={i}
@@ -141,6 +149,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>
@@ -187,7 +206,7 @@ const SignIn = () => {
                 'm-0 mt-8 flex gap-4 items-center px-3 py-1 ' +
                 '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
               }
-              data-testid="sign-in-button"
+              data-testid="view-sample-button"
             >
               View this sample
               <CustomIcon name="arrowRight" className="w-6 h-6" />