fix: perform login redirect automatically (#137)

flyteorg · Jan 12, 2021 · 9f09aa2 · 9f09aa2
1 parent 0e18623
commit 9f09aa2
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 96 deletions.
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -5,7 +5,6 @@ import { debug, debugPrefix } from 'common/log';
 import { APIContext, useAPIState } from 'components/data/apiContext';
 import { QueryAuthorizationObserver } from 'components/data/QueryAuthorizationObserver';
 import { createQueryClient } from 'components/data/queryCache';
-import { LoginExpiredHandler } from 'components/Errors/LoginExpiredHandler';
 import { SystemStatusBanner } from 'components/Notifications/SystemStatusBanner';
 import { skeletonColor, skeletonHighlightColor } from 'components/Theme';
 import { muiTheme } from 'components/Theme/muiTheme';
@@ -50,7 +49,6 @@ export const AppComponent: React.StatelessComponent<{}> = () => {
  <ErrorBoundary fixed={true}>
  <NavBarRouter />
  <ApplicationRouter />
- <LoginExpiredHandler />
  </ErrorBoundary>
  </Router>
  <SystemStatusBanner />

diff --git a/src/components/Errors/LoginExpiredHandler.tsx b/src/components/Errors/LoginExpiredHandler.tsx
diff --git a/src/components/Errors/test/LoginExpiredHandler.test.tsx b/src/components/Errors/test/LoginExpiredHandler.test.tsx
diff --git a/src/components/data/QueryAuthorizationObserver.tsx b/src/components/data/QueryAuthorizationObserver.tsx
@@ -19,8 +19,7 @@ export const QueryAuthorizationObserver: React.FC = () => {
  if (query.state.error instanceof NotAuthorizedError) {
  // Stop all in-progress and future requests
  onlineManager.setOnline(false);
- // TODO: https://github.com/lyft/flyte/issues/525
- // Notify user of unauthorized status
+ // Trigger auth flow
  apiContext.loginStatus.setExpired(true);
  }
  }

diff --git a/src/components/data/apiContext.ts b/src/components/data/apiContext.ts
@@ -1,3 +1,4 @@
+import { getLoginUrl } from 'models/AdminEntity/utils';
 import * as CommonAPI from 'models/Common/api';
 import * as ExecutionAPI from 'models/Execution/api';
 import * as LaunchAPI from 'models/Launch/api';
@@ -30,7 +31,9 @@ export const defaultAPIContextValue = {
  ...WorkflowAPI,
  loginStatus: {
  expired: false,
- setExpired: () => {}
+ setExpired: () => {
+ // do nothing
+ }
  }
 };
 
@@ -44,6 +47,13 @@ export const APIContext = React.createContext<APIContextValue>(
 
 function useLoginStatus(): LoginStatus {
  const [expired, setExpired] = React.useState(false);
+
+ // Whenever we detect expired credentials, trigger a login redirect automatically
+ React.useEffect(() => {
+ if (expired) {
+ window.location.href = getLoginUrl();
+ }
+ }, [expired]);
  return {
  expired,
  setExpired

diff --git a/src/components/hooks/useFetchableData.ts b/src/components/hooks/useFetchableData.ts
@@ -81,6 +81,7 @@ function createFetchFn<T extends object, DataType>({
  return mergedValue;
  } catch (error) {
  if (error instanceof NotAuthorizedError) {
+ // Trigger auth flow
  apiContext.loginStatus.setExpired(true);
  }
  return Promise.reject(