handle all auth api errors

AbhineetJain · AbhineetJain · commit c37b4ece6d67 · 2022-07-26T23:53:01.000Z
diff --git a/site/src/components/SignInForm/SignInForm.stories.tsx b/site/src/components/SignInForm/SignInForm.stories.tsx
@@ -15,7 +15,7 @@ const Template: Story<SignInFormProps> = (args: SignInFormProps) => <SignInForm
 export const SignedOut = Template.bind({})
 SignedOut.args = {
   isLoading: false,
-  authError: undefined,
+  loginErrors: {},
   onSubmit: () => {
     return Promise.resolve()
   },
@@ -34,29 +34,82 @@ Loading.args = {
 export const WithLoginError = Template.bind({})
 WithLoginError.args = {
   ...SignedOut.args,
-  authError: {
-    response: {
-      data: {
-        message: "Email or password was invalid",
-        validations: [
-          {
-            field: "password",
-            detail: "Password is invalid.",
-          },
-        ],
+  loginErrors: {
+    authError: {
+      response: {
+        data: {
+          message: "Email or password was invalid",
+          validations: [
+            {
+              field: "password",
+              detail: "Password is invalid.",
+            },
+          ],
+        },
       },
+      isAxiosError: true,
     },
-    isAxiosError: true,
   },
   initialTouched: {
     password: true,
   },
 }
 
+export const WithGetUserError = Template.bind({})
+WithGetUserError.args = {
+  ...SignedOut.args,
+  loginErrors: {
+    getUserError: {
+      response: {
+        data: {
+          message: "Unable to fetch user details",
+          detail: "Resource not found or you do not have access to this resource.",
+        },
+      },
+      isAxiosError: true,
+    },
+  },
+}
+
+export const WithCheckPermissionsError = Template.bind({})
+WithCheckPermissionsError.args = {
+  ...SignedOut.args,
+  loginErrors: {
+    checkPermissionsError: {
+      response: {
+        data: {
+          message: "Unable to fetch user permissions",
+          detail: "Resource not found or you do not have access to this resource.",
+        },
+      },
+      isAxiosError: true,
+    },
+  },
+}
+
 export const WithAuthMethodsError = Template.bind({})
 WithAuthMethodsError.args = {
   ...SignedOut.args,
-  methodsError: new Error("Failed to fetch auth methods"),
+  loginErrors: {
+    getMethodsError: new Error("Failed to fetch auth methods"),
+  },
+}
+
+export const WithGetUserAndAuthMethodsErrors = Template.bind({})
+WithGetUserAndAuthMethodsErrors.args = {
+  ...SignedOut.args,
+  loginErrors: {
+    getUserError: {
+      response: {
+        data: {
+          message: "Unable to fetch user details",
+          detail: "Resource not found or you do not have access to this resource.",
+        },
+      },
+      isAxiosError: true,
+    },
+    getMethodsError: new Error("Failed to fetch auth methods"),
+  },
 }
 
 export const WithGithub = Template.bind({})
diff --git a/site/src/components/SignInForm/SignInForm.tsx b/site/src/components/SignInForm/SignInForm.tsx
@@ -29,7 +29,9 @@ export const Language = {
   emailInvalid: "Please enter a valid email address.",
   emailRequired: "Please enter an email address.",
   authErrorMessage: "Incorrect email or password.",
-  methodsErrorMessage: "Unable to fetch auth methods.",
+  getUserErrorMessage: "Unable to fetch user details.",
+  checkPermissionsErrorMessage: "Unable to fetch user permissions.",
+  getMethodsErrorMessage: "Unable to fetch auth methods.",
   passwordSignIn: "Sign In",
   githubSignIn: "GitHub",
 }
@@ -65,11 +67,17 @@ const useStyles = makeStyles((theme) => ({
   },
 }))
 
+type LoginErrors = {
+  authError?: Error | unknown
+  getUserError?: Error | unknown
+  checkPermissionsError?: Error | unknown
+  getMethodsError?: Error | unknown
+}
+
 export interface SignInFormProps {
   isLoading: boolean
   redirectTo: string
-  authError?: Error | unknown
-  methodsError?: Error | unknown
+  loginErrors: LoginErrors
   authMethods?: AuthMethods
   onSubmit: ({ email, password }: { email: string; password: string }) => Promise<void>
   // initialTouched is only used for testing the error state of the form.
@@ -80,8 +88,7 @@ export const SignInForm: FC<SignInFormProps> = ({
   authMethods,
   redirectTo,
   isLoading,
-  authError,
-  methodsError,
+  loginErrors,
   onSubmit,
   initialTouched,
 }) => {
@@ -101,18 +108,39 @@ export const SignInForm: FC<SignInFormProps> = ({
     onSubmit,
     initialTouched,
   })
-  const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(form, authError)
+  const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(
+    form,
+    loginErrors.authError,
+  )
 
   return (
     <>
       <Welcome />
       <form onSubmit={form.handleSubmit}>
         <Stack>
-          {authError && (
-            <ErrorSummary error={authError} defaultMessage={Language.authErrorMessage} />
+          {loginErrors.authError && (
+            <ErrorSummary
+              error={loginErrors.authError}
+              defaultMessage={Language.authErrorMessage}
+            />
+          )}
+          {loginErrors.getUserError && (
+            <ErrorSummary
+              error={loginErrors.getUserError}
+              defaultMessage={Language.getUserErrorMessage}
+            />
+          )}
+          {loginErrors.checkPermissionsError && (
+            <ErrorSummary
+              error={loginErrors.checkPermissionsError}
+              defaultMessage={Language.checkPermissionsErrorMessage}
+            />
           )}
-          {methodsError && (
-            <ErrorSummary error={methodsError} defaultMessage={Language.methodsErrorMessage} />
+          {loginErrors.getMethodsError && (
+            <ErrorSummary
+              error={loginErrors.getMethodsError}
+              defaultMessage={Language.getMethodsErrorMessage}
+            />
           )}
           <TextField
             {...getFieldHelpers("email")}
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -40,6 +40,8 @@ export const LoginPage: React.FC = () => {
     authSend({ type: "SIGN_IN", email, password })
   }
 
+  const { authError, getUserError, checkPermissionsError, getMethodsError } = authState.context
+
   if (authState.matches("signedIn")) {
     return <Navigate to={redirectTo} replace />
   } else {
@@ -54,8 +56,12 @@ export const LoginPage: React.FC = () => {
               authMethods={authState.context.methods}
               redirectTo={redirectTo}
               isLoading={isLoading}
-              authError={authState.context.authError}
-              methodsError={authState.context.getMethodsError as Error}
+              loginErrors={{
+                authError,
+                getUserError,
+                checkPermissionsError,
+                getMethodsError,
+              }}
               onSubmit={onSubmit}
             />
           </div>
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
@@ -213,12 +213,13 @@ export const authMachine =
           tags: "loading",
         },
         gettingUser: {
+          entry: "clearGetUserError",
           invoke: {
             src: "getMe",
             id: "getMe",
             onDone: [
               {
-                actions: ["assignMe", "clearGetUserError"],
+                actions: ["assignMe"],
                 target: "gettingPermissions",
               },
             ],
