redux-auth-wrapper: [bug] [0.7.0] Not redirecting after predicate returns false

Issue

When my auth wrapper returns false from predicate the redux-auth-wrapper does not redirect to /login rather presents a blank page (not rendering the child routes).

I have logged the results of predicate to the terminal and it is returning false after my logout action has been executed:

Auth Wrapper:

export const IsSuperUser = UserAuthWrapper({
  wrapperDisplayName: 'IsSuperUser',
  authSelector: state => userSelector(state),
  predicate: user => {
    console.log('predicate', isSuperUser(user) && isLoggedIn(user)); // returns false
    return isSuperUser(user) && isLoggedIn(user);
  },
});

Routes:

const Authenticated = IsSuperUser((props) => props.children);

export default () => {

  return (
    <Route component={Authenticated}>
      <Route path="/admin" component={Root}>
        <IndexRoute component={Dashboard} />
        <Route path="/admin/jobs(/:status)" component={Jobs} />
        <Route path="/admin/job/create" component={CreateJob} />
        <Route path="/admin/job/:jobId/update" component={UpdateJob} />
        <Route path="/admin/organisations" component={Organisations} />
        <Route path="/admin/organisation/create" component={CreateOrganisation} />
        <Route path="/admin/purchase" component={Purchase} />
        <Route path="/admin/invoices" component={Invoices} />
      </Route>
    </Route>
  );
};

environment

>> node --version
v6.3.1
>> npm --version
3.10.3

    "redux": "^3.5.2",
    "react-router": "2.5.2",
    "react-router-redux": "^4.0.5",
    "redux-auth-wrapper": "^0.7.0",

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 29 (12 by maintainers)

Most upvoted comments

Yeah, that looks fine… I thought there might be a chance you were using createHistory or something inside both your store config and in the Router setup which would create 2 history objects and could definitely cause what you are seeing.

But using the browserHistory singleton this way should be fine. Back to the drawing board 😄

mjrussell on Oct 12, 2016

Hi,

I saw the exact same issue. The problem in my case was that I had not included the routerMiddleware in my store.

https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

Adding in the middleware immediately fixed the issue.

Hope it helps 😃

Chris

codereviewvideos on Oct 7, 2016

I moved to localStorage…

andrewmclagan on Apr 19, 2017

  predicate: user => {
    if (isLoggedIn(user) === false) {
      window.location.reload();
    }
    return isLoggedIn(user);
  },

I think my issue is isLoggedIn looks for a cookie, that could be the issue as its not a pure function.

function isLoggedIn(user) {
  return (user !== null && getAuthCookie() !== false);
}

andrewmclagan on Dec 8, 2016

@andrewmclagan sounds good, if at some point you or one of your devs wants to do a screen sharing/debugging session Im happy to do that as well

mjrussell on Nov 6, 2016

@Blackclaws that is a pretty different use case, can you open another issue for this question?

mjrussell on Nov 5, 2016

Hmm I don’t believe that there is any issue with the authSelector returning and object and the predicate returning false. The examples do that exact thing for the admin wrappers and the default predicate returns false for an empty object.

It sounds like to me that your predicate is working properly and the wrapper is rendering null since it expects to be redirected immediately but something is not setup properly in your routes or with react-router/react-router-redux and that prevents the redirect from occurring. You could verify this by using the new FailureComponent to display an alternative component when the predicate returns false. This will cause the wrapper to not redirect but can isolate the problem to your router/redirection setup.

Something like:

const testFailure = () => <h1>The predicate is working properly</h1>

UserAuthWrapper({
...
FailureComponent: testFailure
...
})

mjrussell on Sep 14, 2016