title: React Js : Unable to login until page gets refresh manually
body: <p>As a beginner to the React Js I'm trying simple projects for hands-on experience and to learn as well! so, in the same way I've created one login portal with react js and WAMP server by watching YouTube tutorial
  in the middle I went through some errors but somehow I managed and get them off but after completing the project when I'm trying to login with the credentials which I've given in database the response and all was clear but <strong>the page doesn't redirect to welcome page after clicking on login button</strong> instead it redirects to welcome page after refreshing manually. I couldn't identify the mistake in my code.</p>
  <p><strong>LoginForm.js</strong></p>
  <pre><code>import React from 'react';
  import InputField from './InputField';
  import SubmitButton from './SubmitButton';
  import UserStore from './stores/UserStore';
  
  
  class LoginForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        username: &quot;&quot;,
        password: &quot;&quot;,
        buttonDisabled: false
      }
    }
  
    setInputValue(property, val) {
      val = val.trim();
      if (val.length &gt; 12) {
        return;
  
      }
      this.setState({
        [property]: val
  
      })
    }
  
    resetForm() {
      this.setState({
        username: &quot;&quot;,
        password: &quot;&quot;,
        buttonDisabled: false
  
  
      })
    }
  
    async doLogin() {
      if (!this.state.username) {
        return;
      }
      if (!this.state.password) {
        return;
      }
  
      this.setState({
        buttonDisabled: true
      })
  
      try {
        let res = await fetch('/login', {
          method: &quot;post&quot;,
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            username: this.state.username,
            password: this.state.password
          })
  
        });
  
        let result = await res.json();
        if (result &amp;&amp; result.succes) {
          UserStore.isLoggedIn = true;
          UserStore.username = result.username;
        }
  
        else if (result &amp;&amp; result.succes === false) {
          this.resetForm();
          alert(result.msg);
  
  
        }
  
  
      } catch (e) {
        console.log(e);
        this.resetForm();
  
      }
    }
  
  
    render() {
      return (
        &lt;div className=&quot;loginForm&quot;&gt;
          Log In
          &lt;InputField
            type='text'
            placeholder='Username'
            value={this.state.username ? this.state.username : ''}
            onChange={(val) =&gt; this.setInputValue('username', val)}
  
          /&gt;
  
          &lt;InputField
            type='password'
            placeholder='Password'
            value={this.state.password ? this.state.password : ''}
            onChange={(val) =&gt; this.setInputValue('password', val)}
  
          /&gt;
  
          &lt;SubmitButton
            text='Log In'
            disabled={this.state.buttonDisabled}
            onClick={() =&gt; this.doLogin()}
          /&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  
  export default LoginForm;
  </code></pre>
  <p><strong>SubmitButton.js</strong></p>
  <pre><code>import React from 'react';
  
  
  class SubmitButton extends React.Component {
    render() {
      return (
        &lt;div className=&quot;submitButton&quot;&gt;
          &lt;button
            className='btn'
            type='submit'
            disabled={this.props.disabled}
            onClick={() =&gt; this.props.onClick()}
          &gt;
  
            {this.props.text}
  
  
          &lt;/button&gt;
  
        &lt;/div&gt;
      );
    }
  }
  
  
  export default SubmitButton;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import React from 'react';
  import { observer } from 'mobx-react';
  import UserStore from './stores/UserStore';
  import LoginForm from './LoginForm';
  import SubmitButton from './SubmitButton';
  import './App.css';
  
  class App extends React.Component {
  
    async componentDidMount() {
      try {
        let res = await fetch('/isLoggedIn', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
  
  
          }
        });
  
        let result = await res.json();
  
        if (result &amp;&amp; result.success) {
  
          UserStore.loading = false;
          UserStore.isLoggedIn = true;
          UserStore.username = result.username;
        }
  
        else {
          UserStore.loading = false;
          UserStore.isLoggedIn = false;
  
        }
  
  
      }
      catch (e) {
  
        UserStore.loading = false;
        UserStore.isLoggedIn = false;
  
      }
    }
  
  
    async doLogout() {
      try {
        let res = await fetch('/logout', {
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
  
  
          }
        });
  
        let result = await res.json();
  
        if (result &amp;&amp; result.success) {
  
  
          UserStore.isLoggedIn = false;
          UserStore.username = '';
        }
  
  
  
  
      }
      catch (e) {
  
        console.log(e);
  
      }
    }
  
  
  
    render() {
      if (UserStore.loading) {
        return (
          &lt;div className=&quot;app&quot;&gt;
            &lt;div className='container'&gt;
              Loading ,Please Wait...
  
            &lt;/div&gt;
  
          &lt;/div&gt;
  
        );
      }
  
      else {
  
        if (UserStore.isLoggedIn) {
  
          return (
            &lt;div className=&quot;app&quot;&gt;
              &lt;div className='container'&gt;
                Welcome {UserStore.username}
  
                &lt;SubmitButton
  
                  text={'Log Out'}
                  disabled={false}
                  onClick={() =&gt; this.doLogout()}
  
                /&gt;
  
              &lt;/div&gt;
            &lt;/div&gt;
          );
  
        }
  
  
  
        return (
          &lt;div className=&quot;app&quot;&gt;
            &lt;div className='container'&gt;
  
              &lt;LoginForm /&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        );
  
      }
    }
  }
  
  
  export default observer(App);
  </code></pre>
  <p><strong>Router.js</strong></p>
  <pre><code>const bcrypt = require('bcrypt');
  
  
  class Router {
  
      constructor(app, db) {
          this.login(app, db);
          this.logout(app, db);
          this.isLoggedIn(app, db);
      }
  
      login(app, db) {
          app.post('/login', (req, res) =&gt; {
  
              let username = req.body.username; 
              let password = req.body.password; 
  
              username = username.toLowerCase();
  
              if (username.length &gt; 12 || password.length &gt; 12) {
                  res.json({
                      success: false,
                      msg: 'An error occured,please try again'
                  })
                  return;
  
  
              }
              let cols = [username];
              db.query('SELECT * FROM user WHERE username =? LIMIT 1', cols, (err, data, fields) =&gt; {
  
                  if (err) {
                      res.json({
                          success: false,
                          msg: 'An error occured,please try again'
  
                      });
                      return;
                  }
                  if (data &amp;&amp; data.length === 1) {
                      bcrypt.compare(password, data[0].password, (bcryptErr, verified) =&gt; {
                          if (verified) {
                              req.session.userID = data[0].id;
                              res.json({
                                  success: true,
                                  username: data[0].username
                              })
                              return;
  
                          }
                          else {
                              res.json({
                                  success: false,
                                  msg: 'Invalid Password'
                              })
                          }
                      });
                  } else {
                      res.json({
                          success: false,
                          msg: 'User not Found,please try again..!'
                      })
  
                  }
  
              });
          });
  
      }
  
      logout(app, db) {
          app.post('/logout',(req,res)=&gt;{
  
              if(req.session.userID){
                  req.session.destroy();
                  res.json({
                      success:true
                  })
                  return true;
              }
              else{
                  res.json({
                      success:false
                  })
                  return false;
  
              }
          })
  
      }
      isLoggedIn(app, db) {
  
          app.post('/isLoggedIn',(req,res)=&gt;{
  
              if(req.session.userID){
                  let cols =[req.session.userID];
                  db.query('SELECT * FROM user WHERE ID=? LIMIT 1',cols,(err,data,fields) =&gt;{
  
                      if(data &amp;&amp; data.length ===1){
                          res.json({
                              success:true,
                              username:data[0].username
                          });
                          return true;
                      }
                      else{
                          res.json({
                              success:false
                          });
                      }
  
                  });
              }
              else{
                  res.json({
                      success:false
                  })
              }
  
          });
  
  
  
      }
  
  }
  
  module.exports = Router;
  </code></pre>