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

The login form

\n

In the components folder, create a file named LoginForm.js.

\n

We will create a simple React form and style it using Bootstrap classes.

\n
client/src/components/LoginForm.js
\n
import React from "react"\nimport { Link } from "react-router-dom"\n\nconst LoginForm = () => {\n  return (\n    <div className="login-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Login</h1>\n      </div>\n      <form>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5">\n          <label htmlFor="email">Email Address</label>\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="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          />\n        </div>\n\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            Login\n          </button>\n        </div>\n        <div className="col-10 col-sm-8 col-md-5 mx-auto mt-3">\n          <p>\n            <Link to="/account/forgot" className="password-forgot">\n              I forgot my password\n            </Link>\n          </p>\n          <p className="register-cta">\n            Don't have an account?{" "}\n            <Link className="register" to="/register">\n              Register\n            </Link>\n          </p>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default LoginForm
\n

Add the following css rulesets in index.css.

\n
client/src/index.css
\n
/*****************************/\n/******* REGISTER & LOGIN*****/\n/*****************************/\n\n.login-form-container {\n  margin-top: 5rem;\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/***********************************/\n/*******END OF REGISTER & LOGIN*****/\n/***********************************/\n\n/**********************************/\n/******* I FORGOT MY PASSWORD *****/\n/**********************************/\n.password-forgot {\n  text-decoration: none;\n  font-size: 1.5rem;\n  font-weight: 600;\n}\n\n.password-forgot:hover {\n  text-decoration: none;\n}\n/****************************************/\n/******* END OF I FORGOT MY PASSWORD*****/\n/****************************************/
\n

Now that we have the LoginForm component, we need to render it when the route in the URL matches /login. We can do so by wrapping the LoginForm component with Route, which is a route matching component from react-router-dom.

\n
client/src/App.js
\n
import React from "react";\nimport Header from "./components/Header";\nimport { Route, Switch } from "react-router-dom";\nimport LoginForm from "./components/LoginForm";\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <Switch>\n        <Route path="/login" component={LoginForm} />\n      </Switch>\n    </>\n  );\n};\n\nexport default App;
\n
\n

Note: The Route component automatically injects history, location and match props to the rendered component.

\n
\n

If you console.log the props object inside the LoginForm component, you will see an object like the following:

\n

\n \n \n \n \n

\n

In the LoginForm component, you will notice that I have wrapped the Route component with the Switch component.

\n

Why do we need a Switch component?

\n

The Switch component is also a route matching component. It looks through all its children Route elements and renders the first one whose path matches the path in the URL.

\n

Use a Switch anytime you have multiple routes but you want only one of them to render at a time. Right now, we have only one route - /login. However, we will add more routes as we progress further.

\n

Now, when you click on the Register/Login link, the LoginForm component gets rendered on the screen and you should see a form like below:

\n

\n \n \n \n \n

\n

The login form does not do anything yet. Before we work on the functionalities, let's finish the registartion form.

\n

The registration form

\n

When we click on the Register link (at the bottom of the login form), we are taken to the URL localhost:3000/register. When the path matches /register, we want to show a registration form. We have not created a registration form yet. Let’s do that now.

\n

Inside the components folder, create a file named RegisterForm.js.

\n

Similar to how we created the login form, we will create a simple registration form first before adding the functionalities.

\n

Place the following code inside RegisterForm.js,

\n
client/src/components/RegisterForm.js
\n
import React from "react";\n\nconst RegisterForm = () => {\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>\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          />\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          />\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          />\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          />\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

Add the following highlighted css rules in index.css.

\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/***********************************/\n/*******END OF REGISTER & LOGIN*****/\n/***********************************/
\n

Next, we will import and render the RegisterForm component inside the App component by wrapping it inside a Route component.

\n
client/src/App.js
\n
import React from "react";\nimport Header from "./components/Header";\nimport { Route, Switch } from "react-router-dom";\nimport LoginForm from "./components/LoginForm";\nimport RegisterForm from "./components/RegisterForm";\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <Switch>\n        <Route path="/register" component={RegisterForm} />\n        <Route path="/login" component={LoginForm} />\n      </Switch>\n    </>\n  );\n};\n\nexport default App;
\n

Now, when you click on the Register link (at the bottom of the login form), the URL changes to localhost:3000/register and the RegisterForm component gets rendered and we see a registration form.

\n

\n \n \n \n \n

\n

Go to part-5

\n","frontmatter":{"title":"Implement JWT Based User Authentication in a MERN Stack App - Part 4","date":"2021-05-22"}}},"pageContext":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-4/","prev":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-3/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-5/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}