Meteor.user() And Localstorage.getitem('meteor.userid') Return Null

Meteor.user() and localStorage.getItem('Meteor.userId') return null untill page is refreshed I am using value from Meteor.user() to try and change state and hence re-render the com

Solution 1:

You need to use a reactive data source to have access to the Meteor.user() object in a component. The best way to do it is to wrap (either the entire app) or just a specific component in a data container that passes the Meteor.user() object as props to the component.

Example using createContainer:

import { Meteor } from'meteor/meteor';
import { createContainer } from'meteor/react-meteor-data';
import { Header } from'/imports/ui/components/Header';

exportdefaultcreateContainer(() => {
    const loading = !Meteor.user();
    const user = Meteor.user();
    return { loading, user };
}, Header);

Then in Header:

exportdefaultclassHeaderextendsReact.Component {
   constructor(props){
       super(props);
       this.state = { loggedIn: !!user}
       thisComponent = this;
   }

   onSubmit(e){
       e.preventDefault();
       let el = $(e.target);
       let email = el.find('#email').val();
       let password = el.find('#password').val();
       let confirmPassword = el.find('#confirmPassword').val();
       // Login userMeteor.loginWithPassword(email, password, err => {
           if(err){
               Materialize.toast(err.reason, 4000);
           }else {
               Materialize.toast('Success loging in', 4000);
              //change state just to cause a rerender
               thisComponent.setState({ loggedIn: true })
           }
      });
   }

  render() {
      { !!user ? <Redirectto='/dashboard' /> : <LoginComponent /> }
  }
}

Solution 2:

Meteor.user() returns wrong because of asynchronous issue!

(Meteor.userId() just returns an ID, which is faster than Meteor.user() - returning an object)

Therefore, you may use Komposer to wrap your component, which is also standard in Meteor/React application (and give the page enough time to load Meteor.user() object and pass it into your Header component as a props):

Create HeaderComposer file:

importReactfrom'react';
import {composeWithTracker} from'react-komposer';
// also import your Header here..functioncomposer(props, onData) {
  const user = Meteor.user();
  onData(null, {user})
};

exportdefaultcomposeWithTracker(composer)(Header);

and in your Header file:

exportdefaultclassHeaderextendsReact.Component {
  constructor(props){
    super(props);
    this.state = {loggedIn: this.props.user !== null}// false if no user //is logged in//save the component context to avoid scope issues
    thisComponent = this;
 }

 onSubmit(e){
    e.preventDefault();
    let el = $(e.target);
    let email = el.find('#email').val();
    let password = el.find('#password').val();
    let confirmPassword = el.find('#confirmPassword').val();

    // Login userMeteor.loginWithPassword(email, password, err => {
      if (err) {
        Materialize.toast(err.reason, 4000);
      } else {
        Materialize.toast('Success loging in', 4000);
        //change state just to cause a rerender
        thisComponent.setState({ loggedIn: true })
      }
    });
  }

  render() {
    //if user is logged inif(this.props.user) {
      return<Redirectto='/dashboard' />;
    } else {
      return<LoginComponent />;   
    }
  }
}

and of course, in another component file, where you render your Header component, feel free to use HeaderComposer instead