Merge pull request #1307 from scm-manager/bugfix/reset_redux_state_on_expired_token

Reset redux state on next action if token is expired

scm-ui/ui-components/src/apiclient.ts

@@ -155,9 +155,19 @@ export function createUrlWithIdentifiers(url: string): string {
   return createUrl(url) + "?X-SCM-Client=WUI&X-SCM-Session-ID=" + sessionId;
 }
 
+type ErrorListener = (error: Error) => void;
+
 class ApiClient {
+  constructor() {
+    this.notifyAndRethrow = this.notifyAndRethrow.bind(this);
+  }
+
+  errorListeners: ErrorListener[] = [];
+
   get(url: string): Promise<Response> {
-    return fetch(createUrl(url), applyFetchOptions({})).then(handleFailure);
+    return fetch(createUrl(url), applyFetchOptions({}))
+      .then(handleFailure)
+      .catch(this.notifyAndRethrow);
   }
 
   post(url: string, payload?: any, contentType = "application/json", additionalHeaders: Record<string, string> = {}) {
@@ -193,7 +203,9 @@ class ApiClient {
       method: "HEAD"
     };
     options = applyFetchOptions(options);
-    return fetch(createUrl(url), options).then(handleFailure);
+    return fetch(createUrl(url), options)
+      .then(handleFailure)
+      .catch(this.notifyAndRethrow);
   }
 
   delete(url: string): Promise<Response> {
@@ -201,7 +213,9 @@ class ApiClient {
       method: "DELETE"
     };
     options = applyFetchOptions(options);
-    return fetch(createUrl(url), options).then(handleFailure);
+    return fetch(createUrl(url), options)
+      .then(handleFailure)
+      .catch(this.notifyAndRethrow);
   }
 
   httpRequestWithJSONBody(
@@ -245,7 +259,9 @@ class ApiClient {
       options.headers["Content-Type"] = contentType;
     }
 
-    return fetch(createUrl(url), options).then(handleFailure);
+    return fetch(createUrl(url), options)
+      .then(handleFailure)
+      .catch(this.notifyAndRethrow);
   }
 
   subscribe(url: string, argument: SubscriptionArgument): Cancel {
@@ -276,6 +292,15 @@ class ApiClient {
 
     return () => es.close();
   }
+
+  onError(errorListener: ErrorListener) {
+    this.errorListeners.push(errorListener);
+  }
+
+  private notifyAndRethrow(error: Error): never {
+    this.errorListeners.forEach(errorListener => errorListener(error));
+    throw error;
+  }
 }
 
 export const apiClient = new ApiClient();

scm-ui/ui-webapp/package.json

@@ -39,6 +39,7 @@
     "@types/react-dom": "^16.9.2",
     "@types/react-redux": "5.0.7",
     "@types/react-router-dom": "^5.1.0",
+    "@types/redux-logger": "^3.0.8",
     "@types/styled-components": "^5.1.0",
     "@types/systemjs": "^0.20.6",
     "fetch-mock": "^7.5.1",

scm-ui/ui-webapp/src/containers/Index.tsx

@@ -64,6 +64,15 @@ class Index extends Component<Props, State> {
     this.props.fetchIndexResources();
   }
 
+  componentDidUpdate() {
+    const { indexResources, loading, error } = this.props;
+    const { pluginsLoaded } = this.state;
+    if (!indexResources && !loading && !error && pluginsLoaded) {
+      this.props.fetchIndexResources();
+      this.setState({ pluginsLoaded: false });
+    }
+  }
+
   pluginLoaderCallback = () => {
     this.setState({
       pluginsLoaded: true

scm-ui/ui-webapp/src/createReduxStore.ts

@@ -24,14 +24,14 @@
 
 import thunk from "redux-thunk";
 import logger from "redux-logger";
-import { applyMiddleware, combineReducers, compose, createStore } from "redux";
+import { AnyAction, applyMiddleware, combineReducers, compose, createStore } from "redux";
 import users from "./users/modules/users";
 import repos from "./repos/modules/repos";
 import repositoryTypes from "./repos/modules/repositoryTypes";
 import changesets from "./repos/modules/changesets";
 import sources from "./repos/sources/modules/sources";
 import groups from "./groups/modules/groups";
-import auth from "./modules/auth";
+import auth, { isAuthenticated } from "./modules/auth";
 import pending from "./modules/pending";
 import failure from "./modules/failure";
 import permissions from "./repos/permissions/modules/permissions";
@@ -40,13 +40,16 @@ import roles from "./admin/roles/modules/roles";
 import namespaceStrategies from "./admin/modules/namespaceStrategies";
 import indexResources from "./modules/indexResource";
 import plugins from "./admin/plugins/modules/plugins";
-
+import { apiClient, UnauthorizedError } from "@scm-manager/ui-components";
 import branches from "./repos/branches/modules/branches";
 
+const EMPTY_STATE = {} as any;
+
 function createReduxStore() {
+  // @ts-ignore __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ is defined by react dev tools
   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-  const reducer = combineReducers({
+  const appReducer = combineReducers({
     pending,
     failure,
     indexResources,
@@ -65,7 +68,39 @@ function createReduxStore() {
     plugins
   });
 
-  return createStore(reducer, composeEnhancers(applyMiddleware(thunk, logger)));
+  // We assume that an UnauthorizedError means that the access token is expired.
+  // If the token is expired we want to show an error with the login link.
+  // This error should be displayed with the state (e.g. navigation) of the previous logged in user.
+  // But if the user navigates away, we want to reset the state to an anonymous one.
+
+  const reducer = (state: any, action: AnyAction) => {
+    // Reset the state if the token is expired and a new action is dispatched (e.g. navigation).
+    // We exclude failures, because the fetch which had triggered the unauthorized error
+    // will likely end with an failure action.
+    if (state.tokenExpired && !action.type.includes("FAILURE")) {
+      // reset state by passing an empty state down to the app reducer
+      // we do not use the captured action, because the data is derived from the old state
+      return appReducer(EMPTY_STATE, { type: "_" });
+    }
+
+    // If the user is authenticated and response is an unauthorized error,
+    // we assume that the token is expired.
+    if (action.type === "API_CLIENT_UNAUTHORIZED" && isAuthenticated(state)) {
+      return { ...state, tokenExpired: true };
+    }
+
+    // Keep the tokenExpired after calling appReducer,
+    // this is required because the appReducer would remove any unknown property.
+    return { ...appReducer(state, action), tokenExpired: state.tokenExpired };
+  };
+
+  const store = createStore(reducer, EMPTY_STATE, composeEnhancers(applyMiddleware(thunk, logger)));
+  apiClient.onError(error => {
+    if (error instanceof UnauthorizedError) {
+      store.dispatch({ type: "API_CLIENT_UNAUTHORIZED", error });
+    }
+  });
+  return store;
 }
 
 export default createReduxStore;

yarn.lock

@@ -3397,6 +3397,13 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/redux-logger@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.8.tgz#1fb6d26917bb198792bb1cf57feb31cae1532c5d"
+  integrity sha512-zM+cxiSw6nZtRbxpVp9SE3x/X77Z7e7YAfHD1NkxJyJbAGSXJGF0E9aqajZfPOa/sTYnuwutmlCldveExuCeLw==
+  dependencies:
+    redux "^4.0.0"
+
 "@types/sinonjs__fake-timers@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"