actually this way worked a little bit better

aslilac · aslilac · commit 4e42702713f2 · 2023-08-16T19:34:10.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -5,6 +5,7 @@ import { DeploymentConfig } from "./types"
 import * as TypesGen from "./typesGenerated"
 import { delay } from "utils/delay"
 import userAgentParser from "ua-parser-js"
+// import { embedRedirect } from "../utils/redirect"
 
 // Adds 304 for the default axios validateStatus function
 // https://github.com/axios/axios#handling-errors Check status here
@@ -13,14 +14,19 @@ axios.defaults.validateStatus = (status) => {
   return (status >= 200 && status < 300) || status === 304
 }
 
-axios.interceptors.response.use((response) => {
-  // If we encountered an authentication error, reset the app back to the /login route
-  if (response.status === 401) {
-    location.pathname = "/login"
-  }
+// axios.interceptors.response.use(
+//   (okResponse) => okResponse,
+//   (error) => {
+//     // 401 Unauthorized
+//     // If we encountered an authentication error, reset the app back to the /login route
+//     if (error.response.status === 401 && location.pathname != "/login") {
+//       location.href = embedRedirect(`${location.pathname}${location.search}`)
+//     }
 
-  return response
-})
+//     // Otherwise, pass the response through so that it can be displayed in the UI
+//     return Promise.reject(error)
+//   },
+// )
 
 export const hardCodedCSRFCookie = (): string => {
   // This is a hard coded CSRF token/cookie pair for local development. In prod,
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -88,3 +88,6 @@ export const getErrorDetail = (error: unknown): string | undefined | null =>
     : error instanceof Error
     ? `Please check the developer console for more details.`
     : null
+
+export const isAuthenticationError = (error: unknown): boolean =>
+  isApiError(error) && error.response.status === 401
diff --git a/site/src/components/Alert/ErrorAlert.tsx b/site/src/components/Alert/ErrorAlert.tsx
@@ -1,11 +1,28 @@
 import { AlertProps, Alert, AlertDetail } from "./Alert"
 import AlertTitle from "@mui/material/AlertTitle"
-import { getErrorMessage, getErrorDetail } from "api/errors"
-import { FC } from "react"
+import {
+  getErrorMessage,
+  getErrorDetail,
+  isAuthenticationError,
+} from "api/errors"
+import { useAuth } from "components/AuthProvider/AuthProvider"
+import { FC, useEffect } from "react"
 
 export const ErrorAlert: FC<
   Omit<AlertProps, "severity" | "children"> & { error: unknown }
 > = ({ error, ...alertProps }) => {
+  const [auth, authSend] = useAuth()
+  const shouldSignOut = isAuthenticationError(error)
+  useEffect(() => {
+    if (shouldSignOut) {
+      authSend("SIGN_OUT")
+    }
+  }, [shouldSignOut])
+
+  if (shouldSignOut) {
+    return null
+  }
+
   const message = getErrorMessage(error, "Something went wrong.")
   const detail = getErrorDetail(error)
 
diff --git a/site/src/xServices/auth/authXService.ts b/site/src/xServices/auth/authXService.ts
@@ -331,7 +331,7 @@ export const authMachine =
             onError: [
               {
                 actions: "assignError",
-                target: "signedIn",
+                target: "signedOut",
               },
             ],
           },

Original file line number	Diff line number	Diff line change
`@@ -331,7 +331,7 @@ export const authMachine =`
`331`	`331`	`onError: [`
`332`	`332`	`{`
`333`	`333`	`actions: "assignError",`
`334`		`- target: "signedIn",`
	`334`	`+ target: "signedOut",`
`335`	`335`	`},`
`336`	`336`	`],`
`337`	`337`	`},`