Sending data back from node server back to react frontend

Question

I'm trying to create a login for a homepage with react and node, with user details from a hard-coded database. The node backend recognises the json password and email, but I can't get the code to send the data back to the frontend to sign in.

I've tested the backend with postman to ensure I can fetch the data.

node server:

    app.post('/signin', (req, res) => { 
      if(req.body.email === database.users[0].email &&
        req.body.password === database.users[0].password) {

        res.json('success');  
      }
      else {
        res.status(400).json('error logging in');
      }
    })

react

    class Signin extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       signInEmail: '',
       signInPassword: ''
      }
    }

    onSubmitSignIn = () => {
      fetch('http://localhost:5000/signin', {
        method: 'post',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
        email: this.state.signInEmail,
        password: this.state.signInPassword
      })
     })
      .then(user => {
        if (user.id) {
          this.props.loadUser(user)
          this.props.onRouteChange('home');
        }
      })
     }

database:

    const database = {
      users: [
        {
          id: '123',
          name: 'andrew',
          email: 'andrew@outlook',
          password: 'p',
          entries: 0,
          joined: new Date()
        },
        {
          id: '124',
          name: 'sally',
          email:' sally@outlook',
          password: 'bananas',
          entries: 0,
          joined: new Date()
        },
      ],
    }

It works when I remove the .then(user =>) call and go straight to this.props.onRouteChange('home'), but remains on the signin page otherwise. It's driving me nuts, any help appreciated.

Björn Heiß · Accepted Answer · 2019-01-17 16:31:36Z

1

Welcome to stackoverflow!

I think you're not sending the correct data back to the frontend or checking for the wrong data.

Your nodeJS application sends either

res.json('success');

or

res.status(400).json('error logging in');

So no matter what you're sending back a string. But on the frontend you're checking for an id attribute on the response:

.then(user => {
  if (user.id) {
    this.props.loadUser(user)
    this.props.onRouteChange('home');
  }
})

Your user is a response object you get after fetch. If you rename the user to response and call response.json() you can add another .then(json => {...} where you can check your json object to be one of the strings you send by your nodeJS backend.

answered Jan 17, 2019 at 16:31

Björn Heiß

1,7281 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Over a year ago

HI thanks for the welcome, been using stack for two years as a reader and it's got me out of a tight corner many times. And thanks for the reply too. You're right. I changed it to: if(response.json === 'success') { this.props.onRouteChange('home'); } I just got so deeply buried in it that i wasn't reasoning it through and needed someone else to point it out. Unfortunately, the problem of not being able to sign in persists - to do with Cors I think, which is another question all together

Björn Heiß Over a year ago

Always happy to help. Well I think if the login problem persists you really should create a new question which contains your code of this.props.loadUser(user) and code related to that.

Collectives™ on Stack Overflow

Sending data back from node server back to react frontend

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related