{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-11/", "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, part-5, part-6, part-7, part-8, part-9 & part-10 before continuing here.
\n

Configuring the /api/users/login route

\n

Our login form is ready. After a user fills in the login form with their credentials and clicks on the Login button, we will make a POST request to the /api/users/login endpoint. We have not configured this endpoint yet. Let’s do that now.

\n

In the userRoutes.js file, paste the following highlighted code snippet.

\n
server/routes/userRoutes.js
\n
const express = require("express")\nconst asyncHandler = require("express-async-handler")\nconst User = require("../models/userModel")\nconst { generateToken } = require("../utils/generateToken")\nconst { registrationValidation } = require("../validation/validate")\nconst { loginValidation } = require("../validation/validate")\n\nconst router = express.Router()\n\nrouter.post(\n  "/register",\n  asyncHandler(async (req, res, next) => {\n    const { firstName, lastName, email, password } = req.body\n\n    const userExists = await User.findOne({ email })\n\n    if (userExists) {\n      const err = new Error("User already registered")\n      err.status = 400\n      next(err)\n    }\n\n    const user = await User.create({\n      firstName,\n      lastName,\n      email,\n      password,\n    })\n\n    res.json({ message: "New user created" })\n  })\n)\n\nrouter.post(\n  "/login",\n  asyncHandler(async (req, res, next) => {\n    const { error } = loginValidation(req.body)\n\n    if (error) {\n      const err = new Error(error.details[0].message)\n      err.status = 400\n      next(err)\n    }\n    const { email, password } = req.body\n    const user = await User.findOne({ email })\n\n    if (user && (await user.matchPassword(password))) {\n      res.json({\n        firstName: user.firstName,\n        token: generateToken(user._id),\n      })\n    } else {\n      const err = new Error("Invalid email or password")\n      err.status = 401\n      next(err)\n    }\n  })\n)\n\nmodule.exports = router
\n

Update the validate.js file as follows.

\n
server/validation/validate.js
\n
const Joi = require("joi")\n\nconst registrationValidation = formData => {\n  const schema = Joi.object({\n    firstName: Joi.string().required().max(20),\n    lastName: Joi.string().required().max(20),\n    email: Joi.string().required().email(),\n    password: Joi.string().required().min(5),\n  })\n\n  return schema.validate(formData)\n}\n\nconst loginValidation = formData => {\n  const schema = Joi.object({\n    email: Joi.string().required().email(),\n    password: Joi.string().required().min(5),\n  })\n\n  return schema.validate(formData)\n}\n\nmodule.exports = {\n  registrationValidation,\n  loginValidation,\n}
\n

Let’s understand the code inside the route handler function inside userRoutes.js. First, we do server-side validation of the form data coming from the client. If there are no errors, we extract the email and password fields from the request body (req.body). We then check whether we have an existing user in the database with the specified email address.

\n

We also check whether the password provided matches with the password saved in the database. We use a custom mongoose method named matchPassword to do the password comparison.

\n

Add the highlighted code snippet in the userModel.js file.

\n
server/models/userModels.js
\n
const mongoose = require("mongoose")\nconst bcrypt = require("bcryptjs")\n\nconst userSchema = new mongoose.Schema({\n  firstName: {\n    type: String,\n    required: true,\n  },\n  lastName: {\n    type: String,\n    required: true,\n  },\n  email: {\n    type: String,\n    unique: true,\n    required: true,\n  },\n  password: {\n    type: String,\n    required: true,\n  },\n})\n\nuserSchema.methods.matchPassword = async function (incomingPassword) {\n  return await bcrypt.compare(incomingPassword, this.password)\n}\n\nuserSchema.pre("save", async function () {\n  const salt = await bcrypt.genSalt(10)\n  this.password = await bcrypt.hash(this.password, salt)\n})\n\nconst User = mongoose.model("User", userSchema)\n\nmodule.exports = User
\n

We can write custom methods by providing a function to the methods object of a mongoose schema. An instance of a model is known as a document. Any custom method we define at the schema level is available to all the instances of the model created using the schema. Therefore, the matchPassword method is available to all instances of the User model.

\n

Inside the matchPassword function, we use the bcrypt.compare() method to compare the plain text password coming from the client with the hashed password saved in our database.

\n

Only when both the conditions (the user with the email address exists and the password provided matches with the password saved in our database) hold true, the /api/users/login endpoint responds with a JSON object. The JSON object that we are sending back to the client contains the name of the user and a JSON Web Token, which we create using the generateToken function inside the utils folder.

\n

Generating a JSON Web Token

\n

What is JWT?

\n

JSON Web Token is an open standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

\n

A JSON Web Token consists of three parts (Base64URL-encoded strings), separated by dots. The parts are:

\n\n

Therefore a JWT typically looks like the following.

\n

xxxxx.yyyyy.zzzzz

\n

Header\nThe Header typically consists of two parts: the type of the token which is JWT and the signing algorithm being used such as HMAC SHA256 or RSA.

\n
{\n  "alg": "HS256",\n  "typ": "JWT"\n}
\n

Then, this JSON is Base64URL encoded to form the first part of the JWT.

\n

Payload

\n

The second part of the token is the payload which typically contains information about the user.

\n

An example payload could look like the following.

\n
{\n  "sub": "1234567890",\n  "name": "John Doe",\n  "admin": true\n}
\n

The payload is then Base64Url encoded to form the second part of the JSON Web Token.

\n

Signature

\n

To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header and sign that.

\n

For example, if you want to use the HMAC SHA256 algorithm, the signature will be created in the following way.

\n
HMACSHA256(\n  base64UrlEncode(header) + "." +\n  base64UrlEncode(payload),\n  secret)\n
\n

The signature is used to verify that the message was not changed along the way.

\n

You can decode a JSON Web Token using the following link:

\n

https://jwt.io/#debugger-io

\n

Usage

\n

JWTs are most commonly used in authentication and authorization. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services and resources that are permitted with that token.

\n

When the user successfully logs in using their credentials, the authentication endpoint responds with a JWT. Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema. The content of the header should look like the following:

\n
Authorization: Bearer <token>
\n

The protected routes’ will check for a valid JWT in the Authorization header and if its present, the user is allowed to access the protected resources.

\n

Now that you have a basic understanding of what a JWT is, let's generate one using the jsonwebtoken package.

\n

Inside the server folder, create a folder named utils and inside the utils folder, create a file named generateToken.js. Paste the following code in that file.

\n
server/utils/generateToken.js
\n
const jwt = require("jsonwebtoken")\n\nconst generateToken = id => {\n  return jwt.sign({ id }, process.env.JWT_SECRET, {\n    expiresIn: "1d",\n  })\n}\n\nmodule.exports = { generateToken }
\n

We use the jsonwebtoken package to generate JSON Web tokens. We need to install jsonwebtoken.

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

We also need to add a JWT_SECRET key in the .env file. The value of JWT_SECRET key could be anything you want.

\n
mern-auth/.env
\n
PORT=5000\nMONGO_URI=mongodb+srv://sundaray:<password>@sandbox.y8blv.mongodb.net/myFirstDatabase?retryWrites=true&w=majority\nJWT_SECRET=terces@1234
\n

Let’s understand the code we have written inside the generateToken.js file.

\n

The first argument to the jwt.sign() method is the payload. Our payload is a JavaScript object that contains the user ID. The second argument is the secret key, which we have stored in the .env file. The third argument is an options object to which we have passed an expiresIn field with a value of 1 day. This means that the JSON Web Token will expire in 1 day and the user will be signed out of the application.

\n

Managing login state

\n

The way we created a registerSlice for user registration feature, we will create a loginSlice for all the login related functionalities.

\n

In the stateSlices folder, create a file named loginSlice.js.

\n
client/src/stateSlices/loginSlice.js
\n
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"\nimport axios from "axios"\n\nconst initialState = {\n  status: "idle",\n  loggedInUser: null,\n  error: null,\n}\n\nexport const loginUser = createAsyncThunk(\n  "login/loginUser",\n  async (loginFormData, { rejectWithValue }) => {\n    try {\n      const { data } = await axios.post("/api/users/login", loginFormData)\n      return data\n    } catch (err) {\n      return rejectWithValue(err.response.data)\n    }\n  }\n)\n\nexport const loginSlice = createSlice({\n  name: "login",\n  initialState,\n  reducers: {\n    logout(state, action) {\n      state.user = null\n    },\n  },\n  extraReducers: {\n    [loginUser.pending]: (state, action) => {\n      state.status = "loading"\n    },\n    [loginUser.fulfilled]: (state, action) => {\n      state.status = "succeeded"\n      state.loggedInUser = action.payload\n    },\n    [loginUser.rejected]: (state, action) => {\n      state.status = "failed"\n      state.error = action.payload.message\n    },\n  },\n})\n\nexport const { logout } = loginSlice.actions\nexport default loginSlice.reducer
\n

Next we need to add loginReducer to the store.

\n
client/src/store.js
\n
import { configureStore } from "@reduxjs/toolkit"\nimport registerReducer from "./components/stateSlices/registerSlice"\nimport loginReducer from "./components/stateSlices/loginSlice"\n\nexport default configureStore({\n  reducer: {\n    register: registerReducer,\n    login: loginReducer,\n  },\n})
\n

Update the LoginForm component with the following highlighted code snippet.

\n
client/src/components/LoginForm.js
\n
import React from "react"\nimport { Link } from "react-router-dom"\nimport { useFormik } from "formik"\nimport * as Yup from "yup"\nimport { loginUser } from "./stateSlices/loginSlice"\nimport { useSelector, useDispatch } from "react-redux"\n\nconst LoginForm = ({ history }) => {\n  const { status, loggedInUser, error } = useSelector(state => state.login)\n\n  const dispatch = useDispatch()\n\n  const formik = useFormik({\n    initialValues: {\n      email: "",\n      password: "",\n    },\n    validationSchema: Yup.object({\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n      password: Yup.string().required("Please enter your password"),\n    }),\n    onSubmit: async values => {\n      dispatch(loginUser(values))\n    },\n  })\n\n  if (loggedInUser) {\n    localStorage.setItem("loggedInUser", JSON.stringify(loggedInUser))\n    history.push("/welcome")\n  }\n\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 onSubmit={formik.handleSubmit}>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5">\n          {error && (\n            <div className="alert alert-danger" role="alert">\n              {error}\n            </div>\n          )}\n          <input\n            className="form-control form-control-lg"\n            id="email"\n            name="email"\n            type="email"\n            {...formik.getFieldProps("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            {...formik.getFieldProps("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\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            {status === "loading" ? (\n              <div className="spinner-border text-light" role="status">\n                <span className="sr-only">Loading...</span>\n              </div>\n            ) : null}{" "}\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="/password/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

When the user fills in the login form and clicks on the Login button, we send the loginUser thunk to the store. If the login is successful, we save the loggedInUser object in the local storage and direct the user to a page that will greet the user with the text Welcome .

\n

Let’s create the Welcome component.

\n
client/src/components/Welcome.js
\n
import React from "react"\nimport { useSelector } from "react-redux"\n\nconst Welcome = () => {\n  const { loggedInUser } = useSelector(state => state.login)\n  return (\n    <div className="display-3 text-center mt-5">\n      Welcome {loggedInUser.firstName}\n    </div>\n  )\n}\n\nexport default Welcome
\n

Keeping the user logged in on page refresh

\n

We have saved the loggedInUser object (which contains the JSON Web Token) in local storage. In order to make sure that the user stays logged into our application even after page reload, we will pass an option called preloadedState to the configuration object passed to configureStore.

\n

We will use this option to hydrate the loggedInUser field with the loggedInUser object stored in local storage, unless the user has logged out of our application.

\n

Add the highlighted code snippets in the store.js file.

\n
client/src/store.js
\n
import { configureStore } from "@reduxjs/toolkit"\nimport registerReducer from "./components/stateSlices/registerSlice"\nimport loginReducer from "./components/stateSlices/loginSlice"\n\nconst loggedInUserFromStorage = localStorage.getItem("loggedInUser")\n  ? JSON.parse(localStorage.getItem("loggedInUser"))\n  : null\n\nconst preloadedState = {\n  login: {\n    loggedInUser: loggedInUserFromStorage,\n  },\n}\n\nexport default configureStore({\n  reducer: {\n    register: registerReducer,\n    login: loginReducer,\n  },\n  preloadedState,\n})
\n

Now, you should stay logged in even when you refresh a page. Now, close the tab where your application is running. Then, open the application by visiting http://localhost:3000 and you should still be logged in.

\n

We have to take care of one more thing. After the user logs in to our application, we want to show the name of the user in the Header. Also, when a user clicks on the name, we will show a logout link.

\n

Add the highlighted code snippets in Header.js.

\n
client/src/components/Header.js
\n
import React from "react"\nimport { Link, withRouter } from "react-router-dom"\nimport { useDispatch, useSelector } from "react-redux"\nimport { logout } from "./stateSlices/loginSlice"\n\nconst Header = ({history}) => {\n  const { loggedInUser } = useSelector(state => state.login)\n\n  const dispatch = useDispatch()\n\n  const logoutSubmitHandler = () => {\n    dispatch(logout())\n    localStorage.removeItem("loggedInUser")\n    history.push("/login");\n  }\n\n  return (\n    <header>\n      <nav>\n        <ul className="navbar-list">\n          {loggedInUser ? (\n            <div className="dropdown">\n              <button\n                className="btn btn-lg btn-primary dropdown-toggle"\n                type="button"\n                id="dropdownMenu2"\n                data-toggle="dropdown"\n                aria-haspopup="true"\n                aria-expanded="false"\n              >\n                {loggedInUser.firstName}\n              </button>\n              <div\n                className="dropdown-menu dropdown-menu-right"\n                aria-labelledby="dropdownMenu2"\n              >\n                <button\n                  className="dropdown-item"\n                  type="button"\n                  onClick={logoutSubmitHandler}\n                >\n                  Logout\n                </button>\n              </div>\n            </div>\n          ) : (\n            <Link to="/login" className="navbar-list-item">\n              Register/Login\n            </Link>\n          )}\n        </ul>\n      </nav>\n    </header>\n  )\n}\n\nexport default withRouter(Header)
\n

When a user clicks on the Logout link, we remove the loggedInUser object from the local storage and direct the user to the login page.

\n

In order for the dropdown component to work, we need to add some scripts in the index.html file in the public folder.

\n
client/public/index.html
\n
<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />\n    <meta name="viewport" content="width=device-width, initial-scale=1" />\n    <meta name="theme-color" content="#000000" />\n    <meta\n      name="description"\n      content="Web site created using create-react-app"\n    />\n    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />\n    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id="root"></div>\n    <script\n      src="https://code.jquery.com/jquery-3.3.1.slim.min.js"\n      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"\n      crossorigin="anonymous"\n    ></script>\n    <script\n      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"\n      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"\n      crossorigin="anonymous"\n    ></script>\n    <script\n      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"\n      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"\n      crossorigin="anonymous"\n    ></script>\n  </body>\n</html>
\n

Now, when you login using your credentials, you should see a welcome message and your firstName in the header.

\n

And when you click on the icon next to your name, you should see a Logout link.

\n

\n \n \n \n \n

\n

Also, if you check Redux DevTools, you can see the state and the action types generated by the loginUser thunk.

\n

\n \n \n \n \n

\n

\n \n \n \n \n

\n

Go to part-12

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