{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-5/", "result": {"data":{"markdownRemark":{"html":"
\n\n
\n
This blog post is part of a series. You must finish part-1, part-2, part-3 & part-4 before continuing here.
\n

Our registartion and login forms are ready. Now comes the fun part - handling form state, form validation and error messages.

\n

We can handle these things using plain react. No problem at all. But we will take the help of a library called Formik to make our life a little bit easier.

\n

Formik will help us achieve the following:

\n\n

First, we will install formik.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth\\client> npm i formik
\n

Handling form state

\n

In the RegisterForm component, we import the useFormik hook. Then we pass our form’s initial values and a submission function (onSubmit) to the useFormik hook. The hook then returns to us the form state and helper methods in a variable called formik.

\n

The helpers methods that we care about are as follows:

\n\n

What we have done below is we have passed each of these helper methods to their respective props.

\n
client/src/components/RegisterForm.js
\n
import React from "react"\nimport { useFormik } from "formik"\n\nconst RegisterForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      firstName: "",\n      lastName: "",\n      email: "",\n      password: "",\n    },\n\n    onSubmit: values => {\n      console.log(values)\n    },\n  })\n\n  return (\n    <div className="register-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Register</h1>\n      </div>\n\n      <form onSubmit={formik.handleSubmit}>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5">\n          <label htmlFor="firstName">First Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="firstName"\n            name="firstName"\n            type="text"\n            onChange={formik.handleChange}\n            value={formik.values.firstName}\n          />\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="lastName">Last Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="lastName"\n            name="lastName"\n            type="text"\n            onChange={formik.handleChange}\n            value={formik.values.lastName}\n          />\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="email">Email</label>\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="email"\n            onChange={formik.handleChange}\n            value={formik.values.email}\n          />\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="password">Password</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            onChange={formik.handleChange}\n            value={formik.values.password}\n          />\n        </div>\n        <div className="col-10 col-sm-8 col-md-5 mx-auto">\n          <button type="submit" className="btn btn-lg btn-primary btn-block">\n            Register\n          </button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default RegisterForm
\n
\n

Note: The id and name HTML attribute that we pass to the input must match the property names defined in initialValues.

\n
\n

On line 14, we are logging the value of values to the console inside the onSubmit submission function. The values variable is where formik stores our form’s current values.

\n

Don’t fill anything in the registration form and click on Register. If you check the console, you will see an object that holds our form’s values. Because we did not fill anything in the form, our form’s values (firstName, lastName, email, password) are empty strings.

\n

\n \n \n \n \n

\n

Now, fill the form with details and click on the Register button.

\n

\n \n \n \n \n

\n

In the console, you will get an object that holds our form’s values.

\n

\n \n \n \n \n

\n

With the help of some handler methods from Formik, we have now taken care of the form state. Next, we will move on to form validation.

\n

Handling form validation and showing error messages

\n

Before we send our form data to the server, we must ensure that all the required form controls are filled in the correct format. This is called client-side form validation.

\n

Because it is relatively easier to bypass client-side validation, a malicious user can send bad data to our server. Therefore, as a security measure, we are also going to implement server-side form validation later when we tackle the server-side part of our application.

\n

Coming back to client-side form validation, we can write our own custom validation function if we want. However, a large portion of Formik’s users use a library called Yup, whose primary use case is client-side validation.

\n

Since Formik users love Yup so much, Formik has a special configuration prop for Yup called validationSchema, which will automatically transform Yup’s validation errors into a pretty object.

\n

First, we will install Yup.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth\\client> npm i yup
\n

In addition to the form state, Formik keeps track of the validation and error messages. All the validation errors will be available to us in the formik.errors object.

\n

If there is any validation error, we will show the error message below the respective input field.

\n
client/src/components/RegisterForm.js
\n
import React from "react"\nimport { useFormik } from "formik"\nimport * as Yup from "yup"\n\nconst RegisterForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      firstName: "",\n      lastName: "",\n      email: "",\n      password: "",\n    },\n    validationSchema: Yup.object({\n      firstName: Yup.string()\n        .max(20, "Must be 20 characters or less")\n        .required("Please enter your first name"),\n      lastName: Yup.string()\n        .max(20, "Must be 20 characters or less")\n        .required("Please enter your last name"),\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n      password: Yup.string()\n        .min(5, "Must be 5 characters or more")\n        .required("Please enter your password"),\n    }),\n\n    onSubmit: values => {\n      console.log(values)\n    },\n  })\n\n  return (\n    <div className="register-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Register</h1>\n      </div>\n\n      <form onSubmit={formik.handleSubmit}>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5">\n          <label htmlFor="firstName">First Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="firstName"\n            name="firstName"\n            type="text"\n            onChange={formik.handleChange}\n            value={formik.values.firstName}\n          />\n          {formik.errors.firstName ? (\n            <small className="form-text text-danger">\n              {formik.errors.firstName}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="lastName">Last Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="lastName"\n            name="lastName"\n            type="text"\n            onChange={formik.handleChange}\n            value={formik.values.lastName}\n          />\n          {formik.errors.lastName ? (\n            <small className="form-text text-danger">\n              {formik.errors.lastName}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="email">Email</label>\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="email"\n            onChange={formik.handleChange}\n            value={formik.values.email}\n          />\n          {formik.errors.email ? (\n            <small className="form-text text-danger">\n              {formik.errors.email}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="password">Password</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            onChange={formik.handleChange}\n            value={formik.values.password}\n          />\n          {formik.errors.password ? (\n            <small className="form-text text-danger">\n              {formik.errors.password}\n            </small>\n          ) : null}\n        </div>\n        <div className="col-10 col-sm-8 col-md-5 mx-auto">\n          <button\n            type="submit"\n            className="btn btn-lg btn-primary btn-block register-button"\n          >\n            Register\n          </button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default RegisterForm
\n

By default, Formik validates after each keystroke (change event), each input’s blur event as well as prior to submission.

\n
\n

The blur event will fire when an element has lost focus.

\n
\n

Now, if I type just the text he in the \"First Name\" form field, error messages for the rest of the form fields (which I have not visited yet) are displayed.

\n

\n \n \n \n \n

\n

This happens because our validation function runs on each keystroke against the entire form’s values and our errors object contains all the errors at any given moment.

\n

This is clearly a bad user experience. We want to show a field’s error message only after a user is done typing in that field.

\n

Like errors and values, Formik keeps track of which fields have been visited in an object called touched. The keys of touched are the field names and the values of touched are booleans true/false.

\n

To take advantage of touched, we pass formik.handleBlur to each input’s onBlur prop. Now that we are tracking touched, we can now change the error message render logic to only show a given field’s error messages if it exists and if the user has visited the field.

\n
client/src/components/RegisterForm.js
\n
import React from "react";\nimport { useFormik } from "formik";\nimport * as Yup from "yup";\n\nconst RegisterForm = () => {\n  const formik = useFormik({\n    initialValues: {\n      firstName: "",\n      lastName: "",\n      email: "",\n      password: "",\n    },\n    validationSchema: Yup.object({\n      firstName: Yup.string()\n        .max(20, "Must be 20 characters or less")\n        .required("Please enter your first name"),\n      lastName: Yup.string()\n        .max(20, "Must be 20 characters or less")\n        .required("Please enter your last name"),\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n      password: Yup.string()\n        .min(5, "Must be 5 characters or more")\n        .required("Please enter your password"),\n    }),\n\n    onSubmit: (values) => {\n      console.log(values);\n    },\n  });\n\n  return (\n    <div className="register-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Register</h1>\n      </div>\n\n      <form onSubmit={formik.handleSubmit}>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5">\n          <label htmlFor="firstName">First Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="firstName"\n            name="firstName"\n            type="text"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.firstName}\n          />\n          {formik.touched.firstName && formik.errors.firstName ? (\n            <small className="form-text text-danger">\n              {formik.errors.firstName}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="lastName">Last Name</label>\n          <input\n            className="form-control form-control-lg"\n            id="lastName"\n            name="lastName"\n            type="text"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.lastName}\n          />\n          {formik.touched.lastName && formik.errors.lastName ? (\n            <small className="form-text text-danger">\n              {formik.errors.lastName}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="email">Email</label>\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="email"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.email}\n          />\n          {formik.touched.email && formik.errors.email ? (\n            <small className="form-text text-danger">\n              {formik.errors.email}\n            </small>\n          ) : null}\n        </div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="password">Password</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            onChange={formik.handleChange}\n            onBlur={formik.handleBlur}\n            value={formik.values.password}\n          />\n          {formik.touched.password && formik.errors.password ? (\n            <small className="form-text text-danger">\n              {formik.errors.password}\n            </small>\n          ) : null}\n        </div>\n        <div className="col-10 col-sm-8 col-md-5 mx-auto">\n          <button\n            type="submit"\n            className="btn btn-lg btn-primary btn-block register-button"\n          >\n            Register\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n\nexport default RegisterForm;\n
\n

Now, if we click on a form field (let’s say Last Name), leave the field blank and then click anywhere outside of that form field, the blur event will be fired. Because the \"Last Name\" form field is required (as defined in validationSchema), the Formik errors object will be filled with the error message, which will then be rendered below the form field. This holds true for other form fields as well.

\n

This is the validation behavior that we want in our form. Perfect.

\n

We have a minor issue to fix though. Notice that the size of the error message displayed is very small.

\n

Include the following highlighted CSS in index.css to fix the size.

\n
client/src/index.css
\n
/*****************************/\n/******* REGISTER & LOGIN*****/\n/*****************************/\n\n.login-form-container {\n  margin-top: 5rem;\n}\n\n.register-form-container {\n  margin-top: 5rem;\n}\n\n\nlabel {\n  font-size: 1.5rem;\n}\n\n.register-cta {\n  text-decoration: none;\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n.register:hover {\n  text-decoration: none;\n}\n\n.text-danger {\n  font-size: 1.2rem;\n}\n\n/***********************************/\n/*******END OF REGISTER & LOGIN*****/\n/***********************************/
\n

The error messages are legible now. We are done with form validation and display of error messages.

\n

\n \n .grvsc-code > .grvsc-line::before {\n content: ' ';\n position: absolute;\n width: 100%;\n }\n \n .grvsc-line-diff-add::before {\n background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\n }\n \n .grvsc-line-diff-del::before {\n background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\n }\n \n .grvsc-line-number {\n padding: 0 2px;\n text-align: right;\n opacity: 0.7;\n }\n \n .synthwave-84 { background-color: #262335; }\n .synthwave-84 .mtki { font-style: italic; }\n .synthwave-84 .mtk1 { color: #FFFFFF; }\n .synthwave-84 .mtk6 { color: #36F9F6; }\n .synthwave-84 .mtk10 { color: #FEDE5D; }\n .synthwave-84 .mtk8 { color: #72F1B8; }\n .synthwave-84 .mtk3 { color: #FF7EDB; }\n .synthwave-84 .mtk16 { color: #FF8B39; }\n .synthwave-84 .mtk12 { color: #FFFFFFEE; }\n .synthwave-84 .mtk14 { color: #B6B1B1; }\n .synthwave-84 .mtk9 { color: #FE4450; }\n .synthwave-84 .mtk7 { color: #2EE2FA; }\n .synthwave-84 .mtk5 { color: #F97E72; }\n .synthwave-84 .mtk4 { color: #848BBD; }\n .synthwave-84 .mtk11 { color: #D50; }\n .synthwave-84 .grvsc-line-highlighted::before {\n background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\n box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\n }\n","frontmatter":{"title":"Implement JWT Based User Authentication in a MERN Stack App - Part 5","date":"2021-05-22"}}},"pageContext":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-5/","prev":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-4/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/a-beginners-guide-to-prototypes-and-prototypal-inheritance-in-javascript/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}