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

Install Bootstrap

\n

We will start working at the frontend. We will use Bootstrap for styling. So, let’s install it.

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

Import Bootstrap CSS above index.css import in the src/index.js file.

\n
client/src/index.js
\n
import React from "react";\nimport ReactDOM from "react-dom";\nimport "bootstrap/dist/css/bootstrap.min.css";\nimport "./index.css";\nimport App from "./App";\nimport reportWebVitals from "./reportWebVitals";\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById("root")\n);
\n

Next, go to the index.css file, delete all the css rulesets and paste the following rules.

\n
client/src/index.css
\n
* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n}
\n

We will add all the CSS rules in index.css.

\n

Create the header

\n

Inside the src folder, create a folder named components and inside the components folder create a file named Header.js.

\n

Paste the following code snippet inside Header.js.

\n
client/src/components/Header.js
\n
import React from "react"\n\nconst Header = () => {\n  return (\n    <header>\n      <nav>\n        <ul className="navbar-list">\n          <li className="navbar-list-item">Register/Login</li>\n        </ul>\n      </nav>\n    </header>\n  )\n}\n\nexport default Header
\n

Add the following css rules inside index.css.

\n
client/src/index.css
\n
* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n}\n\nheader {\n  width: 100%;\n  height: 6rem;\n  background-color: black;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\nnav {\n  height: 100%;\n  margin-right: 3rem;\n}\n\n.navbar-list {\n  list-style: none;\n  position: relative;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n\n.navbar-list-item {\n  color: gainsboro;\n  font-size: 1.6rem;\n  cursor: pointer;\n}
\n

Now, we will import the Header component inside the App component.

\n
client/src/App.js
\n
import React from "react"\nimport Header from "./components/Header"\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n    </>\n  )\n}\n\nexport default App
\n

cd into the client folder and start the development server using npm start.

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

Visit http://localhost:3000/ and you should see the application.

\n

\n \n \n \n \n

\n

Client-side routing

\n

Ours is a single-page application. We will implement client-side routing using React Router which will render a certain component based on the route in the URL.

\n

Since we are developing a web application, we will install react-router-dom.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth\\client> npm i react-router-dom
\n

Router

\n

The first Router component we are going to work with from react-router-dom is called BrowserRouter. Its job is to keep the UI in sync with the URL.

\n

In order to use BrowserRouter, we have to render it at the root of the element hierarchy. We can do so by wrapping the top level App component with the Router component as shown below:

\n
client/src/index.js
\n
import React from "react"\nimport ReactDOM from "react-dom"\nimport "bootstrap/dist/css/bootstrap.min.css"\nimport "./index.css"\nimport App from "./App"\nimport reportWebVitals from "./reportWebVitals"\nimport { BrowserRouter as Router } from "react-router-dom"\n\nReactDOM.render(\n  <Router>\n    <App />\n  </Router>,\n  document.getElementById("root")\n)
\n
\n

Note: BrowesrRouter uses the HTML5 history API (pushState, replaceState & the popState event) to keep the UI in sync with the URL.

\n
\n

Navigation

\n

Currently in Header.js, the text Register/Login is wrapped by li tags. We don’t want that. We want to create a link, so that when the user clicks on it, we will render a component that shows a login form. In order to do that, we will use the Link component from react-router-dom.

\n
client/src/components/Header.js
\n
import React from "react"\nimport { Link } from "react-router-dom"\n\nconst Header = () => {\n  return (\n    <header>\n      <nav>\n        <ul className="navbar-list">\n          <Link to="/login" className="navbar-list-item">\n            Register/Login\n          </Link>\n        </ul>\n      </nav>\n    </header>\n  )\n}\n\nexport default Header
\n

The to attribute in the Link component represents the route part of the URL.

\n

We will notice that when we hover over Register/Login, the link is turned blue and is underlined with blue color as well.

\n

\n \n \n \n \n

\n

We will change the color to gray and remove the underline by adding the following CSS in index.css.

\n
client/src/index.css
\n
* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 62.5%;\n}\n\nheader {\n  width: 100%;\n  height: 6rem;\n  background-color: black;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}\n\nnav {\n  height: 100%;\n  margin-right: 3rem;\n}\n\n.navbar-list {\n  list-style: none;\n  position: relative;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n\n.navbar-list-item {\n  color: gainsboro;\n  font-size: 1.6rem;\n  cursor: pointer;\n}\n\n.navbar-list-item:hover {\n  text-decoration: none;\n  color: gray;\n}
\n

Now, when we click on Register/Login our URL will change from localhost:3000 to localhost:3000/login. Next, we will render a login form in the path /login.

\n

Go to part-4

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