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

When a user clicks on the link I forgot my password at the bottom of the login form, we direct the user to the /account/password/forgot route, where we show a form where the user will enter the email address for which he/she wants to recover the password.

\n

We will create this form the same way we created the registration and the login form - using Formik & Yup.

\n

Create a password reset form

\n

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

\n
client/src/components/PasswordResetFormEmail.js
\n
import React from "react";\nimport { useFormik } from "formik";\nimport * as Yup from "yup";\n\nconst PasswordResetFormEmail = () => {\n\n  const formik = useFormik({\n    initialValues: {\n      email: "",\n    },\n    validationSchema: Yup.object({\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n    }),\n    onSubmit: (values) => {\n      console.log(values));\n    },\n  });\n\n  return (\n    <div className="passwordResetEmail-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Reset Password</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          <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            {...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\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            Request Password Reset\n          </button>\n        </div>\n      </form>\n    </div>\n  );\n};\n\nexport default PasswordResetFormEmail;
\n

We will render the form at the /account/password/forgot route.

\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"\nimport Welcome from "./components/Welcome"\nimport PasswordResetFormEmail from "./components/PasswordResetFormEmail"\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <Switch>\n        <Route\n          path="/account/password/forgot"\n          component={PasswordResetFormEmail}\n        />\n        <Route path="/register" component={RegisterForm} />\n        <Route path="/login" component={LoginForm} />\n        <Route path="/welcome" component={Welcome} />\n      </Switch>\n    </>\n  )\n}\n\nexport default App
\n

Now, when we click on the I forgot my password link, we should see a form as shown below.

\n

\n \n \n \n \n

\n

After the user fills in his/her email address and clicks on the Request Password Reset button, we make a POST request to the /account/password/forgot route. Let’s configure this route.

\n

Inside the routes folder, create a file named passwordResetRoutes.js.

\n
server/routes/passwordResetRoutes.js
\n
const express = require("express")\nconst dotenv = require("dotenv")\nconst crypto = require("crypto")\nconst asyncHandler = require("express-async-handler")\nconst User = require("../models/userModel")\nconst sgMail = require("@sendgrid/mail")\n\ndotenv.config()\n\nsgMail.setApiKey(process.env.SENDGRID_API_KEY)\n\nconst router = express.Router()\n\nrouter.post(\n  "/password/forgot",\n  asyncHandler(async (req, res, next) => {\n    const user = await User.findOne({ email: req.body.email })\n\n    if (user) {\n      user.passwordResetToken = crypto.randomBytes(20).toString("hex")\n      user.passwordResetExpires = Date.now() + 3600000\n      await user.save()\n\n      res.json({\n        message:\n          "I just sent a message to the email you provided with a link to reset your password. Please check your inbox and follow the instructions in the email.",\n      })\n\n      const passwordResetUrl = `http://${req.headers.host}/password/reset/${user.passwordResetToken}`\n      const msg = {\n        to: user.email,\n        from: "rawgrittt@gmail.com",\n        subject: "Reset your password",\n        html: `<h1>Password Reset Instructions</h1>\n        <p>Click on the link below to reset your password for your account.</p>\n        <a style="font-weight:bold; font-size: 1rem" href=${passwordResetUrl}>Change my password</a>\n        <p>The link will expire in an hour.</p>\n        <p>Hemanta Sundaray</p>`,\n      }\n\n      ;(async () => {\n        try {\n          await sgMail.send(msg)\n        } catch (error) {\n          console.error(error)\n          if (error.response) {\n            console.error(error.response.body)\n          }\n        }\n      })()\n    } else {\n      const err = new Error("No account with that email exists")\n      err.status = 404\n      next(err)\n    }\n  })\n)\n\nmodule.exports = router
\n

Let’s try to understand what we are trying to do inside the route handler function.

\n

First, we check whether we have a user with the given email address. If yes, we then add two additional fields -passwordResetToken & passwordResetExpires - to the user document.

\n

We have created the passwordResetToken using Node’s crypto module. The crypto.randomBytes() method generates cryptographically strong pseudo-random data for a given number of bytes. We then transform the random data to a string value using the toString() method.

\n

We have configured the passwordResetExpires field in such a way that the link expires 1 hour after the user receives the password reset link.

\n

Line 29: passwordResetUrl is the URL we direct the user to once he/she clicks on the Change my password link.

\n

Line 32: This is the email address (registered with SendGrid) users will receive password reset links from.

\n

You can of course change the subject line and the html body of the email as per your requirement.

\n

Then we send the message using sgMail.send() method.

\n
\n

Note: We will use a third party service called SendGrid that will allow us to send emails without us having to maintain email servers. We will use SendGrid’s WebAPI to send emails from our application. We need to install the @sendgrid/mail package.

\n
\n

We need to add two fields - passwordResetToken & passwordResetExpires - in the User model.

\n
server/models/userModel.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  passwordResetToken: {\n    type: String,\n  },\n  passwordResetExpires: {\n    type: Date,\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

Then we require the passwordResetRoutes.js module in index.js and add the router in the middleware handling chain.

\n
server/index.js
\n
const express = require("express")\nconst dotenv = require("dotenv")\nconst globalErrorHandler = require("./middleware/errorMiddleware")\nconst userRoutes = require("./routes/userRoutes")\nconst passwordResetRoutes = require("./routes/passwordResetRoutes")\n\nconst connectDB = require("./config/db")\n\ndotenv.config()\n\nconnectDB()\n\nconst app = express()\n\napp.use(express.json())\n\napp.use("/api/users", userRoutes)\napp.use("/account", passwordResetRoutes)\n\napp.use(globalErrorHandler)\n\nconst PORT = process.env.PORT || 5000\n\napp.listen(PORT, () => {\n  console.log(`Server listening on port ${PORT}`)\n})
\n

We also need to install the @sendgrid/mail package and add the sendgrid API key in the .env file.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npm i @sendgrid/mail
\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\nSENDGRID_API_KEY=<your-sendgrid-api-key>
\n
\n

Note: You need to create an account on www.sendgrid.com and get the SendGrid API key. We need a SendGrid API key, so that SendGrid can recognize our application when we send a request to SendGrid’s API.

\n
\n

Create a PasswordResetEmail state slice

\n

Inside the stateSlices folder, create a file named passwordResetEmailSlice.js.

\n
client/src/components/stateSlices/passwordResetEmailSlice.js
\n
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"\nimport axios from "axios"\n\nconst initialState = {\n  status: "idle",\n  emailSentSuccess: null,\n  error: null,\n}\n\nexport const sendPasswordResetEmail = createAsyncThunk(\n  "passwordReset/sendPasswordResetEmail",\n  async (passwordResetEmail, { rejectWithValue }) => {\n    try {\n      const { data } = await axios.post(\n        "/account/password/forgot",\n        passwordResetEmail\n      )\n      return data\n    } catch (err) {\n      return rejectWithValue(err.response.data)\n    }\n  }\n)\n\nexport const passwordResetSlice = createSlice({\n  name: "passwordReset",\n  initialState,\n  reducers: {},\n  extraReducers: {\n    [sendPasswordResetEmail.pending]: (state, action) => {\n      state.status = "loading"\n    },\n    [sendPasswordResetEmail.fulfilled]: (state, action) => {\n      state.status = "succeeded"\n      state.emailSentSuccess = action.payload\n      state.error = null\n    },\n    [sendPasswordResetEmail.rejected]: (state, action) => {\n      state.status = "failed"\n      state.error = action.payload.message\n      state.emailSentSuccess = null\n    },\n  },\n})\n\nexport default passwordResetSlice.reducer
\n

Add the reducer 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"\nimport passwordResetEmailReducer from "./components/stateSlices/passwordResetEmailSlice"\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    passwordResetEmail: passwordResetEmailReducer,\n  },\n  preloadedState,\n})
\n

We will update the passwordResetFormEmail.js file, so that we can dispatch actions and interact with the global Redux store.

\n
client/src/components/PasswordResetFormEmail.js
\n
import React from "react"\nimport { useFormik } from "formik"\nimport * as Yup from "yup"\nimport { useSelector, useDispatch } from "react-redux"\nimport { sendPasswordResetEmail } from "./stateSlices/passwordResetEmailSlice"\n\nconst PasswordResetFormEmail = () => {\n  const { status, emailSentSuccess, error } = useSelector(\n    state => state.passwordResetEmail\n  )\n\n  const dispatch = useDispatch()\n\n  const formik = useFormik({\n    initialValues: {\n      email: "",\n    },\n    validationSchema: Yup.object({\n      email: Yup.string()\n        .email("Invalid email address")\n        .required("Please enter your email address"),\n    }),\n    onSubmit: values => {\n      dispatch(sendPasswordResetEmail(values))\n    },\n  })\n\n  return (\n    <div className="passwordResetEmail-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Reset Password</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          {emailSentSuccess && (\n            <div\n              className="alert alert-success password-reset-email"\n              role="alert"\n            >\n              {emailSentSuccess.message}\n            </div>\n          )}\n          {error && (\n            <div className="alert alert-danger" role="alert">\n              {error}\n            </div>\n          )}\n\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            {...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\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            Request Password Reset\n          </button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default PasswordResetFormEmail
\n

When the user enters the email address for which he/she wants to reset the password and clicks on the Request Password Reset button, The user receives a message in his/her email address with a link to reset the password.

\n

\n \n \n \n \n

\n

When the user clicks on the Change my password link, we show a form where the user enters his/her new password as shown below.

\n

\n \n \n \n \n

\n

Let’s create this form.

\n

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

\n
client/src/components/PasswordResetFormPassword.js
\n
import React from "react"\nimport { useFormik } from "formik"\nimport * as Yup from "yup"\n\nconst PasswordResetFormPassword = ({ history, match }) => {\n  const formik = useFormik({\n    initialValues: {\n      password: "",\n    },\n    validationSchema: Yup.object({\n      password: Yup.string().required("Please enter your password"),\n    }),\n    onSubmit: values => {\n      console.log(values)\n    },\n  })\n\n  return (\n    <div className="passwordResetPassword-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Reset Password</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"></div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="password">Enter a new password:</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            {...formik.getFieldProps("email")}\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\n            type="submit"\n            className="btn btn-lg btn-primary btn-block login-button"\n          >\n            Reset Password\n          </button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default PasswordResetFormPassword
\n

We will show the form at the /password/reset/:token route.

\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"\nimport Welcome from "./components/Welcome"\nimport PasswordResetFormEmail from "./components/PasswordResetFormEmail"\nimport PasswordResetFormPassword from "./components/PasswordResetFormPassword"\n\nconst App = () => {\n  return (\n    <>\n      <Header />\n      <Switch>\n        <Route\n          path="password/reset/:token"\n          component={PasswordResetFormPassword}\n        />\n        <Route\n          path="/account/password/forgot"\n          component={PasswordResetFormEmail}\n        />\n        <Route path="/register" component={RegisterForm} />\n        <Route path="/login" component={LoginForm} />\n        <Route path="/welcome" component={Welcome} />\n      </Switch>\n    </>\n  )\n}\n\nexport default App
\n

After the user enters a new password and clicks on the Reset Password button, we send a POST request to the /account/password/reset/:token endpoint.

\n

We will configure this endpoint in the passwordResetRoutes.js file.

\n
server/routes/passwordResetRoutes.js
\n
const express = require("express")\nconst crypto = require("crypto")\nconst dotenv = require("dotenv")\nconst asyncHandler = require("express-async-handler")\nconst User = require("../models/userModel")\nconst sgMail = require("@sendgrid/mail")\n\ndotenv.config()\n\nsgMail.setApiKey(process.env.SENDGRID_API_KEY)\n\nconst router = express.Router()\n\nrouter.post(\n  "/password/forgot",\n  asyncHandler(async (req, res, next) => {\n    const user = await User.findOne({ email: req.body.email })\n\n    if (user) {\n      user.passwordResetToken = crypto.randomBytes(20).toString("hex")\n      user.passwordResetExpires = Date.now() + 3600000\n      await user.save()\n\n      res.json({\n        message:\n          "I just sent a message to the email you provided with a link to reset your password. Please check your inbox and follow the instructions in the email.",\n      })\n\n      const passwordResetUrl = `http://${req.headers.host}/password/reset/${user.passwordResetToken}`\n      const msg = {\n        to: user.email,\n        from: "rawgrittt@gmail.com",\n        subject: "Reset your password",\n        html: `<h1>Password Reset Instructions</h1>\n        <p>Click on the link below to reset your password for your account.</p>\n        <a style="font-weight:bold; font-size: 1rem" href=${passwordResetUrl}>Change my password</a>\n        <p>The link will expire in an hour.</p>\n        <p>Hemanta Sundaray</p>`,\n      }\n\n      ;(async () => {\n        try {\n          await sgMail.send(msg)\n        } catch (error) {\n          console.error(error)\n          if (error.response) {\n            console.error(error.response.body)\n          }\n        }\n      })()\n    } else {\n      const err = new Error("No account with that email exists")\n      err.status = 404\n      next(err)\n    }\n  })\n)\n\nrouter.post(\n  "/password/reset/:token",\n  asyncHandler(async (req, res, next) => {\n    const user = await User.findOne({\n      passwordResetToken: req.params.token,\n      passwordResetExpires: { $gt: Date.now() },\n    })\n\n    if (user) {\n      user.password = req.body.password\n      user.passwordResetToken = undefined\n      user.passwordResetExpires = undefined\n      const updatedUser = await user.save()\n      res.json(updatedUser)\n    } else {\n      const err = new Error("Password reset token is invalid or has expired")\n      err.status = 404\n      next(err)\n    }\n  })\n)\n\nmodule.exports = router
\n

In the route handler function, we check whether we have a user wherein the value of the passwordResetToken field matches the token in the passwordResetUrl and the value of the passwordResetExpires field is within 1 hour of the user receiving the password reset link.

\n

Once we complete the check for token validity and token expiry, we update the user’s password with the new password and remove the two fields - passwordResetToken(line 69) and passwordResetExpires(line 70) - from the user document. Otherwise, we send an error message to the client.

\n

Create a PasswordResetPassword state slice

\n

Inside the stateSlices folder, create a file named passwordResetPasswordSlice.js.

\n
client/components/stateSlices/passwordResetPasswordSlice.js
\n
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"\nimport axios from "axios"\n\nconst initialState = {\n  status: "idle",\n  passwordReset: null,\n  error: null,\n}\n\nexport const sendNewPassword = createAsyncThunk(\n  "passwordReset/sendNewPassword",\n  async ({ password, token }, { rejectWithValue }) => {\n    try {\n      const { data } = await axios.post(`/account/password/reset/${token}`, {\n        password,\n      })\n      return data\n    } catch (err) {\n      return rejectWithValue(err.response.data)\n    }\n  }\n)\n\nexport const passwordResetSlice = createSlice({\n  name: "passwordReset",\n  initialState,\n  reducers: {},\n  extraReducers: {\n    [sendNewPassword.pending]: (state, action) => {\n      state.status = "loading"\n    },\n    [sendNewPassword.fulfilled]: (state, action) => {\n      state.status = "succeeded"\n      state.passwordReset = true\n    },\n    [sendNewPassword.rejected]: (state, action) => {\n      state.status = "failed"\n      state.error = action.payload.message\n    },\n  },\n})\n\nexport default passwordResetSlice.reducer
\n

We then add the reducer 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"\nimport passwordResetEmailReducer from "./components/stateSlices/passwordResetEmailSlice"\nimport passwordResetPasswordReducer from "./components/stateSlices/passwordResetPasswordSlice"\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    passwordResetEmail: passwordResetEmailReducer,\n    passwordResetPassword: passwordResetPasswordReducer,\n  },\n  preloadedState,\n})
\n

We will update the passwordResetFormPassword.js file, so that we can dispatch actions and interact with the global Redux store.

\n
client/src/components/PasswordResetFormPassword.js
\n
import React from "react"\nimport { useFormik } from "formik"\nimport * as Yup from "yup"\nimport { useSelector, useDispatch } from "react-redux"\nimport { sendNewPassword } from "./stateSlices/passwordResetPasswordSlice"\n\nconst PasswordResetFormPassword = ({ history, match }) => {\n  const { status, passwordReset, error } = useSelector(\n    state => state.passwordResetPassword\n  )\n\n  const dispatch = useDispatch()\n\n  const formik = useFormik({\n    initialValues: {\n      password: "",\n    },\n    validationSchema: Yup.object({\n      password: Yup.string().required("Please enter your password"),\n    }),\n    onSubmit: values => {\n      const { password } = values\n      dispatch(\n        sendNewPassword({\n          password,\n          token: match.params.token,\n        })\n      )\n    },\n  })\n\n  if (passwordReset) {\n    history.push("/login")\n  }\n\n  return (\n    <div className="passwordResetPassword-form-container">\n      <div className="col-10 col-sm-8 col-md-5 mx-auto">\n        <h1 className="font-weight-bold">Reset Password</h1>\n      </div>\n      <form onSubmit={formik.handleSubmit}>\n        {error && (\n          <div className="alert alert-danger" role="alert">\n            {error}\n          </div>\n        )}\n\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto mt-5"></div>\n        <div className="form-group col-10 col-sm-8 col-md-5 mx-auto">\n          <label htmlFor="password">Enter a new password:</label>\n          <input\n            className="form-control form-control-lg"\n            id="password"\n            name="password"\n            type="password"\n            {...formik.getFieldProps("email")}\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\n            type="submit"\n            className="btn btn-lg btn-primary btn-block login-button"\n          >\n            {status === "loading" ? (\n              <div className="spinner-border text-light" role="status">\n                <span className="sr-only">Loading...</span>\n              </div>\n            ) : null}{" "}\n            Reset Password\n          </button>\n        </div>\n      </form>\n    </div>\n  )\n}\n\nexport default PasswordResetFormPassword
\n

Now, when the user enters a new password and clicks on the Reset Password button, the user is taken to the login page, where he/she can enter his/her email address and the new password to log in to the application.

\n

This completes the password reset feature of our application and marks the end of the series.

\n

Conclusion

\n

The user authentication that we implemented in this blog series is the exact implementation that I have on my site www.sundaray.io.

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