Using React with Meteor: how to handle Meteor.user() after logging out

Question

I have a user profile page in my Meteor app that is built using React components. Because it uses Meteor.user() to create one of the variables, I receive an error whenever I log out of the app (but only if I have previously visited the profile page in the current session). It does make sense to me though because without a current user, the Meteor.user() is no longer available, so it will error out with a "cannot read 'support' of undefined" message.

AccountList = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        var user;
        var supportingUserId = Meteor.user().support.supportingUserId;
        supportingUserId ? user = Meteor.users.findOne({_id:  supportingUserId}) : user = Meteor.user();
        return {
            accounts: Accounts.find({owner: user._id}).fetch()
        }
    }...

Initially, I attempted changing the above code block to wrap the offending code in an if statement like so:

AccountList = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        var user;
        if (Meteor.user()){
            var supportingUserId = Meteor.user().support.supportingUserId;
            supportingUserId ? user = Meteor.users.findOne({_id:  supportingUserId}) : user = Meteor.user();
            return {
                accounts: Accounts.find({owner: user._id}).fetch()
            }
        }
        else{
            return {};
        }
    }...

But I'm met with another error: "Cannot read property 'length' of undefined" which is caused by accounts not being defined (triggered from another render method that requires 'accounts' further down). I ended up taking the same approach and adding an additional if statement but was met with another similar error. My question is whether it's possible to resolve this without having to wrap half the application in an "if (Meteor.user())" statement. Or if there's possibly a way to flush the app from remembering the loaded React components on logout?

Answer 1

Try

return {accounts: []};

instead of

return {};

and never assume, that accounts.length > 0 .

Answer 2

Michel Floyd's way is correct!

You can do something like this in your router:

FlowRouter.route('/profile/edit', {
  name: 'profile.edit',
  triggersEnter: [function(context, redirect) {
    if(!Meteor.user()){
      console.log('User not logged in. Redirecting...');
      redirect('login');
    }
  }],
  action(params) {
    mount(FullLayout, {
      content: <ProfileEditComposer />
    });
  }
});

(I'm using FlowRouter here in my Meteor/React app, if you use another type of Router, code will be a bit different, however, should be the same idea I believe)

The above lines of code prevent not-logged-in users from going to edit profile page and redirect them to login page. By this way, you don't need to change your code in Profile-Edit component or in all other components, which may create lots of errors when those component try to access and loop values through the user object - undefined in this case.