fix: catch invalid user response crash (chaynHQ#1008)

Author: annarhughes

components/head/OpenGraphMetadata.tsx

@@ -15,11 +15,7 @@ const OpenGraphMetadata = () => {
       <meta property="og:image" content="/preview.png" key="og-image" />
       <meta property="og:image:alt" content={imageAltContent} key="og-image-alt" />
       <meta name="twitter:card" content="summary_large_image" key="twitter-card" />
-      <meta
-        name="twitter:description"
-        content={twitterDescriptionContent}
-        key="twitter-desc"
-      />
+      <meta name="twitter:description" content={twitterDescriptionContent} key="twitter-desc" />
       {/** PWA specific tags **/}
       <link rel="manifest" href="/manifest.json" />
       <link rel="apple-touch-icon" href="/icons/apple/icon-120x120.png"></link>

guards/AuthGuard.tsx

@@ -42,7 +42,7 @@ export function AuthGuard({ children }: { children: JSX.Element }) {
   const userAuthLoading = useTypedSelector((state) => state.user.authStateLoading);
 
   const { userResourceError } = useLoadUser();
-  const unauthenticated = userResourceError || (!userAuthLoading && !userLoading && !userId);
+  const authenticated = !userResourceError && userId && !userAuthLoading && !userLoading;
 
   // Get top level directory of path e.g pathname /courses/course_name has pathHead courses
   const pathHead = router.pathname.split('/')[1]; // E.g. courses | therapy | partner-admin
@@ -53,7 +53,7 @@ export function AuthGuard({ children }: { children: JSX.Element }) {
   }
 
   // Page requires authenticated user
-  if (unauthenticated) {
+  if (!authenticated) {
     if (typeof window !== 'undefined') {
       router.push(`/auth/login${generateReturnUrlQuery(router.asPath)}`);
     }

hooks/useLoadUser.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { getAuth, onIdTokenChanged, signOut } from 'firebase/auth';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useCreateEventLogMutation, useGetUserQuery } from '../app/api';
 import { setAuthStateLoading, setLoadError, setUserLoading, setUserToken } from '../app/userSlice';
 import { EVENT_LOG_NAME } from '../constants/enums';
@@ -25,7 +25,10 @@ export default function useLoadUser() {
   const userAuthLoading = useTypedSelector((state) => state.user.authStateLoading);
   const { clearState } = useStateUtils();
   const [createEventLog] = useCreateEventLogMutation();
+  const [isInvalidUserResourceResponse, setIsInvalidUserResourceResponse] =
+    useState<boolean>(false);
 
+  const invalidUserResourceError = 'Invalid user resource success response';
   // 1. Listen for firebase auth state or auth token updated, triggered by firebase auth loaded
   // When a user token is available, set the token in state to be used in request headers
   useEffect(() => {
@@ -60,7 +63,11 @@ export default function useLoadUser() {
 
   // 3a. Handle get user success
   useEffect(() => {
-    if (userResourceIsSuccess && userResource.user.id) {
+    if (userResourceIsSuccess) {
+      if (!userResource.user?.id) {
+        setIsInvalidUserResourceResponse(true);
+        return;
+      }
       dispatch(setUserLoading(false));
 
       const eventUserData = getEventUserResponseData(userResource);
@@ -71,8 +78,10 @@ export default function useLoadUser() {
 
   // 3b. Handle get user error
   useEffect(() => {
-    if (userResourceError) {
-      const errorMessage = getErrorMessage(userResourceError) || 'error';
+    if (userResourceError || isInvalidUserResourceResponse) {
+      const errorMessage = userResourceError
+        ? getErrorMessage(userResourceError) || 'error'
+        : invalidUserResourceError;
       signOut(auth);
       dispatch(setLoadError(errorMessage));
       dispatch(setUserLoading(false));
@@ -85,10 +94,14 @@ export default function useLoadUser() {
       logEvent(GET_USER_ERROR, { message: errorMessage }); // deprecated event
       logEvent(LOGOUT_FORCED);
     }
-  }, [userResourceError, dispatch, auth]);
+  }, [userResourceError, isInvalidUserResourceResponse, dispatch, auth]);
 
   return {
     userResourceIsLoading,
-    userResourceError,
+    userResourceError: userResourceError
+      ? getErrorMessage(userResourceError)
+      : isInvalidUserResourceResponse
+        ? invalidUserResourceError
+        : undefined,
   };
 }