React passport together - node.js

Question

Hi I am creating my app using React and Node (express). It's time for building an authention using passport. Using ejs or other template language it looked very easy. What is the best way using React Components?
Using passport we are getting true of false {req.user} for example. I would like to send that boolean to component using react dom server, and pass it to the object like props, and transofrm that props to state and pass to state object.
What do You think about it? Is it safely ?
Then we can use condition like:
{this.state.signup ? this.welcome() : this.signupButton()}
I do not know how to do it differently. Thanks for help.

Answer 1

I am not an expert in react but i would say what you are doing is correct, since react provide communication between component and container is by using props and state.
The extra mile which we get by your way is once the user logout we can simply call passport logout and change the login state to false, react will manage changing ui.
this.setState({login:false});

Answer 2

What you are doing is correct. But make sure you modify the state in the global component (or) the Main component.
The main thing about redux state is, it resets each and every time the browser gets refreshed. so make a conditional case in the global statement and change the state.
I recommend you to use react with redux. when used with redux, all the state is a global state. you dont have to worry about the state changes.
for example (token based authentication) :
When i get the token, i save it in my browser localstorage.
localStorage.setItem('token', response.data.token);
so i have to check the token from the global component.
const token = localStorage.getItem('token');
if (token) { //redux style
store.dispatch({ type: AUTH_USER }); //dispatch is setState() in react & type is something like what action you are creating.
} //do this in your main component before you render DOM
if you dont use redux, you can use something like this
const token = localStorage.getItem('token');
if (token) { //redux style
this.setState({ /*auth: true*/ });
} //do this in your main component before you render DOM

Answer 3

Here is a setup using passport local, this is how I have it setup in my app.
// server route
app.post('/api/signin', passport.authenticate('local', { session:
true, failureRedirect: '/login' }), Authentication.signin);
//Authentication.signin
exports.signin = function(req, res, next) {
//user has already had their email and password authed
// we just need to give them a token
res.send({ token: tokenForUser(req.user) });
};
// Generates token for user uses jwt-simple node module
function tokenForUser(user) {
const timestamp = new Date().getTime();
return jwt.encode({ sub: user, iat: timestamp }, config.secret);
}
//then on front end in App.js
const token = localStorage.getItem('token');
if (token) {
store.dispatch({ type: types.AUTH_USER });
}