title: Login authentication with axios and formik
body: <p>I'm new to using both axios and formik and likely making a simple mistake here.  I'm attempting to check if the user's email and password exists and has been typed correctly.  Upon authentication they should be logged in with useContext and then redirected to the homepage.</p>
  <p>Currently, after submitting, the form simply remains greyed out without reaching the .then/.catch block.  Is it a problem with the way I typed the auth parameter?</p>
  <pre><code>const LoginForm = () =&gt; {
    const authenticate = useContext(AuthContext);
    const [serverState, setServerState] = useState();
    const handleServerResponse = (ok, msg) =&gt; {
      setServerState({ok, msg});
    };
    const handleOnSubmit = (values, actions) =&gt; {
      axios({
        method: &quot;POST&quot;,
        url: &quot;http://localhost:5000/api/users/login&quot;,
        data: values,
        auth: {
          email,
          password
        }
      })
      .then(response =&gt; {
        actions.setSubmitting(false);
        actions.resetForm();
        handleServerResponse(true, &quot;Logged In!&quot;);
      })
      .catch(error =&gt; {
        actions.setSubmitting(false);
        handleServerResponse(false, error.response.data.error);
      });
      authenticate.login();
      Router.push(&quot;/&quot;)
    };
  
    return (
      &lt;Formik
        initialValues={{
          email: &quot;&quot;,
          password: &quot;&quot;,
        }}
        validationSchema={Yup.object().shape({
          email: Yup.string(),
          password: Yup.string(),
        })}
        onSubmit={handleOnSubmit}
      &gt;
        {({ isSubmitting }) =&gt; (
        &lt;Form&gt;
          &lt;Field
            name=&quot;email&quot;
            type=&quot;email&quot;
            fullWidth
            component={TextField}
            variant=&quot;outlined&quot;
            label=&quot;Email&quot;
          /&gt;
          &lt;Box pt={1}&gt;
          &lt;Field
            name=&quot;password&quot;
            type=&quot;password&quot;
            fullWidth
            component={TextField}
            variant=&quot;outlined&quot;
            label=&quot;Password&quot;
          /&gt;
          &lt;/Box&gt;
          &lt;Box pt={2}&gt;
            &lt;Button
              type=&quot;submit&quot;
              variant=&quot;contained&quot;
              fullWidth
              color=&quot;primary&quot;
              disabled={isSubmitting}
            &gt;
              Submit
            &lt;/Button&gt;
            {serverState &amp;&amp; (
            &lt;Typography className={!serverState.ok ? &quot;errorMsg&quot; : &quot;&quot;}&gt;
              {serverState.msg}
            &lt;/Typography&gt;
          )}
          &lt;/Box&gt;
        &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    );
  };
  </code></pre>
  <p>The Node JS API on the backend:</p>
  <pre><code>const login = async (req, res, next) =&gt; {
    const { email, password } = req.body;
  
    let existingUser;
  
    try {
      existingUser = await User.findOne({ email: email });
    } catch (err) {
      const error = new HttpError(&quot;Login failed, please try again later.&quot;, 500);
      return next(error);
    }
  
    if (!existingUser || existingUser.password !== password) {
      const error = new HttpError(&quot;Invalid credentials, login failed.&quot;, 401);
      return next(error);
    }
  
    res.json({ message: &quot;Logged in!&quot; });
  };
  </code></pre>