feat(auth): update authentication flow to redirect to Day view

- Refactored authentication handling to redirect users to the Day view instead of the Login page upon sign-out and when encountering authentication errors.
- Removed references to the Login route in various components and tests, streamlining the onboarding and authentication process.
- Updated tests to reflect changes in the authentication flow, ensuring accurate behavior when users are not authenticated.
- Enhanced the AuthPrompt component to initiate Google login directly, improving user experience during sign-in.

Author: tyler-dane

packages/web/src/common/apis/compass.api.test.ts

@@ -6,7 +6,6 @@ import type {
 } from "axios";
 import { signOut } from "supertokens-web-js/recipe/session";
 import { Status } from "@core/errors/status.codes";
-import { AUTH_FAILURE_REASONS } from "@web/common/constants/auth.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { CompassApi } from "./compass.api";
 
@@ -72,20 +71,18 @@ describe("CompassApi interceptor auth handling", () => {
     CompassApi.defaults.adapter = originalAdapter;
   });
 
-  it("signs out and redirects to login with GAUTH reason when Google token is invalid", async () => {
+  it("signs out and redirects to day when Google token is invalid", async () => {
     await triggerErrorResponse(Status.NOT_FOUND);
 
     expect(window.alert).toHaveBeenCalledWith(
       "Login required, cuz security 😇",
     );
     expect(signOut).toHaveBeenCalledTimes(1);
-    expect(assignMock).toHaveBeenCalledWith(
-      `${ROOT_ROUTES.LOGIN}?reason=${AUTH_FAILURE_REASONS.GAUTH_SESSION_EXPIRED}`,
-    );
+    expect(assignMock).toHaveBeenCalledWith(ROOT_ROUTES.DAY);
   });
 
-  it("does not redirect if user is already on the login route", async () => {
-    setLocationPath(ROOT_ROUTES.LOGIN);
+  it("does not redirect if user is already on the day route", async () => {
+    setLocationPath(ROOT_ROUTES.DAY);
 
     await triggerErrorResponse(Status.NOT_FOUND);
 

packages/web/src/common/apis/compass.api.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosError } from "axios";
 import { Status } from "@core/errors/status.codes";
 import { session } from "@web/common/classes/Session";
-import { AUTH_FAILURE_REASONS } from "@web/common/constants/auth.constants";
 import { ENV_WEB } from "@web/common/constants/env.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 
@@ -21,18 +20,10 @@ const _signOut = async (status: SignoutStatus) => {
 
   await session.signOut();
 
-  if (window.location.pathname === ROOT_ROUTES.LOGIN) {
+  if (window.location.pathname.startsWith(ROOT_ROUTES.DAY)) {
     return;
   }
-
-  const searchParams = new URLSearchParams({
-    reason:
-      status === Status.NOT_FOUND || status === Status.GONE
-        ? AUTH_FAILURE_REASONS.GAUTH_SESSION_EXPIRED
-        : AUTH_FAILURE_REASONS.USER_SESSION_EXPIRED,
-  });
-
-  window.location.assign(`${ROOT_ROUTES.LOGIN}?${searchParams.toString()}`);
+  window.location.assign(ROOT_ROUTES.DAY);
 };
 
 CompassApi.interceptors.response.use(

packages/web/src/common/constants/routes.ts

@@ -1,6 +1,5 @@
 export const ROOT_ROUTES = {
   API: "/api",
-  LOGIN: "/login",
   LOGOUT: "/logout",
   ONBOARDING: "/onboarding",
   ROOT: "/",

packages/web/src/routers/index.tsx

@@ -8,7 +8,6 @@ import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
 import {
   loadDayData,
   loadLoggedInData,
-  loadLoginData,
   loadSpecificDayData,
 } from "@web/routers/loaders";
 
@@ -83,16 +82,6 @@ export const router = createBrowserRouter(
           Component: module.default || module.OnboardingFlow,
         })),
     },
-    {
-      path: ROOT_ROUTES.LOGIN,
-      loader: loadLoginData,
-      lazy: async () =>
-        import(
-          /* webpackChunkName: "onboarding" */ "@web/views/Onboarding/OnboardingFlow"
-        ).then((module) => ({
-          Component: module.default || module.OnboardingFlow,
-        })),
-    },
     {
       path: "*",
       lazy: async () =>

packages/web/src/routers/loaders.ts

@@ -1,7 +1,6 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
 import { zYearMonthDayString } from "@core/types/type.utils";
 import dayjs, { Dayjs } from "@core/util/date/dayjs";
-import { AUTH_FAILURE_REASONS } from "@web/common/constants/auth.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { getOnboardingProgress } from "@web/views/Onboarding/utils/onboarding.storage.util";
 
@@ -33,53 +32,28 @@ export function loadOnboardingData() {
 export async function loadLogoutData() {
   const { authenticated } = await loadAuthenticated();
 
-  if (!authenticated) return redirect(ROOT_ROUTES.LOGIN);
+  if (!authenticated) return redirect(ROOT_ROUTES.DAY);
 
   return { authenticated };
 }
 
-export async function loadLoginData() {
-  const { authenticated } = await loadAuthenticated();
-  const { skipOnboarding } = loadOnboardingData();
-  const { hasCompletedSignup } = loadHasCompletedSignup();
-
-  if (authenticated) {
-    return redirect(skipOnboarding ? ROOT_ROUTES.ROOT : ROOT_ROUTES.ONBOARDING);
-  }
-
-  // For new users (no signup completed), redirect to day view immediately
-  if (!hasCompletedSignup) {
-    const { dateString } = loadTodayData();
-    return redirect(`${ROOT_ROUTES.DAY}/${dateString}`);
-  }
-
-  return { authenticated, skipOnboarding };
-}
-
 export async function loadLoggedInData(args?: LoaderFunctionArgs) {
   const request = args?.request ?? new Request(window.location.href);
   const { authenticated } = await loadAuthenticated();
   const { skipOnboarding } = loadOnboardingData();
   const { hasCompletedSignup } = loadHasCompletedSignup();
 
-  const { USER_SESSION_EXPIRED } = AUTH_FAILURE_REASONS;
-  const loginRoute = `${ROOT_ROUTES.LOGIN}?reason=${USER_SESSION_EXPIRED}`;
-
   // Check if we're accessing the day route
   const url = new URL(request.url);
   const pathname = url.pathname;
   const isDayRoute = pathname.startsWith(ROOT_ROUTES.DAY);
 
   if (!authenticated) {
-    if (isDayRoute && !hasCompletedSignup) {
+    if (isDayRoute) {
       return { authenticated: false, skipOnboarding, hasCompletedSignup };
     }
 
-    return redirect(
-      skipOnboarding || hasCompletedSignup
-        ? loginRoute
-        : ROOT_ROUTES.ONBOARDING,
-    );
+    return redirect(ROOT_ROUTES.DAY);
   }
 
   return { authenticated, skipOnboarding, hasCompletedSignup };

packages/web/src/views/Day/components/AuthPrompt/AuthPrompt.test.tsx

@@ -3,8 +3,13 @@ import { BrowserRouter } from "react-router-dom";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { STORAGE_KEYS } from "@web/common/constants/storage.constants";
+import { useGoogleAuth } from "@web/common/hooks/useGoogleAuth";
 import { AuthPrompt } from "./AuthPrompt";
 
+jest.mock("@web/common/hooks/useGoogleAuth", () => ({
+  useGoogleAuth: jest.fn(),
+}));
+
 const renderWithRouter = (component: React.ReactElement) => {
   return render(
     <BrowserRouter
@@ -19,6 +24,19 @@ const renderWithRouter = (component: React.ReactElement) => {
 };
 
 describe("AuthPrompt", () => {
+  const loginMock = jest.fn();
+  const mockUseGoogleAuth = useGoogleAuth as jest.MockedFunction<
+    typeof useGoogleAuth
+  >;
+
+  beforeEach(() => {
+    mockUseGoogleAuth.mockReturnValue({
+      login: loginMock,
+      loading: false,
+    });
+    loginMock.mockReset();
+  });
+
   beforeEach(() => {
     localStorage.clear();
   });
@@ -51,7 +69,7 @@ describe("AuthPrompt", () => {
     expect(stored.isAuthPromptDismissed).toBe(true);
   });
 
-  it("should navigate to login when 'Sign in' button is clicked", async () => {
+  it("should start Google login when 'Sign in' button is clicked", async () => {
     const onDismiss = jest.fn();
 
     renderWithRouter(<AuthPrompt onDismiss={onDismiss} />);
@@ -61,8 +79,6 @@ describe("AuthPrompt", () => {
       await userEvent.click(signInButton);
     });
 
-    // Check that navigation occurred (window.location would change in real app)
-    // In test environment, we just verify the button click works
-    expect(signInButton).toBeInTheDocument();
+    expect(loginMock).toHaveBeenCalledTimes(1);
   });
 });

packages/web/src/views/Day/components/AuthPrompt/AuthPrompt.tsx

@@ -1,22 +1,22 @@
 import React from "react";
-import { useNavigate } from "react-router-dom";
-import { ROOT_ROUTES } from "@web/common/constants/routes";
+import { useGoogleAuth } from "@web/common/hooks/useGoogleAuth";
 import { updateOnboardingProgress } from "@web/views/Onboarding/utils/onboarding.storage.util";
 
 interface AuthPromptProps {
   onDismiss: () => void;
 }
 
 export const AuthPrompt: React.FC<AuthPromptProps> = ({ onDismiss }) => {
-  const navigate = useNavigate();
+  const googleAuth = useGoogleAuth();
+  const isLoading = googleAuth?.loading ?? false;
 
   const handleDismiss = () => {
     updateOnboardingProgress({ isAuthPromptDismissed: true });
     onDismiss();
   };
 
   const handleSignIn = () => {
-    navigate(ROOT_ROUTES.LOGIN);
+    void googleAuth?.login?.();
   };
 
   return (
@@ -34,7 +34,9 @@ export const AuthPrompt: React.FC<AuthPromptProps> = ({ onDismiss }) => {
         <div className="flex gap-2">
           <button
             onClick={handleSignIn}
-            className="bg-accent-primary hover:bg-accent-primary/90 flex-1 rounded px-4 py-2 text-sm font-medium text-white transition-colors"
+            aria-busy={isLoading}
+            disabled={isLoading}
+            className="bg-accent-primary hover:bg-accent-primary/90 flex-1 rounded px-4 py-2 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-70"
           >
             Sign in
           </button>

packages/web/src/views/Logout/Logout.tsx

@@ -20,7 +20,7 @@ export const LogoutView = () => {
     setIsLoggingOut(false);
 
     alert("You logged out - see ya! ✌");
-    navigate(ROOT_ROUTES.LOGIN);
+    navigate(ROOT_ROUTES.DAY);
   };
 
   return (

packages/web/src/views/Onboarding/hooks/useOnboardingNotices.test.tsx

@@ -1,13 +1,13 @@
 import { renderHook } from "@testing-library/react";
+import { useGoogleAuth } from "@web/common/hooks/useGoogleAuth";
 import { useAuthPrompt } from "@web/views/Onboarding/hooks/useAuthPrompt";
 import { useOnboardingNotices } from "@web/views/Onboarding/hooks/useOnboardingNotices";
 import { useOnboardingOverlay } from "@web/views/Onboarding/hooks/useOnboardingOverlay";
 import { useOnboardingProgress } from "@web/views/Onboarding/hooks/useOnboardingProgress";
 import { useStoredTasks } from "@web/views/Onboarding/hooks/useStoredTasks";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useNavigate: () => jest.fn(),
+jest.mock("@web/common/hooks/useGoogleAuth", () => ({
+  useGoogleAuth: jest.fn(),
 }));
 
 jest.mock("@web/views/Onboarding/hooks/useOnboardingOverlay");
@@ -27,6 +27,9 @@ const mockUseAuthPrompt = useAuthPrompt as jest.MockedFunction<
 const mockUseStoredTasks = useStoredTasks as jest.MockedFunction<
   typeof useStoredTasks
 >;
+const mockUseGoogleAuth = useGoogleAuth as jest.MockedFunction<
+  typeof useGoogleAuth
+>;
 
 describe("useOnboardingNotices", () => {
   beforeEach(() => {
@@ -35,6 +38,7 @@ describe("useOnboardingNotices", () => {
       currentStep: null,
       dismissOnboardingOverlay: jest.fn(),
     });
+    mockUseGoogleAuth.mockReturnValue({ login: jest.fn(), loading: false });
     mockUseOnboardingProgress.mockReturnValue({ hasNavigatedDates: false });
     mockUseStoredTasks.mockReturnValue([]);
   });

packages/web/src/views/Onboarding/hooks/useOnboardingNotices.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
-import { useNavigate } from "react-router-dom";
-import { ROOT_ROUTES } from "@web/common/constants/routes";
+import { useGoogleAuth } from "@web/common/hooks/useGoogleAuth";
 import { useAuthPrompt } from "@web/views/Onboarding/hooks/useAuthPrompt";
 import { useOnboardingOverlay } from "@web/views/Onboarding/hooks/useOnboardingOverlay";
 import { useOnboardingProgress } from "@web/views/Onboarding/hooks/useOnboardingProgress";
@@ -12,7 +11,7 @@ interface UseOnboardingNoticesReturn {
 }
 
 export function useOnboardingNotices(): UseOnboardingNoticesReturn {
-  const navigate = useNavigate();
+  const googleAuth = useGoogleAuth();
   const tasks = useStoredTasks();
   const { hasNavigatedDates } = useOnboardingProgress();
   const { showOnboardingOverlay } = useOnboardingOverlay();
@@ -34,15 +33,17 @@ export function useOnboardingNotices(): UseOnboardingNoticesReturn {
         body: "Your tasks are saved locally. Sign in to sync with Google Calendar and access your data from any device.",
         primaryAction: {
           label: "Sign in",
-          onClick: () => navigate(ROOT_ROUTES.LOGIN),
+          onClick: () => {
+            void googleAuth?.login?.();
+          },
         },
         secondaryAction: {
           label: "Later",
           onClick: dismissAuthPrompt,
         },
       },
     ];
-  }, [dismissAuthPrompt, navigate, showAuthPrompt]);
+  }, [dismissAuthPrompt, googleAuth, showAuthPrompt]);
 
   return { notices };
 }