React + flow integration - Auth.user small delay problem

[konpa]

Hello,

I implemented J-Toker in my frontend app using React and flow (Rails API backend), in a similar way to this project [react-flux-jwt-authentication-sample]https://github.com/auth0/react-flux-jwt-authentication-sample/tree/gh-pages/src

The dashboard should only be accessed by logged in user. In order to do this, I have my Dashboard component wrapped in an AuthenticatedComponent:

Dashobard.jsx

export default AuthenticatedComponent(Dashobard);

Here is my AuthenticatedComponent.jsx:

export default (ComposedComponent) => {
  return class AuthenticatedComponent extends React.Component {

    static willTransitionTo(transition) {
      if (!LoginStore.isLoggedIn()) {
        transition.redirect('/login/', {}, {'nextPath' : transition.path});
      }
    }

   ...

Finally here is my LoginStore.jsx code:

class LoginStore extends BaseStore {

  ...

  isLoggedIn() {
    return Auth.user.signedIn;
  }
}

Everything works great except when I manually refresh the page. In this case, the Auth.user.signedIn return undefinedeven if the user is logged in.

Could someone help me on this?

Thanks in advance.

[konpa]

In order to understand, I'm trying to replicate your demo but I don't get how you get the user's infos updated after the login and how the props.useror state.user are related to the propsdetails (email, color, etc.) that are displayed in your app...

[rubydog]

@konpa Was anybody able to solve this?

[waleedarshad]

I am also facing same issue

        const isAauthenticated = (nextState, replace) => {

            console.log("isAuthenticated",Auth.user); // got object with all information email signedIn
            console.log("isAuthenticated",Auth.user.email); // got undefined why?

        if (Auth.user.signedIn)  { replace({ pathname: '/dashboard' }); }
         };

[waleedarshad]

@konpa what solution works for you?