title: This is a Website using react which logins perfectly and works as expected on desktop [local] but gives error on mobile screen [local]
body: <p>App.js</p>
  <pre><code>import axios from &quot;axios&quot;;
  import BlogForm from &quot;./components/BlogForm&quot;;
  import UpdateUserForm from &quot;./components/UpdateUserForm&quot;;
  import Register from &quot;./components/Register&quot;;
  import Blog from &quot;./components/Blog&quot;;
  import ResetPassword from &quot;./components/ResetPassword&quot;;
  import Profile from &quot;./components/Profile&quot;;
  import Feed from &quot;./components/Feed&quot;;
  import Dashboard from &quot;./components/Dashboard&quot;;
  import Homepage from &quot;./components/Homepage&quot;;
  import Login from &quot;./components/Login&quot;;
  import { BrowserRouter as Router, Switch, Route } from &quot;react-router-dom&quot;;
  import &quot;./App.css&quot;;
  import { useState, useEffect } from &quot;react&quot;;
  import NoResult from &quot;./components/NoResult&quot;;
  import ProtectedRoute from &quot;./components/ProtectedRoute&quot;;
  import auth from &quot;./auth&quot;;
  import { checkAuth } from &quot;./helpers/helpers&quot;;
  import PublicRoute from &quot;./components/PublicRoute&quot;;
  
  axios.defaults.headers.common[&quot;Authorization&quot;] = localStorage.getItem(&quot;token&quot;);
  axios.defaults.baseURL = &quot;http://localhost:5000&quot;;
  export default function App() {
    const [isAuthenticated, setIsAuthenticated] = useState(
      auth.isAuthenticated()
    );
  
    useEffect(() =&gt; {
      if (checkAuth) {
        auth.login(() =&gt; {
          setIsAuthenticated(true);
        });
      }
    }, []);
  
    return (
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route exact path='/'&gt;
            {isAuthenticated ? &lt;Homepage /&gt; : &lt;Login /&gt;}
          &lt;/Route&gt;
          &lt;PublicRoute exact path='/login' component={Login} /&gt;
          &lt;PublicRoute exact path='/register' component={Register} /&gt;
          &lt;PublicRoute exact path='/reset-password' component={ResetPassword} /&gt;
          &lt;ProtectedRoute exact path='/home' component={Homepage} /&gt;
          &lt;ProtectedRoute
            exact
            path='/create-blog'
            component={() =&gt; &lt;BlogForm type='Create' /&gt;}
          /&gt;
          &lt;ProtectedRoute
            exact
            path='/update-blog/:blogid'
            component={() =&gt; &lt;BlogForm type='Update' /&gt;}
          /&gt;
          &lt;ProtectedRoute exact path='/dashboard' component={Dashboard} /&gt;
          &lt;ProtectedRoute
            exact
            path='/my-feed'
            component={() =&gt; &lt;Feed type='feed' /&gt;}
          /&gt;
          &lt;ProtectedRoute exact path='/blog/:blogid' component={Blog} /&gt;
          &lt;ProtectedRoute exact path='/user/:userid' component={Profile} /&gt;
          &lt;ProtectedRoute
            exact
            path='/search/:query'
            component={() =&gt; &lt;Feed type='search' /&gt;}
          /&gt;
          &lt;ProtectedRoute
            exact
            path='/update-user/:userid'
            component={UpdateUserForm}
          /&gt;
          &lt;ProtectedRoute exact path='/no-results' component={NoResult} /&gt;
          &lt;Route path='*' component={() =&gt; &quot;404 NOT FOUND&quot;} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    );
  }
  
  </code></pre>
  <p>Login.js</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import eyeIcon from &quot;../images/eye.png&quot;;
  import { Link, useHistory } from &quot;react-router-dom&quot;;
  import axios from &quot;axios&quot;;
  import auth from &quot;../auth&quot;;
  import { checkAuth } from &quot;../helpers/helpers&quot;;
  
  export default function Login() {
    const history = useHistory();
    document.title = &quot;Login&quot;;
  
    const [showPassword, setShowPassword] = useState(false);
    const [loginDetails, setLoginDetails] = useState({
      email: &quot;&quot;,
      password: &quot;&quot;,
    });
  
    const handleChange = (e) =&gt; {
      const { name, value } = e.target;
      setLoginDetails((prev) =&gt; {
        return {
          ...prev,
          [name]: value,
        };
      });
    };
  
    const handleLogin = (e) =&gt; {
      e.preventDefault();
      login();
    };
  
    const login = async () =&gt; {
      try {
        const res = await axios.post(&quot;/auth/login&quot;, loginDetails);
        localStorage.setItem(&quot;token&quot;, res.data);
        if (checkAuth()) {
          auth.login(() =&gt; {
            history.push(&quot;/home&quot;);
          });
        }
      } catch (err) {
        const errors = err.response.data.errors;
        console.log(errors);
        errors.forEach((err) =&gt; {
          alert(err.msg);
        });
      }
    };
  
    return (
      &lt;div className='login-register-container'&gt;
        &lt;div className='l-container d-flex justify-center align-center'&gt;
          &lt;h1&gt;
            Login to &lt;br /&gt;
            Your &lt;br /&gt;
            Account &lt;span&gt;.&lt;/span&gt;
          &lt;/h1&gt;
          &lt;form className='d-flex flex-col' onSubmit={handleLogin}&gt;
            &lt;input
              type='email'
              name='email'
              placeholder='Enter Your Email'
              value={loginDetails.email}
              onChange={handleChange}
            /&gt;
            &lt;label htmlFor='password'&gt;
              &lt;img
                className='toggle-password'
                src={eyeIcon}
                onClick={() =&gt; setShowPassword(!showPassword)}
                alt=''
              /&gt;
              &lt;input
                type={showPassword ? &quot;text&quot; : &quot;password&quot;}
                name='password'
                placeholder='Enter Your Password'
                value={loginDetails.password}
                onChange={handleChange}
              /&gt;
            &lt;/label&gt;
            &lt;Link to='/reset-password'&gt;Forgot Password&lt;/Link&gt;
            &lt;Link to='/register'&gt;Not a User?&lt;/Link&gt;
            &lt;input type='submit' value='Login' /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>This code works as expected on the desktop where I am building it on localhost but gives this error while running it on mobile browser [localhost].</p>
  <p>It gives an err : Uncaught(in promise) TypeError : Cannot read properties of undefined (reading 'data').</p>
  <p>In desktop, if there is an error while logging in it produces an alert or else user is redirected to homepage.</p>
  <p>In the backend to the post request of http://localhost:5000/auth/login returns a token if logged in perfectly or else returns errors array.</p>
  <p>auth.js (Backend using Node.js/Express)</p>
  <pre><code>router.post(
    &quot;/login&quot;,
    [
      check(&quot;email&quot;, &quot;Enter a Valid Email Id&quot;).isEmail(),
      check(&quot;password&quot;, &quot;Password is required&quot;).not().isEmpty(),
    ],
    async (req, res) =&gt; {
      // Errors array
      const errors = validationResult(req);
      // If the errors array is not empty set status 400:Bad request and give the error messages in json
      if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
      }
  
      // Get the details of the user
      const { email, password } = req.body;
  
      try {
        let user = await db.query(&quot;SELECT * FROM USERS WHERE email=$1&quot;, [email]);
        if (user.rows.length === 0) {
          return res
            .status(400)
            .json({ errors: [{ msg: &quot;Invalid Credentials&quot; }] });
        }
  
        let found;
        let newPassword = md5(password);
  
        if (user.rows[0].password === newPassword) {
          found = true;
        } else {
          found = false;
        }
  
        if (!found) {
          return res
            .status(400)
            .json({ errors: [{ msg: &quot;Invalid Credentials&quot; }] });
        }
  
        const payload = { userid: user.rows[0].userid };
  
        const accessToken = jwt.sign(payload, process.env.JWT_TOKEN, {
          expiresIn: &quot;2h&quot;,
        });
  
        res.status(201).json(accessToken);
      } catch (err) {
        console.log(err.message);
        res.status(500).send(&quot;Server Error&quot;);
      }
    }
  );
  
  </code></pre>