oh yeah, this works super nice

aslilac · aslilac · commit 26ff66a3a1f5 · 2023-08-17T15:45:44.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -5,7 +5,6 @@ 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
@@ -14,20 +13,6 @@ axios.defaults.validateStatus = (status) => {
   return (status >= 200 && status < 300) || status === 304
 }
 
-// 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}`)
-//     }
-
-//     // 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,
   // the GoLang webserver generates a random cookie with a new token for each
diff --git a/site/src/components/RequireAuth/RequireAuth.tsx b/site/src/components/RequireAuth/RequireAuth.tsx
@@ -1,19 +1,41 @@
+import axios from "axios"
 import { useAuth } from "components/AuthProvider/AuthProvider"
-import { FC } from "react"
+import { FC, useEffect } from "react"
 import { Outlet, Navigate, useLocation } from "react-router-dom"
 import { embedRedirect } from "../../utils/redirect"
 import { FullScreenLoader } from "../Loader/FullScreenLoader"
 import { DashboardProvider } from "components/Dashboard/DashboardProvider"
 import { ProxyProvider } from "contexts/ProxyContext"
 
 export const RequireAuth: FC = () => {
-  const [authState] = useAuth()
+  const [authState, authSend] = useAuth()
   const location = useLocation()
   const isHomePage = location.pathname === "/"
   const navigateTo = isHomePage
     ? "/login"
     : embedRedirect(`${location.pathname}${location.search}`)
 
+  useEffect(() => {
+    const interceptorHandle = axios.interceptors.response.use(
+      (okResponse) => okResponse,
+      (error) => {
+        // 401 Unauthorized
+        // If we encountered an authentication error, then our token is probably
+        // invalid and we should update the auth state to reflect that.
+        if (error.response.status === 401) {
+          authSend("SIGN_OUT")
+        }
+
+        // Otherwise, pass the response through so that it can be displayed in the UI
+        return Promise.reject(error)
+      },
+    )
+
+    return () => {
+      axios.interceptors.response.eject(interceptorHandle)
+    }
+  }, [])
+
   if (authState.matches("signedOut")) {
     return <Navigate to={navigateTo} state={{ isRedirect: !isHomePage }} />
   } else if (authState.matches("configuringTheFirstUser")) {
