React + Passport.js

Question

TL;DR I'm making a MERN app and want to access the passport user from React. How?

I'm trying to make a simple to-do app with the MERN stack and can't get user auth down. I'm using React on the front end with a proxy to an express api. I want to grab the req.user object from React so I can update the navbar based on whether the user is logged in or not. When I post to /api/login I can log the user object from the api route.

React login form:

class Login extends Component {
//..
  async login(event) {
    event.preventDefault();
    await api.login({
      username: this.state.username,
      password: this.state.password
    });
    this.setState({
      username: '',
      password: ''
    });
  }
//..
}

Axios:

export async function login({username, password}) {
  axios.post('/api/login', {username, password});
}

Server:

router.post('/login', passport.authenticate('local'), helpers.login);

exports.login = (req, res) => {
  res.json({ message: 'You have been logged in!' });
};

From this exports.login function I can console.log(req.user) but when I try to access the user from any other route it is undefined.

Here's what I want to do:

React:

class App extends Component {
//..
  componentDidMount() {
    this.isLoggedIn();
  }

  componentDidUpdate() {
    this.isLoggedIn();
  }

  async isLoggedIn() {
    const user = await api.isLoggedIn(); 
  }
//..
}

Which will make a request that returns the user object.

I somewhat understand how the proxy may get in the way and how the session works but the pieces haven't clicked yet. Hoping someone can help me out.

EDIT So um... the problem just kinda went away. I'll update if something breaks again.

Answer 1

Possible duplicate here But to check out the accepted answer by @Molda there was a link to the Github Repository that gave a very good example of how to handle the authentication on the client. You will have to change some of the token authentication to the user that is returned from the server when you login.

Basically you need to store the user somewhere on the client like the browsers local storage.