✨ Feat: Preemptively trigger login after google token expired (#212)

* ✨ Feat(Backend): `/api/auth/session/gauth/verify` route

Implement a new api route to validate a user's google oauth session

* 🐛 Fix(Web): Handle google oauth session validation

* refactor(backend,web): make uri to /auth/google

also renames controller method from verifyGAuthSession to verifyGToken to more accurately represent what's happening. Compass doesn't maintain a persistent session with Google like it does with it's user's session (via Supertokens). Instead, it just passes the access token in requests

* refactor(web): convert GoogleOAuthSession to a function

making it a class doesn't add much value, as we're not taking advantage of any class benefits (inheritance, class methods, encapsulation)

* chore(web): Rename `valid`, always set value to boolean
- Rename `valid` to `isValid` to make it more consistent with codebase
- Always set value to either `true` or `false` for consistency

* chore(web): Add return type to `getGAuthClientForUser`

* chore(backend): Handle potential google API errors

* chore(web): change `valid` to `isValid`

Followup to 86beb9f

* chore: remove unnecessary typing in google.auth.service

This same type is returned as part of type inference. Explicitly setting the function return type is acceptable is it is somehow different than the inferred type. In this case, the extra code doesn't provide any value and just requires more maintenance.

* chore: remove unnecessary google error handling

* chore(web): create a constant for gauth session failure reason

This'll make it easier to test, access across other files, and rename it when things change

* chore(web): extract response into dedicated type for reusability

keeping it inside `gauth.util.ts` until I figure out where to put it

* chore(web): Use dedicated constant instead of magic string

* chore(web): refactor session effect to async await

purpose of using await statements is to avoid creating traps for future devs when working on this part of the code.

* chore(backend): Implement dedicated error object for google auth session handling

* enhancment(web): rewrite google session expired message

Users don't care what a session is or that it's the Google connection that's requiring us to make them reauthenticate

* chore: convert error toast warning

* chore(backend): remove unused accessToken variable

* chore: update result arg in NoGAuthAccessToken error

This makes it more clear what happened as a result of the error

* refactor: use AuthApi (axios) and use response type for google access token endpoint

* feat(web): extract auth checking from ProtectedRoute into separate hook and

* chore(web): simplify error log in UserContext

* refactor(web): remove auth checking from Login

* chore(web): remove search param logic from Login

* fix(web): don't blindly trigger signout after 401 response

401 is now a valid response to the /api/auth/google endpoint, which is used to validate a google token

* fix(web): explicitly check for false in useAuthCheck

this is needed to distinguish between boolean values (when we know something happened) and the default value of null (when nothing happened). Without this, an infinite loop of routing and auth checks resulted

* fix(web): redirect after clicking login button (no auth) if user already authenticated

This is a compromise between UX and functionality that lets us provide smooth routing while also ensuring that the user doesn't re-authenticated unnecessarily. It does so by checking if the user is already authenticated as a side effect during the Login page load. If so, when the user clicks the Login button they will be redirected. If not, the user will go through the regular login flow and be redirected afterwards

* chore(web): remove console.log in auth.api

---------

Co-authored-by: Tyler Dane <tyler@switchback.tech>

Author: that-one-arab

packages/backend/src/auth/auth.routes.config.ts

@@ -5,26 +5,35 @@ import { CommonRoutesConfig } from "@backend/common/common.routes.config";
 import authController from "./controllers/auth.controller";
 import authMiddleware from "./middleware/auth.middleware";
 
+/**
+ * Routes with the verifyIsDev middleware are
+ * only available when running the app in dev,
+ * as they are not called by production code.
+ */
 export class AuthRoutes extends CommonRoutesConfig {
   constructor(app: express.Application) {
     super(app, "AuthRoutes");
   }
 
   configureRoutes(): express.Application {
     /**
-     * Convenience routes for debugging (eg via Postman)
-     *
-     * Production code shouldn't call these
-     * directly, which is why they're limited to devs only
+     * Checks whether user's google access token is still valid
      */
+    this.app.route(`/api/auth/google`).get([
+      verifySession(),
+      //@ts-expect-error res.promise is not returning response types correctly
+      authController.verifyGToken,
+    ]);
+
     this.app
       .route(`/api/auth/session`)
       .all(authMiddleware.verifyIsDev)
-      //@ts-ignore
+      //@ts-expect-error res.promise is not returning response types correctly
+      // eslint-disable-next-line @typescript-eslint/no-misused-promises
       .post(authController.createSession)
       .get([
         verifySession(),
-        //@ts-ignore
+        //@ts-expect-error res.promise is not returning response types correctly
         authController.getUserIdFromSession,
       ]);
 
@@ -38,7 +47,7 @@ export class AuthRoutes extends CommonRoutesConfig {
      */
     this.app.route(`/api/oauth/google`).post([
       authMiddleware.verifyGoogleOauthCode,
-      //@ts-ignore
+      //@ts-expect-error res.promise is not returning response types correctly
       authController.loginOrSignup,
     ]);
 

packages/backend/src/auth/controllers/auth.controller.ts

@@ -8,7 +8,11 @@ import Session from "supertokens-node/recipe/session";
 import { Logger } from "@core/logger/winston.logger";
 import { gCalendar } from "@core/types/gcal";
 import { Schema_User } from "@core/types/user.types";
-import { Result_Auth_Compass, UserInfo_Compass } from "@core/types/auth.types";
+import {
+  Result_Auth_Compass,
+  Result_VerifyGToken,
+  UserInfo_Compass,
+} from "@core/types/auth.types";
 import {
   ReqBody,
   Res_Promise,
@@ -20,11 +24,14 @@ import {
   findCompassUserBy,
   updateGoogleRefreshToken,
 } from "@backend/user/queries/user.queries";
-import GoogleAuthService from "@backend/auth/services/google.auth.service";
+import GoogleAuthService, {
+  getGAuthClientForUser,
+} from "@backend/auth/services/google.auth.service";
 import userService from "@backend/user/services/user.service";
 import compassAuthService from "@backend/auth/services/compass.auth.service";
 import syncService from "@backend/sync/services/sync.service";
 import { isInvalidGoogleToken } from "@backend/common/services/gcal/gcal.utils";
+import { BaseError } from "@core/errors/errors.base";
 
 import { initGoogleClient } from "../services/auth.utils";
 
@@ -63,6 +70,31 @@ class AuthController {
     res.promise({ userId });
   };
 
+  verifyGToken = async (req: SessionRequest, res: Res_Promise) => {
+    try {
+      const userId = req.session?.getUserId();
+
+      if (!userId) {
+        res.promise({ isValid: false, error: "No session found" });
+        return;
+      }
+
+      const gAuthClient = await getGAuthClientForUser({ _id: userId });
+
+      // Upon receiving an access token, we know the session is valid
+      await gAuthClient.getAccessToken();
+
+      const result: Result_VerifyGToken = { isValid: true };
+      res.promise(result);
+    } catch (error) {
+      const result: Result_VerifyGToken = {
+        isValid: false,
+        error: error as Error | BaseError,
+      };
+      res.promise(result);
+    }
+  };
+
   loginOrSignup = async (req: SReqBody<{ code: string }>, res: Res_Promise) => {
     try {
       const { code } = req.body;

packages/backend/src/auth/services/google.auth.service.ts

@@ -3,17 +3,59 @@ import { OAuth2Client, TokenPayload } from "google-auth-library";
 import { Logger } from "@core/logger/winston.logger";
 import { Status } from "@core/errors/status.codes";
 import { BaseError } from "@core/errors/errors.base";
+import { gCalendar } from "@core/types/gcal";
 import { UserInfo_Google } from "@core/types/auth.types";
 import { ENV } from "@backend/common/constants/env.constants";
 import { findCompassUserBy } from "@backend/user/queries/user.queries";
-import { UserError } from "@backend/common/constants/error.constants";
+import {
+  AuthError,
+  UserError,
+} from "@backend/common/constants/error.constants";
 import { error } from "@backend/common/errors/handlers/error.handler";
+import { Schema_User } from "@core/types/user.types";
+import { WithId } from "mongodb";
 
 import compassAuthService from "./compass.auth.service";
 
 const logger = Logger("app:google.auth.service");
 
-export const getGcalClient = async (userId: string) => {
+export const getGAuthClientForUser = async (
+  user: WithId<Schema_User> | { _id: string }
+) => {
+  const gAuthClient = new GoogleAuthService();
+
+  let gRefreshToken: string | undefined;
+
+  if ("google" in user && user.google) {
+    gRefreshToken = user.google.gRefreshToken;
+  }
+
+  if (!gRefreshToken) {
+    const userId = "_id" in user ? (user._id as string) : undefined;
+
+    if (!userId) {
+      logger.error(`Expected to either get a user or a userId.`);
+      throw error(UserError.InvalidValue, "User not found");
+    }
+
+    const _user = await findCompassUserBy("_id", userId);
+
+    if (!_user) {
+      logger.error(`Couldn't find user with this id: ${userId}`);
+      throw error(UserError.UserNotFound, "User not found");
+    }
+
+    gRefreshToken = _user.google.gRefreshToken;
+  }
+
+  gAuthClient.oauthClient.setCredentials({
+    refresh_token: gRefreshToken,
+  });
+
+  return gAuthClient;
+};
+
+export const getGcalClient = async (userId: string): Promise<gCalendar> => {
   const user = await findCompassUserBy("_id", userId);
   if (!user) {
     logger.error(`Couldn't find user with this id: ${userId}`);
@@ -24,11 +66,7 @@ export const getGcalClient = async (userId: string) => {
     );
   }
 
-  const gAuthClient = new GoogleAuthService();
-
-  gAuthClient.oauthClient.setCredentials({
-    refresh_token: user.google.gRefreshToken,
-  });
+  const gAuthClient = await getGAuthClientForUser(user);
 
   const calendar = google.calendar({
     version: "v3",
@@ -49,7 +87,7 @@ class GoogleAuthService {
     );
   }
 
-  getGcalClient() {
+  getGcalClient(): gCalendar {
     const gcal = google.calendar({
       version: "v3",
       auth: this.oauthClient,
@@ -82,6 +120,19 @@ class GoogleAuthService {
     const payload = ticket.getPayload() as TokenPayload;
     return payload;
   }
+
+  async getAccessToken() {
+    const { token } = await this.oauthClient.getAccessToken();
+
+    if (!token) {
+      throw error(
+        AuthError.NoGAuthAccessToken,
+        "Google auth access token not returned"
+      );
+    }
+
+    return token;
+  }
 }
 
 export default GoogleAuthService;

packages/backend/src/common/constants/error.constants.ts

@@ -21,6 +21,11 @@ export const AuthError = {
     status: Status.INTERNAL_SERVER,
     isOperational: false,
   },
+  NoGAuthAccessToken: {
+    description: "No gauth access token",
+    status: Status.BAD_REQUEST,
+    isOperational: true,
+  },
 };
 
 export const DbError = {

packages/core/src/types/auth.types.ts

@@ -6,6 +6,11 @@ export interface Result_Auth_Compass {
   error?: BaseError;
 }
 
+export interface Result_VerifyGToken {
+  isValid: boolean;
+  error?: BaseError | Error;
+}
+
 export interface User_Google {
   id: string;
   email: string;

packages/web/src/auth/ProtectedRoute.tsx

@@ -1,28 +1,39 @@
-import React, { ReactNode, useLayoutEffect, useState } from "react";
-import Session from "supertokens-auth-react/recipe/session";
+import React, { ReactNode, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
+import { AUTH_FAILURE_REASONS } from "@web/common/constants/auth.constants";
+
+import { useAuthCheck } from "./useAuthCheck";
 
 export const ProtectedRoute = ({ children }: { children: ReactNode }) => {
   const navigate = useNavigate();
-  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
 
-  useLayoutEffect(() => {
-    async function fetchSession() {
-      const isAuthenticated = await Session.doesSessionExist();
-      setIsAuthenticated(isAuthenticated);
-      if (!isAuthenticated) {
-        navigate(ROOT_ROUTES.LOGIN);
+  const { isAuthenticated, isCheckingAuth, isGoogleTokenActive } =
+    useAuthCheck();
+
+  useEffect(() => {
+    const handleAuthCheck = () => {
+      if (isAuthenticated === false) {
+        if (isGoogleTokenActive === false) {
+          navigate(
+            `${ROOT_ROUTES.LOGIN}?reason=${AUTH_FAILURE_REASONS.GAUTH_SESSION_EXPIRED}`
+          );
+        } else {
+          navigate(
+            `${ROOT_ROUTES.LOGIN}?reason=${AUTH_FAILURE_REASONS.USER_SESSION_EXPIRED}`
+          );
+        }
       }
-    }
+    };
 
-    void fetchSession();
-  }, [navigate]);
+    void handleAuthCheck();
+  }, [isAuthenticated, isGoogleTokenActive, navigate]);
 
-  if (isAuthenticated === null) {
-    return <AbsoluteOverflowLoader />;
-  } else {
-    return <>{children}</>;
-  }
+  return (
+    <>
+      {isCheckingAuth && <AbsoluteOverflowLoader />}
+      {children}
+    </>
+  );
 };

packages/web/src/auth/UserContext.tsx

@@ -23,8 +23,7 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
         const uid = await getUserId();
         setUserId(uid);
       } catch (e) {
-        console.log("Failed to get user because:");
-        console.log(e);
+        console.log("Failed to get user because:", e);
       } finally {
         setIsLoadingUser(false);
       }

packages/web/src/auth/useAuthCheck.ts

@@ -0,0 +1,40 @@
+import { useState, useLayoutEffect } from "react";
+import Session from "supertokens-auth-react/recipe/session";
+import { AuthApi } from "@web/common/apis/auth.api";
+
+export const useAuthCheck = () => {
+  const [isCheckingAuth, setIsCheckingAuth] = useState(false);
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [isSessionActive, setIsSessionActive] = useState<boolean | null>(null);
+  const [isGoogleTokenActive, setIsGoogleTokenActive] = useState<
+    boolean | null
+  >(null);
+
+  useLayoutEffect(() => {
+    const checkAuth = async () => {
+      try {
+        setIsCheckingAuth(true);
+        const _isSessionActive = await Session.doesSessionExist();
+        setIsSessionActive(_isSessionActive);
+
+        const _isGoogleTokenActive = await AuthApi.validateGoogleAccessToken();
+        setIsGoogleTokenActive(_isGoogleTokenActive);
+
+        setIsAuthenticated(isSessionActive && isGoogleTokenActive);
+      } catch (error) {
+        console.error("Error checking authentication:", error);
+      } finally {
+        setIsCheckingAuth(false);
+      }
+    };
+
+    void checkAuth();
+  }, [isGoogleTokenActive, isSessionActive]);
+
+  return {
+    isAuthenticated,
+    isCheckingAuth,
+    isGoogleTokenActive,
+    isSessionActive,
+  };
+};

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

@@ -1,4 +1,7 @@
-import { Result_Auth_Compass } from "@core/types/auth.types";
+import {
+  Result_Auth_Compass,
+  Result_VerifyGToken,
+} from "@core/types/auth.types";
 
 import { CompassApi } from "./compass.api";
 
@@ -7,6 +10,19 @@ const AuthApi = {
     const response = await CompassApi.post(`/oauth/google`, { code });
     return response.data as Result_Auth_Compass;
   },
+  async validateGoogleAccessToken() {
+    try {
+      const res = await CompassApi.get(`/auth/google`);
+
+      if (res.status !== 200) return false;
+
+      const body = res.data as Result_VerifyGToken;
+      return !!body.isValid;
+    } catch (error) {
+      console.error(error);
+      return false;
+    }
+  },
 };
 
 export { AuthApi };

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

@@ -37,11 +37,7 @@ CompassApi.interceptors.response.use(
       return Promise.resolve();
     }
 
-    if (
-      status === Status.GONE ||
-      status === Status.NOT_FOUND ||
-      status === Status.UNAUTHORIZED
-    ) {
+    if (status === Status.GONE || status === Status.NOT_FOUND) {
       await _signOut(status);
     } else {
       console.log(error);