fix: manage backend authXService errors (#3190)

site/src/components/ErrorSummary/ErrorSummary.tsx

@@ -9,7 +9,7 @@ import { ApiError, getErrorDetail, getErrorMessage } from "api/errors"
 import { Stack } from "components/Stack/Stack"
 import { FC, useState } from "react"
 
-const Language = {
+export const Language = {
   retryMessage: "Retry",
   unknownErrorMessage: "An unknown error has occurred",
   moreDetails: "More",
@@ -91,7 +91,6 @@ interface StyleProps {
 const useStyles = makeStyles<Theme, StyleProps>((theme) => ({
   root: {
     background: darken(theme.palette.error.main, 0.6),
-    margin: `${theme.spacing(2)}px`,
     padding: `${theme.spacing(2)}px`,
     borderRadius: theme.shape.borderRadius,
     gap: 0,

site/src/components/SettingsAccountForm/SettingsAccountForm.stories.tsx

@@ -0,0 +1,53 @@
+import { Story } from "@storybook/react"
+import { AccountForm, AccountFormProps } from "./SettingsAccountForm"
+
+export default {
+  title: "components/SettingsAccountForm",
+  component: AccountForm,
+  argTypes: {
+    onSubmit: { action: "Submit" },
+  },
+}
+
+const Template: Story<AccountFormProps> = (args: AccountFormProps) => <AccountForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  email: "test-user@org.com",
+  isLoading: false,
+  initialValues: {
+    username: "test-user",
+  },
+  updateProfileError: undefined,
+  onSubmit: () => {
+    return Promise.resolve()
+  },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Example.args,
+  isLoading: true,
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  ...Example.args,
+  updateProfileError: {
+    response: {
+      data: {
+        message: "Username is invalid",
+        validations: [
+          {
+            field: "username",
+            detail: "Username is too long.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    username: true,
+  },
+}

site/src/components/SettingsAccountForm/SettingsAccountForm.tsx

@@ -1,9 +1,9 @@
-import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, FormikErrors, useFormik } from "formik"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
-import { getFormHelpers, nameValidator, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpersWithError, nameValidator, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -21,15 +21,14 @@ const validationSchema = Yup.object({
   username: nameValidator(Language.usernameLabel),
 })
 
-export type AccountFormErrors = FormikErrors<AccountFormValues>
-
 export interface AccountFormProps {
   email: string
   isLoading: boolean
   initialValues: AccountFormValues
   onSubmit: (values: AccountFormValues) => void
-  formErrors?: AccountFormErrors
-  error?: string
+  updateProfileError?: Error | unknown
+  // initialTouched is only used for testing the error state of the form.
+  initialTouched?: FormikTouched<AccountFormValues>
 }
 
 export const AccountForm: FC<AccountFormProps> = ({
@@ -37,20 +36,22 @@ export const AccountForm: FC<AccountFormProps> = ({
   isLoading,
   onSubmit,
   initialValues,
-  formErrors = {},
-  error,
+  updateProfileError,
+  initialTouched,
 }) => {
   const form: FormikContextType<AccountFormValues> = useFormik<AccountFormValues>({
     initialValues,
     validationSchema,
     onSubmit,
+    initialTouched,
   })
-  const getFieldHelpers = getFormHelpers<AccountFormValues>(form, formErrors)
+  const getFieldHelpers = getFormHelpersWithError<AccountFormValues>(form, updateProfileError)
 
   return (
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
+          {updateProfileError && <ErrorSummary error={updateProfileError} />}
           <TextField
             disabled
             fullWidth
@@ -67,8 +68,6 @@ export const AccountForm: FC<AccountFormProps> = ({
             variant="outlined"
           />
 
-          {error && <FormHelperText error>{error}</FormHelperText>}
-
           <div>
             <LoadingButton loading={isLoading} type="submit" variant="contained">
               {isLoading ? "" : Language.updateSettings}

site/src/components/SettingsSecurityForm/SettingsSecurityForm.stories.tsx

@@ -0,0 +1,54 @@
+import { Story } from "@storybook/react"
+import { SecurityForm, SecurityFormProps } from "./SettingsSecurityForm"
+
+export default {
+  title: "components/SettingsSecurityForm",
+  component: SecurityForm,
+  argTypes: {
+    onSubmit: { action: "Submit" },
+  },
+}
+
+const Template: Story<SecurityFormProps> = (args: SecurityFormProps) => <SecurityForm {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  isLoading: false,
+  initialValues: {
+    old_password: "",
+    password: "",
+    confirm_password: "",
+  },
+  updateSecurityError: undefined,
+  onSubmit: () => {
+    return Promise.resolve()
+  },
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Example.args,
+  isLoading: true,
+}
+
+export const WithError = Template.bind({})
+WithError.args = {
+  ...Example.args,
+  updateSecurityError: {
+    response: {
+      data: {
+        message: "Old password is incorrect",
+        validations: [
+          {
+            field: "old_password",
+            detail: "Old password is incorrect.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    old_password: true,
+  },
+}

site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx

@@ -1,9 +1,9 @@
-import FormHelperText from "@material-ui/core/FormHelperText"
 import TextField from "@material-ui/core/TextField"
-import { FormikContextType, FormikErrors, useFormik } from "formik"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { FormikContextType, FormikTouched, useFormik } from "formik"
 import React from "react"
 import * as Yup from "yup"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
 import { LoadingButton } from "../LoadingButton/LoadingButton"
 import { Stack } from "../Stack/Stack"
 
@@ -40,33 +40,35 @@ const validationSchema = Yup.object({
     }),
 })
 
-export type SecurityFormErrors = FormikErrors<SecurityFormValues>
 export interface SecurityFormProps {
   isLoading: boolean
   initialValues: SecurityFormValues
   onSubmit: (values: SecurityFormValues) => void
-  formErrors?: SecurityFormErrors
-  error?: string
+  updateSecurityError?: Error | unknown
+  // initialTouched is only used for testing the error state of the form.
+  initialTouched?: FormikTouched<SecurityFormValues>
 }
 
 export const SecurityForm: React.FC<SecurityFormProps> = ({
   isLoading,
   onSubmit,
   initialValues,
-  formErrors = {},
-  error,
+  updateSecurityError,
+  initialTouched,
 }) => {
   const form: FormikContextType<SecurityFormValues> = useFormik<SecurityFormValues>({
     initialValues,
     validationSchema,
     onSubmit,
+    initialTouched,
   })
-  const getFieldHelpers = getFormHelpers<SecurityFormValues>(form, formErrors)
+  const getFieldHelpers = getFormHelpersWithError<SecurityFormValues>(form, updateSecurityError)
 
   return (
     <>
       <form onSubmit={form.handleSubmit}>
         <Stack>
+          {updateSecurityError && <ErrorSummary error={updateSecurityError} />}
           <TextField
             {...getFieldHelpers("old_password")}
             onChange={onChangeTrimmed(form)}
@@ -95,8 +97,6 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
             type="password"
           />
 
-          {error && <FormHelperText error>{error}</FormHelperText>}
-
           <div>
             <LoadingButton loading={isLoading} type="submit" variant="contained">
               {isLoading ? "" : Language.updatePassword}

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

@@ -6,7 +6,6 @@ export default {
   component: SignInForm,
   argTypes: {
     isLoading: "boolean",
-    authErrorMessage: "string",
     onSubmit: { action: "Submit" },
   },
 }
@@ -16,7 +15,7 @@ const Template: Story<SignInFormProps> = (args: SignInFormProps) => <SignInForm
 export const SignedOut = Template.bind({})
 SignedOut.args = {
   isLoading: false,
-  authErrorMessage: undefined,
+  authError: undefined,
   onSubmit: () => {
     return Promise.resolve()
   },
@@ -33,12 +32,31 @@ Loading.args = {
 }
 
 export const WithLoginError = Template.bind({})
-WithLoginError.args = { ...SignedOut.args, authErrorMessage: "Email or password was invalid" }
+WithLoginError.args = {
+  ...SignedOut.args,
+  authError: {
+    response: {
+      data: {
+        message: "Email or password was invalid",
+        validations: [
+          {
+            field: "password",
+            detail: "Password is invalid.",
+          },
+        ],
+      },
+    },
+    isAxiosError: true,
+  },
+  initialTouched: {
+    password: true,
+  },
+}
 
 export const WithAuthMethodsError = Template.bind({})
 WithAuthMethodsError.args = {
   ...SignedOut.args,
-  methodsErrorMessage: "Failed to fetch auth methods",
+  methodsError: new Error("Failed to fetch auth methods"),
 }
 
 export const WithGithub = Template.bind({})

site/src/components/SignInForm/SignInForm.tsx

@@ -1,14 +1,15 @@
 import Button from "@material-ui/core/Button"
-import FormHelperText from "@material-ui/core/FormHelperText"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import GitHubIcon from "@material-ui/icons/GitHub"
-import { FormikContextType, useFormik } from "formik"
+import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { Stack } from "components/Stack/Stack"
+import { FormikContextType, FormikTouched, useFormik } from "formik"
 import { FC } from "react"
 import * as Yup from "yup"
 import { AuthMethods } from "../../api/typesGenerated"
-import { getFormHelpers, onChangeTrimmed } from "../../util/formUtils"
+import { getFormHelpersWithError, onChangeTrimmed } from "../../util/formUtils"
 import { Welcome } from "../Welcome/Welcome"
 import { LoadingButton } from "./../LoadingButton/LoadingButton"
 
@@ -39,17 +40,6 @@ const validationSchema = Yup.object({
 })
 
 const useStyles = makeStyles((theme) => ({
-  loginBtnWrapper: {
-    marginTop: theme.spacing(6),
-    borderTop: `1px solid ${theme.palette.action.disabled}`,
-    paddingTop: theme.spacing(3),
-  },
-  loginTextField: {
-    marginTop: theme.spacing(2),
-  },
-  submitBtn: {
-    marginTop: theme.spacing(2),
-  },
   buttonIcon: {
     width: 14,
     height: 14,
@@ -78,19 +68,22 @@ const useStyles = makeStyles((theme) => ({
 export interface SignInFormProps {
   isLoading: boolean
   redirectTo: string
-  authErrorMessage?: string
-  methodsErrorMessage?: string
+  authError?: Error | unknown
+  methodsError?: Error | unknown
   authMethods?: AuthMethods
   onSubmit: ({ email, password }: { email: string; password: string }) => Promise<void>
+  // initialTouched is only used for testing the error state of the form.
+  initialTouched?: FormikTouched<BuiltInAuthFormValues>
 }
 
 export const SignInForm: FC<SignInFormProps> = ({
   authMethods,
   redirectTo,
   isLoading,
-  authErrorMessage,
-  methodsErrorMessage,
+  authError,
+  methodsError,
   onSubmit,
+  initialTouched,
 }) => {
   const styles = useStyles()
 
@@ -106,43 +99,46 @@ export const SignInForm: FC<SignInFormProps> = ({
     // field), or after a submission attempt.
     validateOnBlur: false,
     onSubmit,
+    initialTouched,
   })
-  const getFieldHelpers = getFormHelpers<BuiltInAuthFormValues>(form)
+  const getFieldHelpers = getFormHelpersWithError<BuiltInAuthFormValues>(form, authError)
 
   return (
     <>
       <Welcome />
       <form onSubmit={form.handleSubmit}>
-        <TextField
-          {...getFieldHelpers("email")}
-          onChange={onChangeTrimmed(form)}
-          autoFocus
-          autoComplete="email"
-          className={styles.loginTextField}
-          fullWidth
-          label={Language.emailLabel}
-          type="email"
-          variant="outlined"
-        />
-        <TextField
-          {...getFieldHelpers("password")}
-          autoComplete="current-password"
-          className={styles.loginTextField}
-          fullWidth
-          id="password"
-          label={Language.passwordLabel}
-          type="password"
-          variant="outlined"
-        />
-        {authErrorMessage && <FormHelperText error>{authErrorMessage}</FormHelperText>}
-        {methodsErrorMessage && (
-          <FormHelperText error>{Language.methodsErrorMessage}</FormHelperText>
-        )}
-        <div className={styles.submitBtn}>
-          <LoadingButton loading={isLoading} fullWidth type="submit" variant="contained">
-            {isLoading ? "" : Language.passwordSignIn}
-          </LoadingButton>
-        </div>
+        <Stack>
+          {authError && (
+            <ErrorSummary error={authError} defaultMessage={Language.authErrorMessage} />
+          )}
+          {methodsError && (
+            <ErrorSummary error={methodsError} defaultMessage={Language.methodsErrorMessage} />
+          )}
+          <TextField
+            {...getFieldHelpers("email")}
+            onChange={onChangeTrimmed(form)}
+            autoFocus
+            autoComplete="email"
+            fullWidth
+            label={Language.emailLabel}
+            type="email"
+            variant="outlined"
+          />
+          <TextField
+            {...getFieldHelpers("password")}
+            autoComplete="current-password"
+            fullWidth
+            id="password"
+            label={Language.passwordLabel}
+            type="password"
+            variant="outlined"
+          />
+          <div>
+            <LoadingButton loading={isLoading} fullWidth type="submit" variant="contained">
+              {isLoading ? "" : Language.passwordSignIn}
+            </LoadingButton>
+          </div>
+        </Stack>
       </form>
       {authMethods?.github && (
         <>

site/src/pages/LoginPage/LoginPage.test.tsx

@@ -52,10 +52,11 @@ describe("LoginPage", () => {
 
   it("shows an error if fetching auth methods fails", async () => {
     // Given
+    const apiErrorMessage = "Unable to fetch methods"
     server.use(
       // Make login fail
       rest.get("/api/v2/users/authmethods", async (req, res, ctx) => {
-        return res(ctx.status(500), ctx.json({ message: "nope" }))
+        return res(ctx.status(500), ctx.json({ message: apiErrorMessage }))
       }),
     )
 
@@ -63,7 +64,7 @@ describe("LoginPage", () => {
     render(<LoginPage />)
 
     // Then
-    const errorMessage = await screen.findByText(Language.methodsErrorMessage)
+    const errorMessage = await screen.findByText(apiErrorMessage)
     expect(errorMessage).toBeDefined()
   })
 

site/src/pages/LoginPage/LoginPage.tsx

@@ -3,7 +3,6 @@ import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
 import { Helmet } from "react-helmet"
 import { Navigate, useLocation } from "react-router-dom"
-import { isApiError } from "../../api/errors"
 import { Footer } from "../../components/Footer/Footer"
 import { SignInForm } from "../../components/SignInForm/SignInForm"
 import { pageTitle } from "../../util/page"
@@ -36,12 +35,6 @@ export const LoginPage: React.FC = () => {
   const [authState, authSend] = useActor(xServices.authXService)
   const isLoading = authState.hasTag("loading")
   const redirectTo = retrieveRedirect(location.search)
-  const authErrorMessage = isApiError(authState.context.authError)
-    ? authState.context.authError.response.data.message
-    : undefined
-  const getMethodsError = authState.context.getMethodsError
-    ? (authState.context.getMethodsError as Error).message
-    : undefined
 
   const onSubmit = async ({ email, password }: { email: string; password: string }) => {
     authSend({ type: "SIGN_IN", email, password })
@@ -61,8 +54,8 @@ export const LoginPage: React.FC = () => {
               authMethods={authState.context.methods}
               redirectTo={redirectTo}
               isLoading={isLoading}
-              authErrorMessage={authErrorMessage}
-              methodsErrorMessage={getMethodsError}
+              authError={authState.context.authError}
+              methodsError={authState.context.getMethodsError as Error}
               onSubmit={onSubmit}
             />
           </div>

site/src/pages/UserSettingsPage/AccountPage/AccountPage.test.tsx

@@ -1,10 +1,11 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react"
+import { Language as ErrorSummaryLanguage } from "components/ErrorSummary/ErrorSummary"
 import * as API from "../../../api/api"
 import { GlobalSnackbar } from "../../../components/GlobalSnackbar/GlobalSnackbar"
 import * as AccountForm from "../../../components/SettingsAccountForm/SettingsAccountForm"
 import { renderWithAuth } from "../../../testHelpers/renderHelpers"
 import * as AuthXService from "../../../xServices/auth/authXService"
-import { AccountPage, Language } from "./AccountPage"
+import { AccountPage } from "./AccountPage"
 
 const renderPage = () => {
   return renderWithAuth(
@@ -80,7 +81,7 @@ describe("AccountPage", () => {
       const { user } = renderPage()
       await fillAndSubmitForm()
 
-      const errorMessage = await screen.findByText(Language.unknownError)
+      const errorMessage = await screen.findByText(ErrorSummaryLanguage.unknownErrorMessage)
       expect(errorMessage).toBeDefined()
       expect(API.updateProfile).toBeCalledTimes(1)
       expect(API.updateProfile).toBeCalledWith(user.id, newData)

site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx

@@ -1,25 +1,17 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { isApiError, mapApiErrorToFieldErrors } from "../../../api/errors"
 import { Section } from "../../../components/Section/Section"
 import { AccountForm } from "../../../components/SettingsAccountForm/SettingsAccountForm"
 import { XServiceContext } from "../../../xServices/StateContext"
 
 export const Language = {
   title: "Account",
-  unknownError: "Oops, an unknown error occurred.",
 }
 
 export const AccountPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me, updateProfileError } = authState.context
-  const hasError = !!updateProfileError
-  const formErrors =
-    hasError && isApiError(updateProfileError)
-      ? mapApiErrorToFieldErrors(updateProfileError.response.data)
-      : undefined
-  const hasUnknownError = hasError && !isApiError(updateProfileError)
 
   if (!me) {
     throw new Error("No current user found")
@@ -29,8 +21,7 @@ export const AccountPage: React.FC = () => {
     <Section title={Language.title}>
       <AccountForm
         email={me.email}
-        error={hasUnknownError ? Language.unknownError : undefined}
-        formErrors={formErrors}
+        updateProfileError={updateProfileError}
         isLoading={authState.matches("signedIn.profile.updatingProfile")}
         initialValues={{ username: me.username }}
         onSubmit={(data) => {

site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.test.tsx

@@ -1,11 +1,12 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react"
+import { Language as ErrorSummaryLanguage } from "components/ErrorSummary/ErrorSummary"
 import React from "react"
 import * as API from "../../../api/api"
 import { GlobalSnackbar } from "../../../components/GlobalSnackbar/GlobalSnackbar"
 import * as SecurityForm from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
 import { renderWithAuth } from "../../../testHelpers/renderHelpers"
 import * as AuthXService from "../../../xServices/auth/authXService"
-import { Language, SecurityPage } from "./SecurityPage"
+import { SecurityPage } from "./SecurityPage"
 
 const renderPage = () => {
   return renderWithAuth(
@@ -65,8 +66,9 @@ describe("SecurityPage", () => {
       const { user } = renderPage()
       await fillAndSubmitForm()
 
-      const errorMessage = await screen.findByText("Incorrect password.")
+      const errorMessage = await screen.findAllByText("Incorrect password.")
       expect(errorMessage).toBeDefined()
+      expect(errorMessage).toHaveLength(2)
       expect(API.updateUserPassword).toBeCalledTimes(1)
       expect(API.updateUserPassword).toBeCalledWith(user.id, newData)
     })
@@ -87,8 +89,9 @@ describe("SecurityPage", () => {
       const { user } = renderPage()
       await fillAndSubmitForm()
 
-      const errorMessage = await screen.findByText("Invalid password.")
+      const errorMessage = await screen.findAllByText("Invalid password.")
       expect(errorMessage).toBeDefined()
+      expect(errorMessage).toHaveLength(2)
       expect(API.updateUserPassword).toBeCalledTimes(1)
       expect(API.updateUserPassword).toBeCalledWith(user.id, newData)
     })
@@ -103,7 +106,7 @@ describe("SecurityPage", () => {
       const { user } = renderPage()
       await fillAndSubmitForm()
 
-      const errorMessage = await screen.findByText(Language.unknownError)
+      const errorMessage = await screen.findByText(ErrorSummaryLanguage.unknownErrorMessage)
       expect(errorMessage).toBeDefined()
       expect(API.updateUserPassword).toBeCalledTimes(1)
       expect(API.updateUserPassword).toBeCalledWith(user.id, newData)

site/src/pages/UserSettingsPage/SecurityPage/SecurityPage.tsx

@@ -1,25 +1,17 @@
 import { useActor } from "@xstate/react"
 import React, { useContext } from "react"
-import { isApiError, mapApiErrorToFieldErrors } from "../../../api/errors"
 import { Section } from "../../../components/Section/Section"
 import { SecurityForm } from "../../../components/SettingsSecurityForm/SettingsSecurityForm"
 import { XServiceContext } from "../../../xServices/StateContext"
 
 export const Language = {
   title: "Security",
-  unknownError: "Oops, an unknown error occurred.",
 }
 
 export const SecurityPage: React.FC = () => {
   const xServices = useContext(XServiceContext)
   const [authState, authSend] = useActor(xServices.authXService)
   const { me, updateSecurityError } = authState.context
-  const hasError = !!updateSecurityError
-  const formErrors =
-    hasError && isApiError(updateSecurityError)
-      ? mapApiErrorToFieldErrors(updateSecurityError.response.data)
-      : undefined
-  const hasUnknownError = hasError && !isApiError(updateSecurityError)
 
   if (!me) {
     throw new Error("No current user found")
@@ -28,8 +20,7 @@ export const SecurityPage: React.FC = () => {
   return (
     <Section title={Language.title}>
       <SecurityForm
-        error={hasUnknownError ? Language.unknownError : undefined}
-        formErrors={formErrors}
+        updateSecurityError={updateSecurityError}
         isLoading={authState.matches("signedIn.security.updatingSecurity")}
         initialValues={{ old_password: "", password: "", confirm_password: "" }}
         onSubmit={(data) => {

site/src/util/formUtils.ts

@@ -1,3 +1,4 @@
+import { hasApiFieldErrors, isApiError, mapApiErrorToFieldErrors } from "api/errors"
 import { FormikContextType, FormikErrors, getIn } from "formik"
 import { ChangeEvent, ChangeEventHandler, FocusEventHandler, ReactNode } from "react"
 import * as Yup from "yup"
@@ -45,6 +46,17 @@ export const getFormHelpers =
     }
   }
 
+export const getFormHelpersWithError = <T>(
+  form: FormikContextType<T>,
+  error?: Error | unknown,
+): ((name: keyof T, HelperText?: ReactNode) => FormHelpers) => {
+  const apiValidationErrors =
+    isApiError(error) && hasApiFieldErrors(error)
+      ? (mapApiErrorToFieldErrors(error.response.data) as FormikErrors<T>)
+      : undefined
+  return getFormHelpers(form, apiValidationErrors)
+}
+
 export const onChangeTrimmed =
   <T>(form: FormikContextType<T>) =>
   (event: ChangeEvent<HTMLInputElement>): void => {

site/src/xServices/auth/authXService.ts

@@ -1,4 +1,3 @@
-import { AxiosError } from "axios"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import * as TypesGen from "../../api/typesGenerated"
@@ -49,8 +48,10 @@ type Permissions = Record<keyof typeof permissionsToCheck, boolean>
 
 export interface AuthContext {
   getUserError?: Error | unknown
+  // The getMethods API call does not return an ApiError.
+  // It can only error out in a generic fashion.
   getMethodsError?: Error | unknown
-  authError?: Error | AxiosError | unknown
+  authError?: Error | unknown
   updateProfileError?: Error | unknown
   updateSecurityError?: Error | unknown
   me?: TypesGen.User
@@ -194,12 +195,12 @@ export const authMachine =
           },
         },
         signingIn: {
+          entry: "clearAuthError",
           invoke: {
             src: "signIn",
             id: "signIn",
             onDone: [
               {
-                actions: "clearAuthError",
                 target: "gettingUser",
               },
             ],