fix: handle getUser error (#3285)

site/src/components/RequireAuth/RequireAuth.tsx

@@ -13,9 +13,10 @@ export const RequireAuth: React.FC<RequireAuthProps> = ({ children }) => {
   const xServices = useContext(XServiceContext)
   const [authState] = useActor(xServices.authXService)
   const location = useLocation()
-  const navigateTo = location.pathname === "/" ? "/login" : embedRedirect(location.pathname)
+  const isHomePage = location.pathname === "/"
+  const navigateTo = isHomePage ? "/login" : embedRedirect(location.pathname)
   if (authState.matches("signedOut")) {
-    return <Navigate to={navigateTo} />
+    return <Navigate to={navigateTo} state={{ isRedirect: !isHomePage }} />
   } else if (authState.hasTag("loading")) {
     return <FullScreenLoader />
   } else {

site/src/components/SignInForm/SignInForm.stories.tsx

@@ -51,6 +51,17 @@ WithLoginError.args = {
   },
 }
 
+export const WithGetUserError = Template.bind({})
+WithGetUserError.args = {
+  ...SignedOut.args,
+  loginErrors: {
+    [LoginErrors.GET_USER_ERROR]: makeMockApiError({
+      message: "You are logged out. Please log in to continue.",
+      detail: "API Key is invalid.",
+    }),
+  },
+}
+
 export const WithCheckPermissionsError = Template.bind({})
 WithCheckPermissionsError.args = {
   ...SignedOut.args,
@@ -70,6 +81,18 @@ WithAuthMethodsError.args = {
   },
 }
 
+export const WithGetUserAndAuthMethodsError = Template.bind({})
+WithGetUserAndAuthMethodsError.args = {
+  ...SignedOut.args,
+  loginErrors: {
+    [LoginErrors.GET_USER_ERROR]: makeMockApiError({
+      message: "You are logged out. Please log in to continue.",
+      detail: "API Key is invalid.",
+    }),
+    [LoginErrors.GET_METHODS_ERROR]: new Error("Failed to fetch auth methods"),
+  },
+}
+
 export const WithGithub = Template.bind({})
 WithGithub.args = {
   ...SignedOut.args,

site/src/components/SignInForm/SignInForm.tsx

@@ -25,6 +25,7 @@ interface BuiltInAuthFormValues {
 
 export enum LoginErrors {
   AUTH_ERROR = "authError",
+  GET_USER_ERROR = "getUserError",
   CHECK_PERMISSIONS_ERROR = "checkPermissionsError",
   GET_METHODS_ERROR = "getMethodsError",
 }
@@ -36,6 +37,7 @@ export const Language = {
   emailRequired: "Please enter an email address.",
   errorMessages: {
     [LoginErrors.AUTH_ERROR]: "Incorrect email or password.",
+    [LoginErrors.GET_USER_ERROR]: "Failed to fetch user details.",
     [LoginErrors.CHECK_PERMISSIONS_ERROR]: "Unable to fetch user permissions.",
     [LoginErrors.GET_METHODS_ERROR]: "Unable to fetch auth methods.",
   },