Redux oidc callback called twice

Question

My React container looks like this:

class App extends React.Component {
  componentDidMount() {       
    if (this.props.location && this.props.location.pathname != '/callback') {      
      userManager.getUser().then(response => {        
        if (!response || response.expired) {           
          userManager.signinRedirect();
        }  
        else{
          this.props.dispatch(userFound(response));
        }
      });
    }
  }
  render() {  
    return (
      <div>
        <Switch>          
          <PrivateRoute exact path="/" component={HomePage} user={this.props.user} />
          <PrivateRoute exact path="/dashboard" component={Dashboard} user={this.props.user} />
          <Route exact path="/callback" component={CallbackPage} />
          <Route component={NotFoundPage} />          
        </Switch>
      </div>
    );
  }
}

Callback component looks like this:

class CallbackPage extends React.Component {
  render() {
    // just redirect to '/' in both cases
    return (
      <CallbackComponent
        userManager={userManager}
        successCallback={() => this.props.dispatch(push("/"))}
        errorCallback={error => {
          this.props.dispatch(push("/"));
          console.error(error);
        }}
        >
        <div>Redirecting...</div>
      </CallbackComponent>
    );
  }
}

My Privateroute looks like this:

const PrivateRoute = ({ component: Component, user, ...rest }) => (  
  <Route {...rest} render={props => (
    user ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/notFoundPage',
        state: { from: props.location }
        }}
      />
    )    
  )} />
);

export default PrivateRoute; 

My store looks like:

export default function configureStore(initialState = {}, history) {

  const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),
  ];
  const enhancers = [
    applyMiddleware(...middlewares),
  ];
  const composeEnhancers =
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // TODO Try to remove when `react-router-redux` is out of beta, LOCATION_CHANGE should not be fired more than once after hot reloading
        // Prevent recomputing reducers for `replaceReducer`
        shouldHotReload: false,
      })
      : compose;
  const store = createStore(
    createReducer(),
    fromJS(initialState),
    composeEnhancers(...enhancers)
  );
  store.runSaga = sagaMiddleware.run;
  store.injectedReducers = {}; 
  store.injectedSagas = {}; 
  loadUser(store, userManager);
  return store;
}

My issue is: the callback component is called twice. i can't find where it trigger from? first time, it goes to the success function as expected, then second time, it will go to the error function. Then page frozen and the URL shows in browser is callback link. I can't find why this callback is running twice? Can someone please help me with this. i hope you understood the issue.

this code is based on the redux-oidc example. Please click the following link. Redux-oidc example

Answer 1

Your router and redux store config looks fine. But you don't need to call getUser in your componentWillMount. Your app should be configured in such a way, that it only renders the routes when a valid user is present.

A possible solution would be to use render instead of componentWillMount like this:

render() {
  const routes = (
    <Switch>          
      <Route exact path="/" component={HomePage} user={this.props.user} />
      <Route exact path="/dashboard" component={Dashboard} user={this.props.user} />
      <Route exact path="/callback" component={CallbackPage} />
      <Route component={NotFoundPage} />          
    </Switch>
  );

  const loginPage = <LoginPage />; // <-- create a dedicated login page component where signinRedirect is called

  const isValidUserPresent = this.props.user && !this.props.user.expired;
  const isCallbackRouteRequested = this.props.location.pathname === '/callback';
  const shouldRenderRoutes = isValidUserPresent || isCallbackRouteRequested;

  return shouldRenderRoutes ? routes : loginPage;            
}