fix: [M3-8711] - Authentication Race Condition (#12399)

* prevent multiple calls to `redirectToLogin`

* fix initial app load redirect

* simplify things to prevent bugs

---------

Co-authored-by: Banks Nussman <[email protected]>

Author: bnussman-akamai

packages/manager/src/OAuth/utils.ts

@@ -1,8 +1,6 @@
 /* eslint-disable no-console */
-import { useLocation } from 'react-router-dom';
-
 import { CLIENT_ID, LOGIN_ROOT } from 'src/constants';
-import { redirectToLogin, revokeToken } from 'src/session';
+import { revokeToken } from 'src/session';
 import {
   clearUserInput,
   getEnvLocalStorageOverrides,
@@ -63,24 +61,6 @@ export function getIsLoggedInAsCustomer() {
   return token.toLowerCase().includes('admin');
 }
 
-export function useOAuth() {
-  const location = useLocation();
-  const token = storage.authentication.token.get();
-
-  const isPendingAuthentication =
-    location.pathname.includes('/oauth/callback') ||
-    location.pathname.includes('/admin/callback') ||
-    window.location.pathname.includes('/oauth/callback') ||
-    window.location.pathname.includes('/admin/callback');
-
-  // If no token is stored and we are not in the process of authentication, redirect to login.
-  if (!token && !isPendingAuthentication) {
-    redirectToLogin(window.location.pathname, window.location.search);
-  }
-
-  return { isPendingAuthentication };
-}
-
 function getSafeLoginURL() {
   const localStorageOverrides = getEnvLocalStorageOverrides();
 

packages/manager/src/index.tsx

@@ -18,7 +18,6 @@ import './index.css';
 import { ENABLE_DEV_TOOLS } from './constants';
 import { Logout } from './layouts/Logout';
 import { LinodeThemeWrapper } from './LinodeThemeWrapper';
-import { useOAuth } from './OAuth/utils';
 
 const Lish = React.lazy(() => import('src/features/Lish'));
 
@@ -40,38 +39,6 @@ const store = storeFactory();
 
 setupInterceptors(store);
 
-const Routes = () => {
-  const { isPendingAuthentication } = useOAuth();
-
-  if (isPendingAuthentication) {
-    return (
-      <React.Suspense fallback={<SplashScreen />}>
-        <Switch>
-          <Route component={OAuthCallbackPage} exact path="/oauth/callback" />
-          <Route
-            component={LoginAsCustomerCallback}
-            exact
-            path="/admin/callback"
-          />
-          <Route component={Logout} exact path="/logout" />
-          <Route component={CancelLanding} exact path="/cancel" />
-        </Switch>
-      </React.Suspense>
-    );
-  }
-
-  return (
-    <React.Suspense fallback={<SplashScreen />}>
-      <Switch>
-        <Route component={Logout} exact path="/logout" />
-        <Route component={CancelLanding} exact path="/cancel" />
-        <Route component={Lish} path="/linodes/:linodeId/lish/:type" />
-        <Route component={App} />
-      </Switch>
-    </React.Suspense>
-  );
-};
-
 const Main = () => {
   if (!navigator.cookieEnabled) {
     return <CookieWarning />;
@@ -90,7 +57,29 @@ const Main = () => {
                 hideIconVariant={false}
                 maxSnack={3}
               >
-                <Routes />
+                <React.Suspense fallback={<SplashScreen />}>
+                  <Switch>
+                    <Route
+                      component={OAuthCallbackPage}
+                      exact
+                      path="/oauth/callback"
+                    />
+                    <Route
+                      component={LoginAsCustomerCallback}
+                      exact
+                      path="/admin/callback"
+                    />
+                    <Route component={Logout} exact path="/logout" />
+                    <Route component={CancelLanding} exact path="/cancel" />
+                    <Route component={Logout} exact path="/logout" />
+                    <Route component={CancelLanding} exact path="/cancel" />
+                    <Route
+                      component={Lish}
+                      path="/linodes/:linodeId/lish/:type"
+                    />
+                    <Route component={App} />
+                  </Switch>
+                </React.Suspense>
               </Snackbar>
             </Router>
           </React.Suspense>

packages/manager/src/request.tsx

@@ -26,15 +26,26 @@ const handleSuccess: <T extends AxiosResponse<any>>(response: T) => T | T = (
 // All errors returned by the actual Linode API are in this shape.
 export type LinodeError = { errors: APIError[] };
 
+/**
+ * Exists to prevent the async `redirectToLogin` function from being called many times
+ * when many 401 API errors are handled at the same time.
+ *
+ * Without this, `redirectToLogin` may be invoked many times before navigation to login actually happens,
+ * which results in the nonce and code verifier being re-generated, leading to authentication race conditions.
+ */
+let isRedirectingToLogin = false;
+
 export const handleError = (
   error: AxiosError<LinodeError>,
   store: ApplicationStore
 ) => {
   if (
     error.response &&
     error.response.status === 401 &&
-    !store.getState().pendingUpload
+    !store.getState().pendingUpload &&
+    !isRedirectingToLogin
   ) {
+    isRedirectingToLogin = true;
     clearAuthDataFromLocalStorage();
     redirectToLogin(window.location.pathname, window.location.search);
   }