fix: external auth device flow, check both queries for errors (#12367)

* fix: external auth device flow, check both queries for errors
* Minor style update

---------

Co-authored-by: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>

site/src/pages/ExternalAuthPage/ExternalAuthPage.tsx

@@ -53,6 +53,8 @@ const ExternalAuthPage: FC = () => {
   if (isAxiosError(exchangeExternalAuthDeviceQuery.failureReason)) {
     deviceExchangeError =
       exchangeExternalAuthDeviceQuery.failureReason.response?.data;
+  } else if (isAxiosError(externalAuthDeviceQuery.failureReason)) {
+    deviceExchangeError = externalAuthDeviceQuery.failureReason.response?.data;
   }
 
   if (

site/src/pages/ExternalAuthPage/ExternalAuthPageView.stories.tsx

@@ -49,6 +49,27 @@ DeviceUnauthenticated.args = {
   },
 };
 
+export const Device429Error = Template.bind({});
+Device429Error.args = {
+  externalAuth: {
+    display_name: "GitHub",
+    authenticated: false,
+    device: true,
+    installations: [],
+    app_install_url: "",
+    app_installable: false,
+  },
+  // This is intentionally undefined.
+  // If we get a 429 on the first /device call, then this
+  // is undefined with a 429 error.
+  externalAuthDevice: undefined,
+  deviceExchangeError: {
+    message: "Failed to authorize device.",
+    detail:
+      "rate limit hit, unable to authorize device. please try again later",
+  },
+};
+
 export const DeviceUnauthenticatedError = Template.bind({});
 DeviceUnauthenticatedError.args = {
   externalAuth: {

site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,12 +1,13 @@
 import { type Interpolation, type Theme } from "@emotion/react";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import RefreshIcon from "@mui/icons-material/Refresh";
+import AlertTitle from "@mui/material/AlertTitle";
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
-import { Alert } from "components/Alert/Alert";
+import { Alert, AlertDetail } from "components/Alert/Alert";
 import { Avatar } from "components/Avatar/Avatar";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
@@ -173,14 +174,22 @@ const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
       default:
         status = (
           <Alert severity="error">
-            An unknown error occurred. Please try again:{" "}
-            {deviceExchangeError.message}
+            <AlertTitle>{deviceExchangeError.message}</AlertTitle>
+            {deviceExchangeError.detail && (
+              <AlertDetail>{deviceExchangeError.detail}</AlertDetail>
+            )}
           </Alert>
         );
         break;
     }
   }
 
+  // If the error comes from the `externalAuthDevice` query,
+  // we cannot even display the user_code.
+  if (deviceExchangeError && !externalAuthDevice) {
+    return <div>{status}</div>;
+  }
+
   if (!externalAuthDevice) {
     return <CircularProgress />;
   }