Forem: Hoang

Next.js and MongoDB full-fledged app Part 4: Posts and Comments

Hoang — Fri, 25 Mar 2022 12:55:50 +0000

This is a follow-up to Part 3. Make sure you read it before this post.

Again, Below are the Github repository and a demo for this project to follow along.

Github repo

Demo

About `nextjs-mongodb-app` project

> nextjs-mongodb-app is a Full-fledged serverless app made with Next.JS and MongoDB

Different from many other Next.js tutorials, this:

Does not use the enormously big Express.js, supports serverless
Minimal, no fancy stuff like Redux or GraphQL for simplicity in learning
Using Next.js latest features like API Routes or getServerSideProps

For more information, visit the Github repo.

What we are making

We are working on the social media features as seen on Facebook or Twitter:

Post Feature allows you to create a post
Comment Feature allows you to comment on such posts

Build the posts feature

Create Post API

Let's build an API to create a post at POST /api/posts. Create /pages/api/posts/index.js:

import { auths, database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";

const handler = nc();

handler.use(database);

handler.post(
  ...auths,
  validateBody({
    type: "object",
    properties: {
      content: { type: "string", minLength: 1, maxLength: 280 },
    },
    required: ["content"],
    additionalProperties: false,
  }),
  async (req, res) => {
    if (!req.user) {
      return res.status(401).end();
    }

    const post = {
      content: req.body.content,
      creatorId: req.user._id,
      createdAt: new Date(),
    };

    const { insertedId } = await req.db.collection("posts").insertOne(post);
    post._id = insertedId;

    return res.json({ post });
  }
);

export default handler;

For this API, we need to use the database and auths middlewarefor database connection and authentication. However, notice that I only use the auths in .post() instead of putting it in .use(). The reason is that a later API in this file (GET posts) does not require authentication.

We first pass the request through our validateBody for validation. Currently, let's limit the length of the post to 280 characters (Twitter's).

We first check if the user is authenticated using req.user. Then, if he or she is, we created and inserted the post into the posts collection. The post _id is not known beforehand so we attach it (insertedId) later and return the post object.

Create Post UI

We can create a component that shows an input and a submit button that allow users to publish a post.

import { useCurrentUser } from "@/lib/user";
import Link from "next/link";
import { useCallback, useRef } from "react";

const Poster = () => {
  const { data, error } = useCurrentUser();
  const contentRef = useRef();

  const onSubmit = useCallback(
    async (e) => {
      e.preventDefault();
      try {
        await fetcher("/api/posts", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ content: contentRef.current.value }),
        });
        contentRef.current.value = "";
      } catch (e) {
        console.error(e.message);
      }
    },
    [mutate]
  );

  return (
    <div>
      <h3>Share your thoughts</h3>
      {data?.user ? (
        <form onSubmit={onSubmit}>
          <input
            ref={contentRef}
            placeholder={`What's on your mind, ${data.user.name}?`}
          />
          <button type="submit">Post</button>
        </form>
      ) : (
        <p>
          Please{" "}
          <Link href="/login">
            <a>sign in</a>
          </Link>{" "}
          to post
        </p>
      )}
    </div>
  );
};

Since the user must be authenticated, we use our useCurrentUser hook to get the current user and show a message if the hook return user = null.

On submission, we send the POST request to our just created API and reset the input content afterward.

Get Posts API with pagination

Let's build an API to get all posts at GET /api/posts. Create pages/api/posts/index.js:

import { database } from "@/api-lib/middlewares";
import nc from "next-connect";

const handler = nc();

handler.use(database);

handler.get(async (req, res) => {
  const posts = req.db
    .collection("posts")
    .find()
    .sort({ _id: -1 }) // sort by insertion order
    .toArray();

  res.json({ posts });
});

export default handler;

The above is sufficient to retrieve a list of all posts in the database. It would return the following:

[
  {
    "_id": "614dafac52fd31818950e464",
    "content": "Second.",
    "creatorId": "614dacd052fd31818950e463",
    "createdAt": "2021-09-24T10:59:56.194Z"
  },
  {
    "_id": "614dacda09d00ffae6abf2e4",
    "content": "First!",
    "creatorId": "614dacd052fd31818950e463",
    "createdAt": "2021-09-24T10:47:54.790Z"
  }
]

However, what if we want to get the creator info on each post? Introducing: MongoDB aggregation.

const posts = req.db
  .collection("posts")
  .aggregate([
    { $sort: { _id: -1 } },
    {
      $lookup: {
        from: "users",
        localField: "creatorId",
        foreignField: "_id",
        as: "creator",
      },
    },
    { $unwind: "$creator" },
    {
      $project: {
        "creator.password": 0,
        "creator.email": 0,
        "creator.emailVerified": 0,
        "creator.bio": 0,
      },
    },
  ])
  .toArray();

The aggregation pipeline runs through multiple stages to transform the documents. With the above, we:

Sort the posts using the $sort. Reverse sorting the _id allows us to list the posts in the reverse of the insertion order.
Use $lookup to find a document from users collection where the local field posts.creatorId is equal to the foreign field user._id, then set it to creator. This is similar to performing a "left outer join" in a tranditional SQL database.
However, creator is then an array (since we find all occurrences that match the above equality), so we use $unwind and turn it into a single object. (Note: $unwind actually outputs multiple documents for each element of the array, but since we know we always have only one, we "abuse" it to deconstruct the array into a single element.)
Use $project to hide the sensitive fields that come from the user document, similar to how we did in Endpoint to get the current user. We can also remove fields we don't need such as bio, to reduce bandwidth usage.

With that, the result is now:

[
  {
    "_id": "614dafac52fd31818950e464",
    "content": "Second.",
    "creatorId": "614dacd052fd31818950e463",
    "createdAt": "2021-09-24T10:59:56.194Z",
    "creator": {
      "_id": "614dacd052fd31818950e463",
      "profilePicture": "https://res.cloudinary.com/dbplcha6k/image/upload/v1632480534/gk9vbleo0nioprpx3mm3.jpg",
      "name": "Hoang Vo",
      "username": "hoangvvo"
    }
  },
  {
    "_id": "614dacda09d00ffae6abf2e4",
    "content": "First!",
    "creatorId": "614dacd052fd31818950e463",
    "createdAt": "2021-09-24T10:47:54.790Z",
    "creator": {
      "_id": "614dacd052fd31818950e463",
      "profilePicture": "https://res.cloudinary.com/dbplcha6k/image/upload/v1632480534/gk9vbleo0nioprpx3mm3.jpg",
      "name": "Hoang Vo",
      "username": "hoangvvo"
    }
  }
]

Ideally, however, we cannot load every single post in one request. Therefore, we need to implement pagination for the above Get Posts API.

The upcoming is a simple pagination implementation using "createdAt" as a "cursor" along with a limit argument. Since the posts fetched are always sorted in the newest-first order, we can find the next "pages" by querying documents whose createdAt is before that of the last fetched post.

// page 1: Fetch 10 posts no filter
[
 { "content": "First", "createdAt": 2021-09-24T06:00:00.000+00:00 },
 /* ... */
 { "content": "Tenth", "createdAt": 2021-09-24T01:00:00.000+00:00 }, // the cursor
]

// page 2: Fetch 10 posts, where `createdAt` < 2021-09-24T01:00:00.000+00:00
[
 { "content": "Eleventh", "createdAt": 2021-09-23T23:50:00.000+00:00 },
 /* ... */
]

Let's update our pipeline to handle it:

handler.get(async (req, res) => {
  const posts = req.db
    .collection("posts")
    .aggregate([
      {
        $match: {
          ...(req.query.before && {
            createdAt: { $lt: new Date(req.query.before) },
          }),
        },
      },
      { $sort: { _id: -1 } },
      { $limit: limit || 10 },
      {
        $lookup: {
          from: "users",
          localField: "creatorId",
          foreignField: "_id",
          as: "creator",
        },
      },
      { $unwind: "$creator" },
      {
        $project: {
          "creator.password": 0,
          "creator.email": 0,
          "creator.emailVerified": 0,
          "creator.bio": 0,
        },
      },
    ])
    .toArray();

  res.json({ posts });
});

We use a $match aggregation to select documents whose createdAt is less than the before query value if provided. For this to work req.query.before should be either a number or a string representation of the Date (which can come from Date.toJSON).

We also use $limit to limit the number of documents. Make sure $limit is placed after $sort because we need to sort the documents before taking the first numbers of them
(otherwise, we may end up with incorrect sorting since it only sorts among the limited posts).

Get Posts UI

Post component

We can create a single Post component like below:

import { format } from "@lukeed/ms";
import { useMemo } from "react";

export const Post = ({ post }) => {
  const timestampTxt = useMemo(() => {
    // note: post.createdAt might be of type string sometimes
    // as shown in a later section
    const diff = Date.now() - new Date(post.createdAt).getTime();
    if (diff < 1 * 60 * 1000) return "Just now";
    return `${format(diff, true)} ago`;
  }, [post.createdAt]);

  return (
    <div>
      <Link href={`/user/${post.creator.username}`}>
        <div style={{ display: flex }}>
          <img src={post.creator.profilePicture} alt={post.creator.username} />
          <div>
            <p>{post.creator.name}</p>
            <p>{post.creator.username}</p>
          </div>
        </div>
      </Link>
      <p>{post.content}</p>
      <time dateTime={String(post.createdAt)} className={styles.timestamp}>
        {timestampTxt}
      </time>
    </div>
  );
};

I used the @lukeed/ms library to get the typical "9 hours ago" text. The Next.js Link component allows users to navigate the creator's profile upon clicking on their info.

To display the UI in the frontend, let's create a SWR useSWRInfinite hook:

export function usePostPages({ limit = 10 } = {}) {
  const { data, error, size, ...props } = useSWRInfinite(
    (index, previousPageData) => {
      // reached the end
      if (previousPageData && previousPageData.posts.length === 0) return null;

      const searchParams = new URLSearchParams();
      searchParams.set("limit", limit);

      if (index !== 0) {
        // using oldest posts createdAt date as cursor
        // We want to fetch posts which has a date that is
        // before (hence the .getTime()) the last post's createdAt
        const before = new Date(
          new Date(
            previousPageData.posts[previousPageData.posts.length - 1].createdAt
          ).getTime()
        );

        searchParams.set("before", before.toJSON());
      }

      return `/api/posts?${searchParams.toString()}`;
    },
    fetcher,
    {
      refreshInterval: 10000,
      revalidateAll: false,
    }
  );

  const isLoadingInitialData = !data && !error;
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === "undefined");
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.posts?.length < limit);

  return {
    data,
    error,
    size,
    isLoadingMore,
    isReachingEnd,
    ...props,
  };
}

Several things going on in this hook, but the crucial part is that we try to construct our URL parameter based on our arguments:

limit parameter is set to limit.
before parameter is set to the string representation of the Date object. This is also what we expect on the server.

If this is not the first page (index !== 0), we will use the date of the oldest/last post (previousPageData.posts[previousPageData.posts.length - 1].createdAt) as our before parameter, since we want to fetch even older posts.

If the fetch returns nothing (previousPageData && previousPageData.posts.length === 0), we can guess that there are no more older posts. Be aware that we must first assert that previousPageData is not null since otherwise, the data might just not have arrived yet.

We also return some convenient variables like isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd. These are parts of the SWR example. You should try to understand their logic.

At this point, it is trivial to use the hook and the Post component to finish our Post list.

const PostList = () => {
  const { data, size, setSize, isLoadingMore, isReachingEnd } = usePostPages();
  const posts = data
    ? data.reduce((acc, val) => [...acc, ...val.posts], [])
    : [];
    return (<div>
  {
    posts.map((post) => (
      <Post key={post._id} className={styles.post} post={post} />
    ));
  }
  {
    isReachingEnd ? (
      <p>No more posts are found</p>
    ) : (
      <button disabled={isLoadingMore} onClick={() => setSize(size + 1)}>
        Load more
      </button>
    );
  }
  </div>)
};

Build the comment feature

Similarly, let's build our comment feature.

Create comment API

Let's build an API to create a post at POST /api/posts/[postId]/comments that create a comment for the post with ID postId. Create /pages/api/posts/[postId]/comments/index.js:

const handler = nc(ncOpts);

handler.use(database);

handler.post(
  ...auths,
  validateBody({
    type: "object",
    properties: {
      content: { type: "string", minLength: 1, maxLength: 280 },
    },
    required: ["content"],
    additionalProperties: false,
  }),
  async (req, res) => {
    if (!req.user) {
      return res.status(401).end();
    }

    const content = req.body.content;

    const post = await findPostById(req.db, req.query.postId);

    if (!post) {
      return res.status(404).json({ error: { message: "Post is not found." } });
    }

    const comment = {
      content,
      postId: new ObjectId(postId),
      creatorId,
      createdAt: new Date(),
    };
    const { insertedId } = await db.collection("comments").insertOne(comment);
    comment._id = insertedId;

    return res.json({ comment });
  }
);

We begin with authentication middleware and our validate body middleware to make sure the request is legit.

Before inserting the comment, we must check that the post exists by findPostById, which is simply a call of db.collection('posts').find(). If not, we return a 404.

Then, we simply insert the comment to the database, similar to the way we do with our Post API.

Create comment UI

Let's create a simple UI to submit the comment to the above API:

const Commenter = ({ post }) => {
  const contentRef = useRef();
  const [isLoading, setIsLoading] = useState(false);

  const { mutate } = useCommentPages({ postId: post._id });

  const onSubmit = useCallback(
    async (e) => {
      e.preventDefault();
      try {
        setIsLoading(true);
        await fetcher(`/api/posts/${post._id}/comments`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ content: contentRef.current.value }),
        });
        toast.success("You have added a comment");
        contentRef.current.value = "";
        // refresh post lists
        mutate();
      } catch (e) {
        toast.error(e.message);
      } finally {
        setIsLoading(false);
      }
    },
    [mutate, post._id]
  );

  return (
    <form onSubmit={onSubmit}>
      <input ref={contentRef} placeholder="Add your comment" />
      <button disable={isLoading}>Comment</button>
    </form>
  );
};

The UI above is simple enough, after inputting the comment, we send it to our API. This component should accept a prop so we know which post to add our comment to.

We will create the useCommentPages hook in the next part but the idea here is that we need to call mutate from it to refresh the comments after our comment submission.

Query comments API

Then, we create a paginated comments query API for a single post:

handler.get(async (req, res) => {
  const post = await findPostById(req.db, req.query.postId);

  if (!post) {
    return res.status(404).json({ error: { message: "Post is not found." } });
  }

  db.collection("comments")
    .aggregate([
      {
        $match: {
          postId: new ObjectId(req.query.postId),
          ...(req.query.before && {
            createdAt: { $lt: new Date(req.query.before) },
          }),
        },
      },
      { $sort: { _id: -1 } },
      { $limit: parseInt(req.query.limit, 10) },
      {
        $lookup: {
          from: "users",
          localField: "creatorId",
          foreignField: "_id",
          as: "creator",
        },
      },
      { $unwind: "$creator" },
      { $project: dbProjectionUsers("creator.") },
    ])
    .toArray();

  return res.json({ comments });
});

We similarly return 404 if the post in question is not found.

The aggregation code of comments is the same as that of posts. The only difference is that we also match against the postId field to select those from that post.

Comments List UI

We create the useCommentPages similar to what we do with usePostPages. The only additional argument is postId, since we only query comments for a specific post.

import { fetcher } from "@/lib/fetch";
import useSWRInfinite from "swr/infinite";

export function useCommentPages({ postId, limit = 10 } = {}) {
  const { data, error, size, ...props } = useSWRInfinite(
    (index, previousPageData) => {
      // reached the end
      if (previousPageData && previousPageData.comments.length === 0)
        return null;

      const searchParams = new URLSearchParams();
      searchParams.set("limit", limit);

      if (index !== 0) {
        const before = new Date(
          new Date(
            previousPageData.comments[
              previousPageData.comments.length - 1
            ].createdAt
          ).getTime()
        );

        searchParams.set("before", before.toJSON());
      }

      return `/api/posts/${postId}/comments?${searchParams.toString()}`;
    },
    fetcher,
    {
      refreshInterval: 10000,
      revalidateAll: false,
    }
  );

  const isLoadingInitialData = !data && !error;
  const isLoadingMore =
    isLoadingInitialData ||
    (size > 0 && data && typeof data[size - 1] === "undefined");
  const isEmpty = data?.[0]?.length === 0;
  const isReachingEnd =
    isEmpty || (data && data[data.length - 1]?.comments?.length < limit);

  return {
    data,
    error,
    size,
    isLoadingMore,
    isReachingEnd,
    ...props,
  };
}

Then, we create the comment list component. Again, this is similar to the post list component.

const CommentList = ({ post }) => {
  const { data, size, setSize, isLoadingMore, isReachingEnd } = useCommentPages(
    { postId: post._id }
  );

  const comments = data
    ? data.reduce((acc, val) => [...acc, ...val.comments], [])
    : [];

  return (
    <div>
      {comments.map((comment) => (
        <Comment key={comment._id} comment={comment} />
      ))}
      {isReachingEnd ? (
        <p>No more comments are found</p>
      ) : (
        <button disabled={isLoadingMore} onClick={() => setSize(size + 1)}>
          Load more
        </button>
      )}
    </div>
  );
};

Conclusion

It is the end of our implementation for the most important feature: Posts and Comments. Why don't we jump right into nextjs-mongodb.vercel.app/ and create some posts and comments.

I hope this has been helpful in working with your Next.js app. Again, check out the repository nextjs-mongodb-app. If you find this helpful, consider giving it a star to motivate me with further development and more content.

Good luck on your next Next.js + MongoDB project!

Next.js and MongoDB full-fledged app Part 3: Email Verification, Password Reset/Change

Hoang — Fri, 24 Sep 2021 18:09:30 +0000

(this post is actually rewritten from this old post to include new changes to the project)

This is a follow-up to Part 2. Make sure you read it before this post.

This time I am adding the following features: Email Verification, Password Reset, and Password Change.

Again, Below are the Github repository and a demo for this project to follow along.

Github repo

Demo

About `nextjs-mongodb-app` project

nextjs-mongodb-app is a Full-fledged serverless app made with Next.JS and MongoDB

Different from many other Next.js tutorials, this:

Does not use the enormously big Express.js, supports serverless
Minimal, no fancy stuff like Redux or GraphQL for simplicity in learning
Using Next.js latest features like API Routes or getServerSideProps

For more information, visit the Github repo.

What we are making

We are working on several features, which all involve email transactions.

Email Verification allows you to verify the emails users used to sign up by sending them a verification link.
Password Reset allows the users to reset their passwords from a reset link sent to their emails.
Password Change allows the users to change their passwords simply by inputting their old and new passwords.

Building Password Change

This is the easiest feature to implement. All we have to do is match the user's old password against the database and save their new one.

Password Change Section

I added the section right below the Profile Settings page.

import { useCurrentUser } from "@/lib/user";
import { useRouter } from "next/router";
import { useEffect, useCallback } from "react";
import { fetcher } from "@/lib/fetch";

const AboutYou = ({ user, mutate }) => {
  /* ... */
};

const Auth = () => {
  const oldPasswordRef = useRef();
  const newPasswordRef = useRef();

  const onSubmit = useCallback(async (e) => {
    e.preventDefault();
    try {
      await fetcher("/api/user/password", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          oldPassword: oldPasswordRef.current.value,
          newPassword: newPasswordRef.current.value,
        }),
      });
    } catch (e) {
      console.error(e.message);
    } finally {
      oldPasswordRef.current.value = "";
      newPasswordRef.current.value = "";
    }
  }, []);

  return (
    <section>
      <h4>Password</h4>
      <form onSubmit={onSubmit}>
        <input
          type="password"
          autoComplete="current-password"
          ref={oldPasswordRef}
          placeholder="Old Password"
        />
        <input
          type="password"
          autoComplete="new-password"
          ref={newPasswordRef}
          placeholder="New Password"
        />
        <button type="submit">Save</button>
      </form>
    </section>
  );
};

const SettingsPage = () => {
  const { data, error, mutate } = useCurrentUser();
  const router = useRouter();
  useEffect(() => {
    if (!data && !error) return; // useCurrentUser might still be loading
    if (!data.user) {
      router.replace("/login");
    }
  }, [router, data, error]);
  if (!data?.user) return null;
  return (
    <>
      <AboutYou user={data.user} mutate={mutate} />
      <Auth />
    </>
  );
};

export default SettingsPage;

When the user submits, we make a PUT call to /api/user/password with the old and new password. After the request, we clear the new and old password fields.

We now go ahead and create our API at /api/user/password.

Password Change API

Create /pages/api/user/password/index.js.

import { auths, database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";

const handler = nc();
handler.use(database, ...auths);

handler.put(
  validateBody({
    type: "object",
    properties: {
      oldPassword: { type: "string", minLength: 8 },
      newPassword: { type: "string", minLength: 8 },
    },
    required: ["oldPassword", "newPassword"],
    additionalProperties: false,
  }),
  async (req, res) => {
    if (!req.user) {
      res.json(401).end();
      return;
    }

    const { oldPassword, newPassword } = req.body;

    // We could not req.user because that object does not have the `password` field
    const currentUser = await db
      .collection("users")
      .findOne({ _id: req.user._id });

    const matched = await bcrypt.compare(oldPassword, currentUser.password);

    if (!matched) {
      res.status(401).json({
        error: { message: "The old password you entered is incorrect." },
      });
      return;
    }

    const password = await bcrypt.hash(newPassword, 10);

    await req.db
      .collection("users")
      .updateOne({ _id: currentUser._id }, { $set: { password } });

    res.status(204).end();
  }
);

export default handler;

We first validate the body using our validateBody middleware. Then, we check if the user is logged in by checking req.user. If not, it will send a 401 response.

Then, we fetch the user object, containing hashed password field. (In the previous version of this project, I directly compare using req.user.password. However, the new version uses projection to omit that field when authenticating users for security reasons.)

We then go ahead and retrieve oldPassword and newPassword from the request body. The oldPassword is compared against the hashed current password (bcrypt.compare(oldPassword, currentUser.password)). If it does not match, we reject the request. If it does we hash the new password (bcrypt.hash(newPassword, 10)) and save it in our database.

await req.db
  .collection("users")
  .updateOne({ _id: req.user._id }, { $set: { password } });

And the feature is ready to roll~

(Note: The GIF is from an old, barebone version :))

Password Reset

Now that the user can change their current password to a new one. Yet that is only when they know their current password. Let's implement the password reset feature.

Forget Password API

We will have two routes for this API.

POST /pages/api/user/password/reset: Handle requests to create a password reset token and send email
PUT /pages/api/user/password/reset: Reset password using a token.

Password reset request

Create /pages/api/user/password/reset/index.js:

import { sendMail } from "@/api-lib/mail";
import { database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";
import normalizeEmail from "validator/lib/normalizeEmail";
import { nanoid } from "nanoid";

const handler = nc();

handler.use(database);

handler.post(
  validateBody({
    type: "object",
    properties: {
      email: { type: "string", minLength: 1 },
    },
    required: ["email"],
    additionalProperties: false,
  }),
  async (req, res) => {
    const email = normalizeEmail(req.body.email);

    const user = await req.db.collection("users").findOne({ email });

    if (!user) {
      res.status(400).json({
        error: { message: "We couldn’t find that email. Please try again." },
      });
      return;
    }

    const securedTokenId = nanoid(32); // create a secure reset password token

    await db.collection("tokens").insertOne({
      _id: securedTokenId,
      creatorId: user._id,
      type: "passwordReset",
      expireAt: new Date(Date.now() + 20 * 60 * 1000), // let's make it expire after 20 min
    });

    await sendMail({
      to: user.email,
      from: "no-reply@nextjs-mongodb.vercel.app",
      subject: "[nextjs-mongodb-app] Reset your password.",
      html: `
      <div>
        <p>Hello, ${user.name}</p>
        <p>Please follow <a href="${process.env.WEB_URI}/forget-password/${securedTokenId}">this link</a> to reset your password.</p>
      </div>
      `,
    });

    res.status(204).end();
  }
);

export default handler;

We only need our database middleware in this API because we don't need any authentication info.

We first verify if there is a user with such email in the database req.db.collection('users').findOne({ email: req.body.email }).

If the user exists, we create a secure passwordReset token. We insert a document to our tokens collection with the created token along with the intended user's _id in creatorId. The secure token is set as the document _id (since _id is indexed by MongoDB, it allows faster lookup)

To set the token to expire after the expireAt property for security reasons, we can create an index on that collection like below (usually called when the server starts):

db.collection("tokens").createIndex("expireAt", { expireAfterSeconds: 0 });

We then send an email to the user with a password reset link (website_url/forget-password/{token}).

Note: You have to implement the sendEmail function.

Forget Password page

We now create a forget password page at /pages/forget-password/index.jsx

import { fetcher } from "@/lib/fetch";
import { useCallback, useRef } from "react";

const ForgetPasswordPage = () => {
  const emailRef = useRef();

  const onSubmit = useCallback(async (e) => {
    e.preventDefault();
    try {
      await fetcher("/api/user/password/reset", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: emailRef.current.value,
        }),
      });
    } catch (e) {
      console.error(e.message);
    }
  }, []);

  return (
    <>
      <Head>
        <title>Forget password</title>
      </Head>
      <h1>Forget password</h1>
      <p>
        Enter the email address associated with your account, and we&apos;ll
        send you a link to reset your password.
      </p>
      <form onSubmit={onSubmit}>
        <input
          ref={emailRef}
          type="email"
          autoComplete="email"
          placeholder="Email"
        />
        <button type="submit">Submit</button>
      </form>
    </>
  );
};

export default ForgetPasswordPage;

We simply ask the user for their email, which we then send to our just-created API above at '/api/user/password/reset'.

Reset Password API

We need an API to resolve the reset token.

Let's add a PUT request handler to /pages/api/user/password/reset.js:

import nc from "next-connect";
import bcrypt from "bcryptjs";
import database from "@/api-lib/middlewares";

const handler = nc();

handler.use(database);

handler.post(/* ... */);

handler.put(
  validateBody({
    type: "object",
    properties: {
      password: { type: "string", minLength: 8 },
      token: { type: "string", minLength: 0 },
    },
    required: ["password", "token"],
    additionalProperties: false,
  }),
  async (req, res) => {
    const deletedToken = await db
      .collection("tokens")
      .findOneAndDelete({ _id: id, type });

    if (!deletedToken) {
      res.status(403).end();
      return;
    }

    const password = await bcrypt.hash(newPassword, 10);
    await db
      .collection("users")
      .updateOne(
        { _id: deletedToken.creatorId },
        { $set: { password } }
      );

    res.status(204).end();
  }
);

export default handler;

The handler will try to find and delete the token we inserted earlier. If deleteToken is not null, we also know that the token is deleted from the database (we don't want the same token to be used twice).

If the token is null, we simply reject the request.

We then hash the password using bcrypt and update the user whose _id can be found at token.creatorId.

Reset Password page

This page represents the link that is sent to the user's email (website_url/forget-password/{token}). Create /pages/forget-password/[token].jsx:

import { database } from "@/api-lib/middlewares";
import nc from "next-connect";
import Head from "next/head";

const ResetPasswordTokenPage = ({ valid, token }) => {
  const passwordRef = useRef();

  const onSubmit = useCallback(
    async (event) => {
      event.preventDefault();
      setStatus("loading");
      try {
        await fetcher("/api/user/password/reset", {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            token,
            password: passwordRef.current.value,
          }),
        });
      } catch (e) {
        console.error(e.message);
      }
    },
    [token]
  );

  if (!valid)
    return (
      <>
        <h1>Invalid Link</h1>
        <p>
          It looks like you may have clicked on an invalid link. Please close
          this window and try again.
        </p>
      </>
    );

  return (
    <>
      <Head>
        <title>Forget password</title>
      </Head>
      <h1>Forget password</h1>
      <p>Enter a new password for your account</p>
      <form onSubmit={onSubmit}>
        <input
          ref={passwordRef}
          type="password"
          autoComplete="new-password"
          placeholder="New Password"
        />
        <button type="submit">Reset password</button>
      </form>
    </>
  );
};

export async function getServerSideProps(context) {
  await nc().use(database).run(context.req, context.res);

  const tokenDoc = await db.collection("tokens").findOne({
    _id: context.params.token,
    type: "passwordReset",
  });

  return { props: { token: context.params.token, valid: !!tokenDoc } };
}

export default ResetPasswordTokenPage;

For this page, we use getServerSideProps to check the token validity (This function is run server-side only). The token can be found in context.params since our page is a dynamic route (with dynamic token parameter: /pages/forget-password/[token].jsx).

Our database middleware is used to load the database into req.db. We use it to check if the token can be found in the database by querying its _id (we set the secure token as the document _id earlier).

The page component will know if the token is valid based on the valid prop, which is true if the token document can be found and false otherwise.

As we can see, if valid is false, we show a "Invalid Link" message.

Otherwise, we render an input for a new password.

After the user submit the new password, we simply make a request to the just created API along with the token received from props.

await fetcher("/api/user/password/reset", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    token,
    password: passwordRef.current.value,
  }),
});

Building Email Verification

Let's finish up with email verification. This feature is similar to password reset as we similarly send a link with the token to the user.

Email Verification API

Get started by creating /pages/api/user/email/verify.js. This will handle users' requests to receive a confirmation email.

import { sendMail } from "@/api-lib/mail";
import { auths, database } from "@/api-lib/middlewares";
import nc from "next-connect";

const handler = nc();

handler.post(async (req, res) => {
  if (!req.user) {
    res.json(401).end();
    return;
  }

  const securedTokenId = nanoid(32);

  const token = await {
    _id: securedTokenId,
    creatorId: req.user._id,
    type: "emailVerify",
    expireAt: new Date(Date.now() + 1000 * 60 * 60 * 24), // expires in 24h
  };

  await sendMail({
    to: req.user.email,
    from: "no-reply@nextjs-mongodb.vercel.app",
    subject: `Verification Email for ${process.env.WEB_URI}`,
    html: `
      <div>
        <p>Hello, ${req.user.name}</p>
        <p>Please follow <a href="${process.env.WEB_URI}/verify-email/${token._id}">this link</a> to confirm your email.</p>
      </div>
      `,
  });

  res.status(204).end();
});

export default handler;

In this handler, we are checking if the user is logged in and create a token that associates the user ID req.user._id. This token will expire in 24 hours.

The token creation and email sending are similar to those of Reset Password.

Email Verification page

Similar to the password reset page, we create a dynamic route page at /pages/verify-email/[token].jsx.

import { database } from "@/api-lib/middlewares";
import nc from "next-connect";
import Head from "next/head";

export default function EmailVerifyPage({ valid }) {
  return (
    <>
      <Head>
        <title>Email verification</title>
      </Head>
      <p>
        {valid
          ? "Thank you for verifying your email address. You may close this page."
          : "It looks like you may have clicked on an invalid link. Please close this window and try again."}
      </p>
    </>
  );
}

export async function getServerSideProps(context) {
  const handler = nc(ncOpts);
  handler.use(database);
  await handler.run(context.req, context.res);

  const { token } = context.params;

  const deletedToken = await db
    .collection("tokens")
    .findOneAndDelete({ _id: token, type: "emailVerify" });

  if (!deletedToken) return { props: { valid: false } };

  await db.collection("users").updateOne(
    { _id: deletedToken.creatorId },
    {
      emailVerified: true,
    }
  );

  return { props: { valid: true } };
}

For this page, we do the email verification process inside getServerSideProps. Similar to the reset password feature, we find and delete the token from the database. If the token is found (and thus deleted), we update the user whose _id found in the token creatorId to have emailVerify = true.

The returned prop valid inform the UI to show the correct message.

Present the email verification status

The returned value of our /api/user actually contains a property call emailVerified, as seen above.

Therefore, we can use our useCurrentUser SWR hook to show a message asking the user to verify his or her email.

export default () => {
  const {
    data: { user },
  } = useCurrentUser();
  if (!user.emailVerified)
    return (
      <p>
        <strong>Note:</strong> <span>Your email</span> (<span className="link">
          {user.email}
        </span>) is unverified.
      </p>
    );
  return null;
};

Conclusion

Tadah! We have managed to have the password change, password reset and email verification features in our app.

Check out the repository nextjs mongodb app.

I have spent hours writing these articles and even dozen more working on this project. If you find it helpful, I would love to see it getting shared and starred. Until then, good luck on your Next.js project!

Next.js and MongoDB full-fledged app Part 2: User profile and Profile Picture

Hoang — Sun, 29 Mar 2020 03:39:06 +0000

This is a follow-up to Part 1. Make sure you read it before this post. Today, I will showcase how I add editable user profile and profile Picture.

Again, below are the Github repository and a demo for this project to follow along.

Github repo

Demo

About `nextjs-mongodb-app` project

nextjs-mongodb-app is a Full-fledged serverless app made with Next.JS and MongoDB

Different from many other Next.js tutorials, this:

Does not use the enormously big Express.js
Supports serverless
Using Next.js v9 API Routes w/ middleware

For more information, visit the Github repo.

What we are making

(The GIF above is actually from an older version. Looks super bare-bone 😜)

We are adding the following features:

Profile Page
Edit Profile
Profile Picture

The user profile page

My user profile page will be at /user/my-username. Let's create /pages/user/[username]/index.jsx so we can dynamically show user profile based on the username param.

import { database } from "@/api-lib/middlewares";
import nc from "next-connect";
import Head from "next/head";

const ProfilePage = ({ user }) => {
  return (
    <>
      <Head>
        <title>
          {user.name} (@{user.username})
        </title>
      </Head>
      <div>
        <img
          src={user.profilePicture}
          width="128"
          height="128"
          alt={user.name}
        />
        <h1>
          <div>{user.name}</div>
          <div>@{user.username}</div>
        </h1>
      </div>
    </>
  );
};

export async function getServerSideProps(context) {
  await nc().use(database).run(context.req, context.res);

  const user = await req.db
    .collection("users")
    .findOne(
      { username: context.params.username },
      { projection: { password: 0, email: 0, emailVerified: 0 } }
    );

  if (!user) {
    return {
      notFound: true,
    };
  }
  user._id = String(user._id); // since ._id of type ObjectId which Next.js cannot serialize
  return { props: { user } };
}

export default ProfilePage;

For the above, we use getServerSideProps to retrieve the user data from the database.
Our database middleware is used to load the database into req.db. This works because getServerSideProps is run on the server-side.

Then, we call MongoDB findOne() to retrieve the user by the username from params (context.params.username). You can also notice that we filter out the sensitive fields via projection.

If the user is found, we return it as a prop. Otherwise, we return the not found page by setting notFound to true.

Our page component would receive the user prop as to render his or her information.

The Profile Setting page

Building the Profile Update API

The way for our app to update the user profile is would be to make a PATCH request to /api/user.

In pages/api/user/index.js, we add a handler for PATCH:

import { auths, database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";
import slug from "slug";

const handler = nc();

handler.use(database, ...auths);

handler.patch(
  validateBody({
    type: "object",
    properties: {
      username: { type: "string", minLength: 4, maxLength: 20 },
      name: { type: "string", minLength: 1, maxLength: 50 },
      bio: { type: "string", minLength: 0, maxLength: 160 },
    },
  }),
  async (req, res) => {
    if (!req.user) {
      req.status(401).end();
      return;
    }
    const { name, bio } = req.body;

    if (req.body.username) {
      username = slug(req.body.username);
      if (
        username !== req.user.username &&
        (await req.db.collection("users").countDocuments({ username })) > 0
      ) {
        res
          .status(403)
          .json({ error: { message: "The username has already been taken." } });
        return;
      }
    }

    const user = await db
      .collection("users")
      .findOneAndUpdate(
        { _id: new ObjectId(id) },
        {
          $set: {
            ...(username && { username }),
            ...(name && { name }),
            ...(typeof bio === "string" && { bio }),
          },
        },
        { returnDocument: "after", projection: { password: 0 } }
      )
      .then(({ value }) => value);

    res.json({ user });
  }
);

We first validate the body using our validateBody middleware. Then, we check if the user is logged in by checking req.user. If not, it will send a 401 response.

If a username is provided, we will slugify it and check if exists in the database. Finally, we call MongoDB findOneAndUpdate to update the user profile based on the data from req.body.

We then return the updated user document.

The Profile Settings Page

The next thing to do is have page at /settings for us to update our info.

Let's create pages/settings.jsx

import { useCurrentUser } from "@/lib/user";
import { fetcher } from '@/lib/fetch';
import { useRouter } from "next/router";
import { useEffect, useCallback } from "react";

const AboutYou = ({ user, mutate }) => {
  const usernameRef = useRef();
  const nameRef = useRef();
  const bioRef = useRef();

  const onSubmit = useCallback(
    async (e) => {
      e.preventDefault();
      try {
        const formData = new FormData();
        formData.append("username", usernameRef.current.value);
        formData.append("name", nameRef.current.value);
        formData.append("bio", bioRef.current.value);
        const response = await fetcher("/api/user", {
          method: "PATCH",
          body: formData,
        });
        mutate({ user: response.user }, false);
      } catch (e) {
        console.error(e.message);
      }
    },
    [mutate]
  );

  useEffect(() => {
    usernameRef.current.value = user.username;
    nameRef.current.value = user.name;
    bioRef.current.value = user.bio;
  }, [user]);

  return (
    <form onSubmit={onSubmit}>
      <input ref={usernameRef} placeholder="Your username" />
      <input ref={nameRef} placeholder="Your name" />
      <textarea ref={bioRef} placeholder="Your bio" />
      <button type="submit">Save</button>
    </form>
  );
};

const SettingsPage = () => {
  const { data, error, mutate } = useCurrentUser();
  const router = useRouter();
  useEffect(() => {
    if (!data && !error) return; // useCurrentUser might still be loading
    if (!data.user) {
      router.replace("/login");
    }
  }, [router, data, error]);
  if (!data?.user) return null;
  return <AboutYou user={data.user} mutate={mutate} />;
};

export default SettingsPage;

First of all, the settings page should only be available to authenticated users only. Therefore, if the current user is not available, we want to navigate to /login, which I do so using router and our useCurrentUser hook.

For the update form, we simply create an onSubmit function that collects the inputs and makes a PATCH request to our just created API at /api/user.

Every time the user prop is updated, we need to set the values of the inputs accordingly, which I do so inside the above useEffect.

One thing to note is that we use FormData to send our fields instead of the regular application/json. The reason for this is that it allows us to include our profile picture later, which can be conveniently transmitted via FormData, in the same request.

Upon receiving a successful response, we call mutate to update the SWR cache.

Building the Profile picture functionality

To have this functionality, we need somewhere to host our images. I choose Cloudinary to host my images, but you can use any service.

Add profile picture to the settings page

In the same form above, we add our profile picture field:

<input type="file" accept="image/png, image/jpeg" ref={profilePictureRef} />

(note: the screenshot actually above puts this input in front of an image to achieve the effect as seen, see the source code)

This field has a ref of profilePictureRef, allowing us to access its value:

const profilePictureRef = useRef();

Adding into our existing onSubmit function:

/* ... */
if (profilePictureRef.current.files[0]) {
  formData.append("profilePicture", profilePictureRef.current.files[0]);
}

If the user did select an image, we can access its value in profilePictureRef.current.files[0] (files is an array because it can be a multi-file upload) and add it to our FormData instance.

It will be included in the same PATCH request.

Building the Profile Picture Upload API

Since our profile picture is submitted to the same PATCH endpoint. Let's edit its handler.

To handle images, we need something to parse the uploaded file. Multer is the package that we will use.

Let's take a look at our PATCH handler again:

import { auths, database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";
import slug from "slug";

import multer from "multer";
const upload = multer({ dest: "/tmp" });

const handler = nc();

handler.use(database, ...auths);

handler.patch(
  upload.single("profilePicture"),
  validateBody({
    type: "object",
    properties: {
      username: { type: "string", minLength: 4, maxLength: 20 },
      name: { type: "string", minLength: 1, maxLength: 50 },
      bio: { type: "string", minLength: 0, maxLength: 160 },
    },
  }),
  async (req, res) => {
    /* ... */
  }
);

export const config = {
  api: {
    bodyParser: false,
  },
};

export default handler;

Looking at:

export const config = {
  api: {
    bodyParser: false,
  },
};

I am disabling Next.js 9 body-parser because form parsing is already handled by Multer.

We initialize an instance of Multer that is configurated to save the file to our temp folder:

const upload = multer({ dest: "/tmp" });

The instance itself is a middleware, so we attach it before our main handler in the PATCH handlers. The middleware expects a single file upload under the profilePicture field that we specified earlier in our form submission function. Now, we can access the file via req.file.

handler.patch(
  upload.single("profilePicture"),
  validateBody({
    /* ... */
  }),
  async (req, res) => {
    console.log(req.file);
  }
);

Integrate Cloudinary

This is the section for the file uploading logic. The content in this section depends on the File Uploading library or service you choose. I am using Cloudinary in my case.

If you use Cloudinary, go ahead and create an account there.

Cloudinary provides its Javascript SDK.

To configure Cloudinary, we need to set the following environment variable:

CLOUDINARY_URL=cloudinary://my_key:my_secret@my_cloud_name

The Environment variable value can be found in the Account Details section in [Dashboard](https://cloudinary.com/console "Cloudinary Dashboard). (Clicking on Reveal to display it)

If you use Cloudinary, look at its Node.js SDK documentation for more information.

Import the cloudinary SDK (Using its v2):

import { v2 as cloudinary } from "cloudinary";

Uploading an image is as simple as:

cloudinary.uploader.upload("theImagePath");

...where out image path is req.file.path.

let profilePicture;
if (req.file) {
  const image = await cloudinary.uploader.upload(req.file.path, {
    width: 512,
    height: 512,
    crop: "fill",
  });
  profilePicture = image.secure_url;
}

const user = await updateUserById(req.db, req.user._id, {
  ...(username && { username }),
  ...(name && { name }),
  ...(typeof bio === "string" && { bio }),
  ...(profilePicture && { profilePicture }), // <- set the url to our user document
});

We are uploading our image to Cloudinary with the option of cropping it down to 512x512. You can set it to whatever you want or not have it at all. If the upload is a success, I set the URL (the secured one) of the uploaded image to our user's profilePicture field. See cloudinary#upload for more information.

Awesome, we have managed to create our Profile Picture functionality.

Conclusion

Let's run our app and test it out. We have managed to create our user profile functionality with profile picture.

Again, check out the repository nextjs mongodb app.

If you find this helpful, consider give the the repo a star to motivate me to add more content.

Good luck on your next Next.js + MongoDB project!

Next.js and MongoDB full-fledged app Part 1: User authentication (using Passport.js)

Hoang — Thu, 26 Mar 2020 15:29:10 +0000

nextjs-mongodb-app is a full-fledged app built with Next.js and MongoDB. Today, I will add our fundamental feature: User Authentication.

Below are the Github repository and a demo for this project to follow along.

Github repo

Demo

About `nextjs-mongodb-app` project

nextjs-mongodb-app is a Full-fledged serverless app made with Next.JS and MongoDB

Different from many other Next.js tutorials, this:

Does not use the enormously big Express.js, supports serverless
Minimal, no fancy stuff like Redux or GraphQL for simplicity in learning
Using Next.js latest features like API Routes or getServerSideProps

For more information, visit the Github repo.

Getting started

Environmental variables

The environment variables should should be placed in .env.local.
See Environment variables.

Required environmental variables for now includes:

process.env.MONGODB_URI

Validation library

I'm using validator for email validation, but feel free to use your library or write your check.

I'm also using ajv to validate the incoming request body.

Password hashing library

Password must be hashed. Period. There are different libraries out there:

bcrypt (most common)
argon2 (recommended)

Middleware

You may be familiar with the term middleware if you have an ExpressJS background.

We can use Middleware in Next.js by using next-connect with the familiar .use() syntax. Beside middleware, next-connect also allows us to do method routing via .get(), .post(), etc., so we don't have to write manual if (req.method) checks.

You can even continue with this project without next-connect using the guide API Middlewares, but it might require more code.

Database middleware

We will need to have a middleware that handles the database connection.

import { MongoClient } from "mongodb";

/**
 * Global is used here to maintain a cached connection across hot reloads
 * in development. This prevents connections growing exponentiatlly
 * during API Route usage.
 * https://github.com/vercel/next.js/pull/17666
 */
global.mongo = global.mongo || {};

export async function getMongoClient() {
  if (!global.mongo.client) {
    global.mongo.client = new MongoClient(process.env.MONGODB_URI);
  }
  // It is okay to call connect() even if it is connected
  // using node-mongodb-native v4 (it will be no-op)
  // See: https://github.com/mongodb/node-mongodb-native/blob/4.0/docs/CHANGES_4.0.0.md
  await global.mongo.client.connect();
  return global.mongo.client;
}

export default async function database(req, res, next) {
  if (!global.mongo.client) {
    global.mongo.client = new MongoClient(process.env.MONGODB_URI);
  }
  req.dbClient = await getMongoClient();
  req.db = req.dbClient.db(); // this use the database specified in the MONGODB_URI (after the "/")
  if (!indexesCreated) await createIndexes(req.db);
  return next();
}

I then attach the database to req.db. In this middleware, we first create a "cachable" MongoClient instance if it does not exist. This allows us to work around a common issue in serverless environments where redundant MongoClients and connections are created.

The approach used in this project is to use the middleware function database to attach the client to req.dbClient and the database to req.db. However, as an alternative, the getMongoClient() function can also be used to get a client anywhere (this is the approach used by the official Next.js example and shown MongoDB blog - We choose to use a middleware instead).

Session middleware

*An earlier version of this project uses express-session, but this has been replaced with next-session due its incompatibility with Next.js 11+.

For session management, Redis or Memcached are better solutions, but since we are already using MongoDB, we will use connect-mongo.

We create the session middleware as below (consult next-session documentation for more detail):

import MongoStore from "connect-mongo";
import { getMongoClient } from "./database";

const mongoStore = MongoStore.create({
  clientPromise: getMongoClient(),
  stringify: false,
});

const getSession = nextSession({
  store: promisifyStore(mongoStore),
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    maxAge: 2 * 7 * 24 * 60 * 60, // 2 weeks,
    path: "/",
    sameSite: "strict",
  },
  touchAfter: 1 * 7 * 24 * 60 * 60, // 1 week
});

export default async function session(req, res, next) {
  await getSession(req, res);
  next();
}

Email/Password authentication using Passport.js

We will use Passport.js for authentication.

We will initialize our Passport instance.

import passport from "passport";
import bcrypt from "bcryptjs";
import { Strategy as LocalStrategy } from "passport-local";
import { ObjectId } from "mongodb";

passport.serializeUser((user, done) => {
  done(null, user._id.toString());
});

passport.deserializeUser((req, id, done) => {
  req.db
    .collection("users")
    .findOne({ _id: new ObjectId(id) })
    .then((user) => done(null, user));
});

passport.use(
  new LocalStrategy(
    { usernameField: "email", passReqToCallback: true },
    async (req, email, password, done) => {
      const user = await req.db.collection("users").findOne({ email });
      if (user && (await bcrypt.compare(password, user.password)))
        done(null, user);
      else done(null, false);
    }
  )
);

export default passport;

Our passport.serializeUser function will serialize the user id into our session. Later we will use that same id to get our user object in passport.deserializeUser. The reason we have to pass it into ObjectId is because our _id in MongoDB collection is of such type, while the serialized _id is of type string.

We use passport-local for email/password authentication. We first find the user using the email req.db.collection('users').findOne({ email }) (req.db is available via database middleware). Then, we compare the password await bcrypt.compare(password, user.password). If everything matches up, we resolve the user via done(null, user).

Authentication middleware

In order to authenticate users, we need three seperate middleware: Our above session, passport.initialize() and passport.session()middleware. passport.initialize() initialize Passport.js, and passport.session() will authenticate user using req.session which is provided by session.

const handler = nc();
handler.use(session, passport.initialize(), passport.session());
handler.get(foo);
handler.post(bar);

However, to avoid retyping the same .use() or leaving any of them out, I grouped three of them into an array:

export const auths = [session, passport.initialize(), passport.session()];

and use it like below:

import { auths } from "@/api-lib/middlewares";

const handler = nc();
handler.use(...auths); // this syntax spread out the three middleware and is equivalent to the original version

Request body validation middleware

It is a good practice to always validate incoming request bodies. Here we write a middleware that validates req.body using ajv.

import Ajv from "ajv";

export function validateBody(schema) {
  const ajv = new Ajv();
  const validate = ajv.compile(schema);
  return (req, res, next) => {
    const valid = validate(req.body);
    if (valid) {
      return next();
    } else {
      const error = validate.errors[0];
      return res.status(400).json({
        error: {
          message: `"${error.instancePath.substring(1)}" ${error.message}`,
        },
      });
    }
  };
}

The function takes in a JSON schema, creates a Ajv validate function, and returns a middleware that makes use of it. The middleware would validate req.body and if there is an error, we immediately return the error with status code 400.

User state management

Endpoint to get the current user

Let's have an endpoint that fetches the current user. I will have it in /api/user.

In /api/user/index.js, put in the following content:

import nc from "next-connect";
import { database, auths } from "@/api-lib/middlewares";

const handler = nc();
handler.use(database, ...auths);
handler.get(async (req, res) => res.json({ user: req.user }));

export default handler;

We simply return req.user, which is populated by our auths middleware. However, there is a problem. req.user is the whole user document, which includes the password field.

To fix that, we use a MongoDB feature called Projection to filter it out. We made one adjustment to the Passport deserialize function:

passport.deserializeUser((req, id, done) => {
  req.db
    .collection("users")
    .findOne({ _id: new ObjectId(id) }, { projection: { password: 0 } })
    .then((user) => done(null, user));
});

State management using `swr`

SWR is a React Hooks library for remote data fetching.

We will use swr for state management. I understand basic understandings of swr, but you can always read its documentation.

We first define a fetcher function:

export const fetcher = (...args) => {
  return fetch(...args).then(async (res) => {
    let payload;
    try {
      if (res.status === 204) return null; // 204 does not have body
      payload = await res.json();
    } catch (e) {
      /* noop */
    }
    if (res.ok) {
      return payload;
    } else {
      return Promise.reject(payload.error || new Error("Something went wrong"));
    }
  });
};

This function is an augmentation of fetch (we actually forward all arguments to it). After receiving a response. We will try to parse it as JSON using res.json. Since fetch does not throw if the request is 4xx, we will check res.ok (which is false if res.status is 4xx or 5xx) and manually reject the promise using payload.error.

The reason I return payload.error is because I intend to write my API to return the error as:

{
  "error": {
    "message": "some message"
  }
}

If for some reason, the error payload is not like that, we return a generic "Something went wrong".

useCurrentUser hook

We need a useSWR hook to return our current user:

import useSWR from "swr";

export function useCurrentUser() {
  return useSWR("/api/user", fetcher);
}

useSWR will use our fetcher function to fetch /api/user.

To visualize, the result from /api/user (which we will write in a later section) is in this format:

{
  "user": {
    "username": "jane",
    "name": "Jane Doe",
    "email": "jane@example.com"
  }
}

This will be the value of data. Thus, we get the user object by const user = data && data.user.

Now, whenever we need to get our user information, we simply need to use useUser.

const [user, { mutate }] = useCurrentUser();

Our mutate function can be used to update the user state. For example:

const { data: { user } = {} } = useCurrentUser();

Since data is undefined initially, I default it to = {} to avoid the Uncaught TypeError: Cannot read property of undefined error.

User registration

Let's start with the user registration since we need at least a user to work with.

Building the Signup API

Let's say we sign the user up by making a POST request to /api/users with a name, a username, an email, and a password.

Let's create /api/users/index.js:

import { ValidateProps } from "@/api-lib/constants";
import { database, validateBody } from "@/api-lib/middlewares";
import nc from "next-connect";
import isEmail from "validator/lib/isEmail";
import normalizeEmail from "validator/lib/normalizeEmail";
import slug from 'slug';

const handler = nc();

handler.use(database); // we don't need auths in this case because we don't do authentication

// POST /api/users
handler.post(
  validateBody({
    type: "object",
    properties: {
      username: { type: "string", minLength: 4, maxLength: 20 },
      name: { type: "string", minLength: 1, maxLength: 50 },
      password: { type: "string", minLength: 8 },
      email: { type: "string", minLength: 1 },
    },
    required: ["username", "name", "password", "email"],
    additionalProperties: false,
  }),
  async (req, res) => {
    const { name, password } = req.body;
    const username = slug(req.body.username);
    const email = normalizeEmail(req.body.email); // this is to handle things like jane.doe@gmail.com and janedoe@gmail.com being the same
    if (!isEmail(email)) {
      res.status(400).send("The email you entered is invalid.");
      return;
    }
    // check if email existed
    if ((await req.db.collection("users").countDocuments({ email })) > 0) {
      res.status(403).send("The email has already been used.");
    }
    // check if username existed
    if ((await req.db.collection("users").countDocuments({ username })) > 0) {
      res.status(403).send("The username has already been taken.");
    }
    const hashedPassword = await bcrypt.hash(password, 10);

    const user = {
      emailVerified: false,
      profilePicture,
      email,
      name,
      username,
      bio,
    };

    const password = await bcrypt.hash(originalPassword, 10);

    const { insertedId } = await db
      .collection("users")
      // notice how I pass the password independently and not right into the user object (to avoid returning the password later)
      .insertOne({ ...user, password });

    user._id = insertedId; // we attach the inserted id (we don't know beforehand) to the user object

    req.logIn(user, (err) => {
      if (err) throw err;
      // when we finally log in, return the (filtered) user object
      res.status(201).json({
        user,
      });
    });
  }
);

export default handler;

The handler:

is passed through our request body validation
normalize and validates the email
slugify the username using the slug package (since we don't want some usernames to be like "unicode ♥ is ☢")
Check if the email existed by counting its # of occurance req.db.collection('users').countDocuments({ email })
Check if the username existed by counting its # of occurance req.db.collection('users').countDocuments({ username })
hash the password bcrypt.hash(password, 10)
insert the user into our database.

After that, we log the user in using passport's req.logIn.

If the user is authenticated, I return our user object.

`pages/sign-up.jsx`: The sign up page

In sign-up.jsx, we will have the following content:

import { fetcher } from "@/lib/fetch";
import { useCurrentUser } from "@/lib/user";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useRef, useState } from "react";
import toast from "react-hot-toast";

const SignupPage = () => {
  const emailRef = useRef();
  const passwordRef = useRef();
  const usernameRef = useRef();
  const nameRef = useRef();

  const { mutate } = useCurrentUser();

  const onSubmit = useCallback(
    async (e) => {
      e.preventDefault();
      try {
        const response = await fetcher("/api/users", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            email: emailRef.current.value,
            name: nameRef.current.value,
            password: passwordRef.current.value,
            username: usernameRef.current.value,
          }),
        });
        mutate({ user: response.user }, false);
        router.replace("/feed");
      } catch (e) {
        console.error(e.message);
      }
    },
    [mutate, router]
  );

  return (
    <>
      <Head>
        <title>Sign up</title>
      </Head>
      <div>
        <h2>Sign up</h2>
        <form onSubmit={onSubmit}>
          <input ref={emailRef} type="email" placeholder="Email Address" />
          <input
            ref={emailRef}
            type="password"
            autoComplete="new-password"
            placeholder="Password"
          />
          <input
            ref={usernameRef}
            autoComplete="username"
            placeholder="Username"
          />
          <input
            ref={usernameRef}
            autoComplete="name"
            placeholder="Your name"
          />
          <button type="submit">Sign up</button>
        </form>
      </div>
    </>
  );
};

export default SignupPage;

What onSubmit does is to make a POST request to /api/users with our email, password, username, name. I use ref to grab the values from the uncontrolled inputs.

If the request comes back successfully, we use SWR mutate to update the current user cache then use router to navigate to the main page.

User authentication

Now that we have one user. Let's try to authenticate the user. (We actually did authenticate the user when he or she signs up)

Let's see how we can do it in /login, where we make a POST request to /api/auth.

Building the Authentication API

Let's create api/auth.js:

import { passport } from "@/api-lib/auth";
import nc from "next-connect";
import { auths, database } from "@/api-lib/middlewares";

const handler = nc();

handler.use(database, ...auths);

handler.post(passport.authenticate("local"), (req, res) => {
  res.json({ user: req.user });
});

export default handler;

When a user makes a POST request to /api/auth, we simply call the previously set-up passport.authenticate to sign the user in based on the provided email and password.

If the credential is valid, req.user, our user object, will be returned with a 200 status code.

Otherwise, passport.authenticate will returns a 401 unauthenticated.

`pages/login.jsx`: The login page

Here is our code for pages/login.jsx:

import { useCallback, useEffect } from "react";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useEffect, useRef } from "react";
import { useCurrentUser } from "@/lib/user";

const LoginPage = () => {
  const emailRef = useRef();
  const passwordRef = useRef();

  const { data: { user } = {}, mutate, isValidating } = useCurrentUser();
  const router = useRouter();
  useEffect(() => {
    if (isValidating) return;
    if (user) router.replace("/feed");
  }, [user, router, isValidating]);

  const onSubmit = useCallback(
    async (event) => {
      event.preventDefault();
      try {
        const response = await fetcher("/api/auth", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            email: emailRef.current.value,
            password: passwordRef.current.value,
          }),
        });
        mutate({ user: response.user }, false);
      } catch (e) {
        console.error(e);
      }
    },
    [mutate]
  );

  return (
    <>
      <Head>
        <title>Sign in</title>
      </Head>
      <h2>Sign in</h2>
      <form onSubmit={onSubmit}>
        <input
          ref={emailRef}
          id="email"
          type="email"
          name="email"
          placeholder="Email address"
          autoComplete="email"
        />
        <input
          ref={passwordRef}
          id="password"
          type="password"
          name="password"
          placeholder="Password"
          autoComplete="current-password"
        />
        <button type="submit">Sign in</button>
      </form>
    </>
  );
};

export default LoginPage;

The idea is the same, we grab the values from the inputs and submit our requests to /api/auth. We will update the SWR cache using mutate if the response is successful.

I also set up a useEffect that automatically redirects the user as soon as the SWR cache returns a user.

Sign out

Let's add functionality to the Sign out button, which will generally be on our Navbar:

import { useCallback } from "react";
import { useCurrentUser } from "@/lib/user";

const Navbar = () => {
  const { data: { user } = {}, mutate } = useCurrentUser();

  const onSignOut = useCallback(async () => {
    try {
      await fetcher("/api/auth", {
        method: "DELETE",
      });
      mutate({ user: null });
    } catch (e) {
      toast.error(e.message);
    }
  }, [mutate]);

  return (
    /* ... */
    <button onClick={onSignOut}>Sign out</button>
    /* ... */
  );
};

We make a DELETE request to /api/auth, and if it is successful, we update the SWR cache using mutate.

The last part is to write a DELETE request handler in api/auth.js:

handler.delete(async (req, res) => {
  await req.session.destroy();
  // or use req.logOut();
  res.status(204).end();
});

Conclusion

Alright, let's run our app and test it out. This will be the first step in building a full-fledged app using Next.js and MongoDB.

I hope this can be a boilerplate to launch your next great app. Again, check out the repository nextjs-mongodb-app. If you find this helpful, consider staring the repo to motivate me with development.

Good luck on your next Next.js + MongoDB project!

How I build a full-fledged app with Next.js and MongoDB Part 3: Email Verification, Password Reset/Change

Hoang — Sun, 19 Jan 2020 01:31:40 +0000

I have come back after a long hiatus in building nextjs-mongodb-app. This time I am adding the following features:

Email Verification
Password Reset
Password Change

Before this, I have made several modifications to the codebase, which you can look at in the following PRs:

Rewrite with next-connect (#22)
Replace axioswal with fetch (a custom fetch "fetchSwal") (#41)
The API response schema slightly changes. ({ status: 'ok' } becomes { ok: true })

Again, Below are the Github repository and a demo for this project to follow along.

Github repo

Demo

What we are making

We are working on several features, which all involve email transaction.

Email Verification allows you to verify the emails users used to sign up by sending them a verification link.
Password Reset allows the users to reset their passwords from a reset link sent to their emails.
Password Change allows the users to change their passwords simply by inputting their old and new passwords.

Building Password Change

This is the easiest feature to implement. All we have to do is match the user's old password against the database and save their new one.

Password Change Section

For simplicity, I added the section right below Profile Settings page.

const [oldPassword, setOldPassword] = useState("");
const [newPassword, setNewPassword] = useState("");
const handleSubmitPasswordChange = event => {
  event.preventDefault();
  fetchSwal
    .put("/api/user/password", { oldPassword, newPassword })
    .then(data => {
      if (data.ok) {
        setNewPassword("");
        setOldPassword("");
      }
    });
};
/* ... */
return (
  <form onSubmit={handleSubmitPasswordChange}>
    <label htmlFor="oldpassword">
      Old Password
      <input
        type="password"
        id="oldpassword"
        value={oldPassword}
        onChange={e => setOldPassword(e.target.value)}
        required
      />
    </label>
    <label htmlFor="newpassword">
      New Password
      <input
        type="password"
        id="newpassword"
        value={newPassword}
        onChange={e => setNewPassword(e.target.value)}
        required
      />
    </label>
    <button type="submit">Change Password</button>
  </form>
);

When the user submits, we make a PUT call to /api/user/password with the old and new password. If the request is successful, we clear the new and old password fields.

We now go ahead and create our API at /api/user/password.

Password Change API

Create /pages/api/user/password/index.js.

import nextConnect from 'next-connect';
import bcrypt from 'bcryptjs';
import middleware from '../../../../middlewares/middleware';

const handler = nextConnect();
handler.use(middleware);

handler.put(async (req, res) => {
  try {
    if (!req.user) throw new Error('You need to be logged in.');
    const { oldPassword, newPassword } = req.body;
    if (!(await bcrypt.compare(oldPassword, req.user.password))) {
      throw new Error('The password you has entered is incorrect.');
    }
    const password = await bcrypt.hash(newPassword, 10);
    await req.db
      .collection('users')
      .updateOne({ _id: req.user._id }, { $set: { password } });
    res.json({ message: 'Your password has been updated.' });
  } catch (error) {
    res.json({
      ok: false,
      message: error.toString(),
    });
  }
});

export default handler;

We are reusing our middleware instance (with database, session, authentication, etc.)

We first check if the user is logged in (!req.user) and reject the request if they are not. req.user also contains all of our user data (including the hashed password at req.user.password)

We then go ahead and retrieve oldPassword and newPassword from the request body. The oldPassword is compared against the hashed current password (bcrypt.compare(oldPassword, req.user.password)). If it matches, we reject the request. If it does we hash the new password (bcrypt.hash(newPassword, 10)) and save it in our database.

await req.db
  .collection('users')
  .updateOne({ _id: req.user._id }, { $set: { password } });

Our try/catch makes it convenient to simply throw an error at any point to inform the user if the request is a failure.

And we are ready to roll~

Password Reset

Now that the user can change their current password to a new one. Yet that is only when they know their current password. We are now implementing password reset.

Forget Password API

We will have two routes for this API.

/pages/api/user/password/reset/index.js: Handle requests to create a password reset token
/pages/api/user/password/reset/[token].js: Handle the token to reset password.

Create /pages/api/user/password/reset/index.js.

import sgMail from '@sendgrid/mail';
import crypto from 'crypto';
import nextConnect from 'next-connect';
import database from '../../../../../middlewares/database';

sgMail.setApiKey(process.env.SENDGRID_API_KEY);

const handler = nextConnect();

handler.use(database);

handler.post(async (req, res) => {
  try {
    const user = await req.db
      .collection('users')
      .findOne({ email: req.body.email });
    if (!user)
      throw new Error('This email is not associated with any account.');
    const token = crypto.randomBytes(32).toString('hex');
    await req.db.collection('tokens').insertOne({
      token,
      userId: user._id,
      type: 'passwordReset',
      expireAt: new Date(Date.now() + 1000 * 60 * 20)
    });
    const msg = {
      to: user.email,
      from: process.env.EMAIL_FROM,
      templateId: process.env.SENDGRID_TEMPLATEID_PASSWORDRESET,
      dynamic_template_data: {
        subject: '[nextjs-mongodb-app] Reset your password.',
        name: user.name,
        url: `${process.env.WEB_URI}/forgetpassword/${token}`
      }
    };
    await sgMail.send(msg);
    res.json({ message: 'An email has been sent to your inbox.' });
  } catch (error) {
    res.json({
      ok: false,
      message: error.toString()
    });
  }
});

export default handler;

We only need our database middleware in this API because we only need to communicate to the database.

We first verify if the email user input exists in the database req.db.collection('users').findOne({ email: req.body.email }). If the user exists, we create a passwordReset token with the userId attached. The token is generated by Node module crypto (although you can replace it with anything).

set to be expire after 20 minutes for security reason: expireAt: new Date(Date.now() + 1000 * 60 * 20). In /middlewares/database.js, we set the tokens collection to expire the token based on expireAt field:

db
  .collection('tokens')
  .createIndex('expireAt', { expireAfterSeconds: 0 });

The token is then inserted into our tokens MongoDB collection.

We then send an email to the user with a password reset link (website_url/forgetpassword/{token}).

Forget Password page

We now create a forget password page at /pages/forgetpassword/index.jsx

const ForgetPasswordPage = () => {
  const [email, setEmail] = useState();

  function handleSubmit(event) {
    event.preventDefault();
    fetchSwal
      .post('/api/user/password/reset', { email })
      .then(resp => resp.ok !== false && redirectTo('/'));
  }

  return (
    <Layout>
      <Head>
        <title>Forget password</title>
      </Head>
      <h2>Forget password</h2>
      <form onSubmit={handleSubmit}>
        <p>Do not worry. Simply enter your email address below.</p>
        <label htmlFor="email">
          <input
            id="email"
            type="email"
            placeholder="Email"
            value={email}
            onChange={e => setEmail(e.target.value)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    </Layout>
  );
};

We simply ask the user for their email, which we then send to our just-created API above at '/api/user/password/reset'.

Reset Password API

We need an API to resolve the reset token.

Create /pages/api/user/password/reset/[token].js:

import nextConnect from 'next-connect';
import bcrypt from 'bcryptjs';
import database from '../../../../../middlewares/database';

const handler = nextConnect();

handler.use(database);

handler.post(async (req, res) => {
  // check valid token
  const tokenDoc = await req.db.collection('tokens').findOne({
    token: req.query.token,
    type: 'passwordReset'
  });
  res.end(tokenDoc ? 'true' : 'false');
});

handler.put(async (req, res) => {
  // password reset
  try {
    if (!req.body.password) throw new Error('No password provided.');
    const { value: tokenDoc } = await req.db
      .collection('tokens')
      .findOneAndDelete({ _id: req.query.token, type: 'passwordReset' });
    if (!tokenDoc) throw new Error('This link may have been expired.');
    const password = await bcrypt.hash(req.body.password, 10);
    await req.db
      .collection('users')
      .updateOne({ _id: tokenDoc.userId }, { $set: { password } });
    res.json({ message: 'Your password has been updated.' });
  } catch (error) {
    res.json({
      ok: false,
      message: error.toString()
    });
  }
});

export default handler;

There are two handlers: a POST and PUT one.

The POST one will only check if the token is valid by querying tokens document, which then returns either true or false. This can be used to immediately show to the user that clicks the link if the token (or link) is valid (and optionally allowing them to request a new one). Later, we will see this check in getInitialProps.

The PUT one will do the same check for the token as in POST, but we also delete the token (findOneAndDelete) if it is found. If the token is found (and deleted), we hash the new password bcrypt.hash(req.body.password, 10) and save it to the user whose id is attached to the token (tokenDoc.userId):

req.db
  .collection('users')
  .updateOne({ _id: tokenDoc.userId }, { $set: { password } });

Reset Password page

This page represents the link that is sent to the user's email (website_url/forgetpassword/{token}). Create /pages/forgetpassword/[token].jsx:

const ResetPasswordTokenPage = ({ valid, token }) => {
  const [password, setPassword] = useState('');
  function handleSubmit(event) {
    event.preventDefault();
    fetchSwal
      .post(`/api/user/password/reset/${token}`, { password })
      .then(resp => resp.ok !== false && redirectTo('/'));
  }

  return (
    <Layout>
      <Head>
        <title>Forget password</title>
      </Head>
      <h2>Forget password</h2>
      {valid ? (
        <>
          <p>Enter your new password.</p>
          <form onSubmit={handleSubmit}>
            <div>
              <input
                type="password"
                placeholder="New password"
                value={password}
                onChange={e => setPassword(e.target.value)}
              />
            </div>
            <button type="submit">Set new password</button>
          </form>
        </>
      ) : (
        <p>This link may have been expired</p>
      )}
    </Layout>
  );
};

ResetPasswordTokenPage.getInitialProps = async ctx => {
  const { token } = ctx.query;
  const valid = await fetch(
    `${process.env.WEB_URI}/api/user/password/reset/${token}`,
    { method: 'POST' }
  )
    .then(res => res.text())
    .then(bol => bol === 'true');
  return { token, valid };
};

export default ResetPasswordTokenPage;

As we can see in getInitialProps, we first query the POST handler to check if the token is valid and return it as a pageProp along with the token.

Based on the valid pageProp, we have a conditional render to show the password reset form if the token is valid or the text "This link may have been expired" otherwise:

return (
  valid ? (
    <>
      <p>Enter your new password.</p>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            type="password"
            placeholder="New password"
            value={password}
            onChange={e => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Set new password</button>
      </form>
    </>
  ) : (
    <p>This link may have been expired</p>
  );
)

After the user input their new password, the new password is sent along with the token to our PUT handler.

That is how we do password reset.

Building Email Verification

Let's finish up with email verification. This feature is similar to password reset as we similarly are sending a token to the user.

Email Verification API

Get started by creating /pages/api/user/email/verify/index.js. This will handle users' requests to receive a confirmation email.

const handler = nextConnect();

handler.use(middleware);

handler.post(async (req, res) => {
  try {
    if (!req.user) throw new Error('You need to be logged in.');
    const token = crypto.randomBytes(32).toString('hex');
    await req.db.collection('tokens').insertOne({
      token,
      userId: req.user._id,
      type: 'emailVerify',
      expireAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
    });
    const msg = {
      to: req.user.email,
      from: process.env.EMAIL_FROM,
      templateId: process.env.SENDGRID_TEMPLATEID_EMAILVERIFY,
      dynamic_template_data: {
        subject: '[nextjs-mongodb-app] Please verify your email address.',
        name: req.user.name,
        url: `${process.env.WEB_URI}/api/user/email/verify/${token}`,
      },
    };
    await sgMail.send(msg);
    res.json({ message: 'An email has been sent to your inbox.' });
  } catch (error) {
    res.json({
      ok: false,
      message: error.toString(),
    });
  }
});

export default handler;

In this handler, we are checking if the user is logged in and create a token that associates the user ID req.user._id. This token will expire in 24 hours.

We then send an email with the email confirmation link (website_url/api/user/email/verify/{token}).

Okay, I actually got lazy and did not create a dedicated page like we did above with Password Reset. This is the front of our API.

Looking at it, you will realize we need at GET handler at /api/user/email/verify/{token}.

Create /pages/api/user/email/verify/[token].js:

handler.get(async (req, res) => {
  try {
    const { token } = req.query;
    const { value: tokenDoc } = await req.db
      .collection('tokens')
      .findOneAndDelete({ token, type: 'emailVerify' });

    if (!tokenDoc) {
      res.status(401).json({
        ok: false,
        message: 'This link may have been expired.',
      });
      return;
    }

    await req.db
      .collection('users')
      .updateOne({ _id: tokenDoc.userId }, { $set: { emailVerified: true } });

    res.json({
      ok: true,
      message: 'Success! Thank you for verifying your email address. You may close this page.',
    });
  } catch (error) {
    res.json({
      ok: false,
      message: error.toString(),
    });
  }
});

Similar to Password Reset, we check if the token exists and remove it.

req.db
  .collection('tokens')
  .findOneAndDelete({ token, type: 'emailVerify' });

If it existed (and removed), we set the emailVerified field in the user's document to true.

Expose the email verification status in the front-end

In /pages/api/session.js, I include emailVerified field:

const { name, email, bio, profilePicture, emailVerified } = req.user;
return res.json({
  data: {
    isLoggedIn: true,
    user: {
      name,
      email,
      bio,
      profilePicture,
      emailVerified
    }
  }
});

The value of emailVerified will be used in our profile page at pages/profile/index.js.

const {
  state: {
    isLoggedIn,
    user: { name, email, bio, profilePicture, emailVerified }
  }
} = useContext(UserContext);

function sendVerificationEmail() {
  fetchSwal.post('/api/user/email/verify');
}
/* ... */
return (
  <>
    {/* ... */}
    Email
    <p>
      {email}
      {!emailVerified ? (
        <>
          {' '}
          unverified {/* eslint-disable-next-line */}
          <a role="button" onClick={sendVerificationEmail}>
            Send verification email
          </a>
        </>
      ) : null}
    </p>
    {/* ... */}
  </>
);

If emailVerified is not true, we display a unverified text with a button that allows user to send a verification email. The button send a POST request to /api/user/email/verify, which we went through above.

Conclusion

Tadah! We have managed to have password change/reset and email verification feature in our app. These features can be seen in real-life app.

Check out the repository here. The pull request for this particular feature is here.

I have spent hours writing this articles and even dozen more working on this project. If you find it helpful, I would love to see it getting stared. Until then, good luck on your Next.js project!

Develop Node app in ES6 without Nodemon and Babel

Hoang — Wed, 08 Jan 2020 06:25:46 +0000

I recently started a new Node.js project, and as a habit, I began by installing two familiar packages: nodemon and babel. The purpose was that I needed a way to hot reload my app while writing it in ES6 Module.

A tool we have gotten to know since the beginning of time for hot reloading is nodemon.

Also, since the default configuration of Node.js only supports common.js, we need a way to transpile our code back to common.js. Surely, support for ES6 modules in Node is behind --experimental-modules and requires .mjs extension (which is intrusive in my opinion).

(The latest major version of Node.js has already allowed us to use ES6 modules without the tag, but this does not seem to be backported to previous majors, and using it still requires extension)

Most tutorials will suggest Babel for the job. However, I think it is way too much for our purpose (Babel is more suitable to be used for browsers). It also removes the benefits of using ES6 (tree shaking).

Rollup to the rescue

Introducing Rollup.

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

(note: application)

Get started by installing rollup as a dev dependency.

yarn add rollup -D
// or
npm i rollup --save-dev

Next, create rollup.config.js. (You may use ES6 in this file)

export default {
  input: 'api/server.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
};

By this config, we are taking our api/server.js (or wherever your main script is), and output a CommonJS version of it.

Even though it is CommonJS after all, the exported file has gone through treeshaking. Also, since everything is compiled into one file, our code may run a bit faster in Node by eliminating the need to require different modules.

Just for reference, here is my api/server.js, written in ES6.

import next from 'next';
import { createServer } from 'http';
import apolloServer from './apollo-server';
import app from './app';
import { connect as connectMongoDB } from './db/mongo';

// http
const port = process.env.PORT || '3000';
const httpServer = createServer();

// next
const nextApp = next({ dev: process.env.NODE_ENV !== 'production' });
const nextHandle = nextApp.getRequestHandler();

// apollo
apolloServer.applyMiddleware({ app, path: '/api' });
apolloServer.installSubscriptionHandlers(httpServer);

async function start() {
  await connectMongoDB();
  await nextApp.prepare();
  app.all('*', nextHandle);
  httpServer.on('request', app.handler);
  httpServer.listen({ port }, () => {
    console.log(`🚀  Apollo API ready at :${port}${apolloServer.graphqlPath}`);
    console.log(
      `🚀  Apollo WS ready at :${port}${apolloServer.subscriptionsPath}`
    );
  });
}

start();

Hot reloading

To achieve the functionality of nodemon, we add a rollup plugin called @rollup/plugin-run.

🍣 A Rollup plugin which runs your bundles in Node once they're built.

Using this plugin gives much faster results compared to what you would do with nodemon.

(In my experience using it, this plugin is faster than nodemon)

yarn add @rollup/plugin-run -D
// or
npm i @rollup/plugin-run --save-dev

(We will import the above package in rollup.config.js, which may be complained by eslint, you can either eslint-disable the warning or add the package as a regular dependency).

Back in rollup.config.js:

import run from '@rollup/plugin-run';

export const roll = rollup;

const dev = process.env.NODE_ENV !== 'production';

export default {
  input: 'api/server.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [
    dev && run(),
  ],
};

We import @rollup/plugin-run and include it in plugins. Notice that this will only run in development (by checking process.env.NODE_ENV).

Add scripts to package.json

{
  "scripts": {
    "start": "node bundle.js",
    "build": "NODE_ENV=production rollup -c",
    "dev": "rollup -c -w",
  }
}

Our start script simply runs the output bundle.js.

Our build script runs rollup setting NODE_ENV to production. (you may need cross-env in Windows)

Our dev call rollup. The flag -c means using our config file rollup.config.js. The flag -w rebuilds our bundle if the source files change on disk. In fact, @rollup/plugin-run does not do hot-reloading but only runs the Node process every time rollup recompile.

What about .env

We often use .env in development. @rollup/plugin-run allows us to execute an argument. In rollup.config.js, edit our run() function.

run({
  execArgv: ['-r', 'dotenv/config'],
})

This allows us to do node -r (--require) dotenv/config. This usage can be seen here.

Integrate Babel

Even though we do not use Babel to transpile import/export to require/module.exports, there are cases when we still need it. For example, I use it for @babel/plugin-proposal-optional-chaining, which enables optional chaining (this proposal is 🔥 btw).

The plugin we need is rollup-plugin-babel

yarn add -D @babel/core rollup-plugin-babel
// or
npm i --save-dev @babel/core rollup-plugin-babel

We can now add it to rollup.config.js.

import run from '@rollup/plugin-run';
import babel from 'rollup-plugin-babel';

const dev = process.env.NODE_ENV !== 'production';

export default {
  input: 'api/server.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [
    babel(),
    dev &&
      run({
        execArgv: ['-r', 'dotenv/config'],
      }),
  ],
};

The default configuration of rollup-plugin-babel will read from .babelrc. However, if you are like me, who has .babelrc not for the node server but for framework such as React or Next.js, you can opt out. Doing so by edit babel():

babel({
  babelrc: false,
  plugins: ['@babel/plugin-proposal-optional-chaining'],
})

That's it!

Use middleware in Next.js without custom server

Hoang — Sat, 19 Oct 2019 16:37:26 +0000

Three months ago, Next.js released version 9, which added API Routes. This enabled us to write... well... APIs by exporting functions of two arguments req and res, which are extensions to Node's http.ClientRequest and http.ServerResponse.

This was a good excuse to move away from frameworks like Express as a custom server.

Still, something was missing: Middleware.

Middleware

Lots of us have probably learned the concept of middlewares when we worked with Express or Connect. The concept allowed us to augmented req and res by routing them through layers of a stack, which are known as middleware.

The usage is somewhat like below:

app.use((req, res, next) => {
  //  Augmenting req
  req.user = getUser(req);
  //  Go to the next layer
  next();
});

More often, we find ourselves using libraries:

app.use(passport.initialize());

In those cases, the libraries actually return functions of (req, res, next) just like the way we approached above.

However, in Next.js API Routes, we do not have such ability. We can only export a function of (req, res), there is no interfaces of app.use(). This limitation led people back to using Express, thus rendering API Routes useless.

Possible solutions

Luckily, there are ways to achieve the similar behavior that is in Express.

Let's write some middles.

If you are unsure of which approach to go with, I recommend my next-connect.

Wrappers around handler function

I will define handler function as the function of (req, res) that we need to export for API Routes.

Concept illustration in React

To illustrate the concept, I might use the term Higher-order component (HOC) from React (even though it is a little bit misleading). If you use React, you may know the technique as something like the one below:

const EnhancedComponent = higherOrderComponent(WrappedComponent);

higherOrderComponent will be something like below:

function higherOrderComponent(OriginalComponent) {
  const user = getUser();
  return (<OriginalComponent user={user} />);
}

In the above example, we wrap WrappedComponent with higherOrderComponent. Like the variable name suggests, it returned an enhanced version of the original component, not a different one. The only difference was that it added a prop to the original component. The HOC augmented the original component, not mutate it.

We can apply the concept into making a "HOC" for API Routes.

Making a middleware as a wrapper

I will take an (simplified) example from my project nextjs-mongodb-app. (check it out too)

const withDatabase = handler => {
  return async (req, res) => {
    await client.connect();
    req.db = client.db('somedb');
    return handler(req, res);
  };
}

export default withDatabase;

Looking at the function withDatabase, it accepts an argument called handler, our original function. withDatabase actually returns a function of (req, res) (return async (req, res)), which will accept the incoming requests. We can say that it replaces the original (req, res) at this point.

Looking at the part:

req.db = client.db('somedb');

The incoming request (the original req object) does not have db, and we are adding it. Particularly, we are assigning db into req so we can access it later.

Now that we have augmented req, we want to route it through our original handler. Looking at return handler(req, res);, we are calling the original handler function we retrieve as an argument with the augmented req and (eh, unchanged) res.

Now in my original handler, I can use the pass-along db.

const handler = async (req, res) => {
  const user = await req.db.findOne({ userName: req.body.username });
  res.send(`Our homie is ${user.name}`);
}

Remember that withDatabase needs handler. We simply do withDatabase(handler). We now export like so:

import withDatabase from '../middleware/withDatabase';

const handler = async (req, res) => {
  const user = await req.db.findOne({ userName: req.body.username });
  res.send(`Our homie is ${user.name}`);
}

export default withDatabase(handler);
//  instead of export default handler;

What about an additional option? Let's say I want to specify the database to use. We can simply add it as the second argument. Let's rewrite our withDatabase.

const withDatabase = (handler, dbToUse) => {
  return async (req, res) => {
    await client.connect();
    req.db = client.db(dbToUse);
    return handler(req, res);
  };
}

Now back to our API Route file:

export default withDatabase(handler, 'testingDb');

Obviously, you can add as many arguments as you want, we only need to make sure to pass along our original handler. You can look at another example at how I have options in next-session.

Multiple middlewares

What about multiple middlewares? We can write similar functions to useDatabase. Let's say we want a middleware to check the database's readiness.

const withCheckDb = (handler) {
  return async (req, res) => {
    req.dbHealth = await checkDatabase(req.db);
    return handler(req, res);
  }
}

Now that we have our additional withCheckDb, we can wrap it along with withDatabase.

export default withDatabase(withCheckDb(handler), 'testingDb');

One thing to be aware of is that withCheckDb is inside withDatabase. Why?

Looking at withCheckDb, we see that it tries to access req.db, which is only available after withDatabase. The function on the outside will receive req and res first, and only when they are done that they pass them along into the inside ones.

So, order matters.

Stop the middleware chain early

Let's take another look at our withCheckDb. What would happen if our database is not working? In such a case, I want it to simply respond with Database is not working, ideally with a 500 status code.

const withCheckDb = (handler) {
  return async (req, res) => {
    req.dbHealth = await checkDatabase(req.db);
    if (req.dbHealth === 'bad') return res.status(500).send('Database is not working :( so sorry! ');
    return handler(req, res);
  }
}

If the result of our checkDatabase is bad, we send the message "Database is not working". More importantly, we also return at that point, exiting the function. return handler(req, res); is not executed because the function has existed/returned earlier.

By doing so, the actual handler never run, thus the chain is cut short.

Mutate req and res directly

Another approach to middleware is to manipulate req and res directly. We can try to rewrite the above functions withDatabase and withCheckDb using this approach.

const useDatabase = async (req, res, dbToUse) => {
  await client.connect();
  req.db = client.db(dbToUse);
}

Instead of getting a handler, we instead take req and res as arguments. Actually, we do not even need res because we do not mutate it.

const useDatabase = async (req, dbToUse) => {
  await client.connect();
  req.db = client.db(dbToUse);
}

Let's go back to our handler.

import useDatabase from '../middleware/useDatabase';

const handler = async (req, res) => {
  await useDatabase(req, 'testingDb');
  const user = await req.db.findOne({ userName: req.body.username });
  res.send(`Our homie is ${user.name}`);
}

export default handler;

By calling await useDatabase(req, 'testingDb');, we mutate our req by injecting our db into it. I need to use await because we need to wait for client.connect(), followed by setting req.db.

Without await, the code will go on without req.db and end up with a TypeError req.db is not defined.

Multiple middleware

Let's do the same thing with withCheckDb:

const useCheckDb = async (req, res) {
  req.dbHealth = await checkDatabase(req.db);
  if (req.dbHealth === 'bad') return res.status(500).send('Database is not working :( so sorry! ');
}

We need res in this case since we call calling res.send.

We can then go on to use multiple middlewares like so:

import useDatabase from '../middleware/useDatabase';
import useCheckDb from '../middleware/useCheckDb';

const handler = async (req, res) => {
  await useDatabase(req, 'testingDb');
  await useCheckDb(req, res);
  const user = await req.db.findOne({ userName: req.body.username });
  res.send(`Our homie is ${user.name}`);
}

export default handler;

Stop the middleware chain early

Remember that we want to stop the code if the database is not working. However, it does not just work with this approach.

useCheckDb will still call res.status(500).send('Database is not working :( so sorry! '), but then the code go on. Chances are that the code will throw at req.db.findOne({ userName: req.body.username }), or you will end up with Can't set headers after they are sent to the client when you try to

res.send(`Our homie is ${user.name}`)

.

One way is to intentionally throw an error inside useCheckDb

const useCheckDb = async (req, res) {
  req.dbHealth = await checkDatabase(req.db);
  if (req.dbHealth === 'bad') throw new Error('Database is not working :( so sorry! ');
}

...and catch it with a Try/Catch.

import useDatabase from '../middleware/useDatabase';
import useCheckDb from '../middleware/useCheckDb';

const handler = async (req, res) => {
  try {
    await useDatabase(req, 'testingDb');
    await useCheckDb(req, res);
    const user = await req.db.findOne({ userName: req.body.username });
    res.send(`Our homie is ${user.name}`);
  } catch (e) {
    res.status(500).send(e.message);
  }
}

export default handler;

e.message, in this case, will be "Database is not working :( so sorry!".

Middleware with next-connect

The two above approaches did not settle me, so I decided to write a library that will take me back to good ol' Express.js.

You can get it here.

With next-connect, we can now use Express middleware syntax like we used to be.

import nextConnect from 'next-connect'
const handler = nextConnect();

handler.use(function (req, res, next) {
    //  Do some stuff with req and res here
    req.user = getUser(req);
    //  Call next() to proceed to the next middleware in the chain
    next();
})

handler.use(function (req, res) {
    if (req.user) res.end(`The user is ${req.user.name}`);
    else res.end('There is no user');
    //  next() is not called, the chain is terminated.
})

//  You can use a library too.
handler.use(passport.initialize());

export default handler;

Method routing, too

What even better is that next-connect also takes care of method handling. For example, you may want POST request to be responded differently to PUT request.

handler.post((req, res) => {
  //  Do whatever your lil' heart desires
});

handler.put((req, res) => {
  //  Do whatever your lil' heart desires
});

export default handler;

Example usage with `next-connect`

Anyway, let's get back on track. Let's try to replicate use/withDatabase and use/withCheckDb.

function database(dbToUse) {
  return async (req, res, next) => {
    await client.connect();
    req.db = client.db(dbToUse);
    //  Calling next() and moving on!
    next();
  }
}

function checkDb() {
  return async (req, res, next) => {
    req.dbHealth = await checkDatabase(req.db);
    if (req.dbHealth === 'bad') return res.status(500).send('Database is not working :( so sorry! ');
    next();
  }
}

The writing of the two functions are similar to our first approach. The only differences are that:

We do not need to take in a handler argument
Our returned function has an additional next argument.
We finish by calling next() instead of calling handler.

What about suspending the code if checkDb fail? Similarly to the first approach, next() will not be called and whatever comes after it will not run.

For instruction on writing middlewares, here is a guide on expressjs.com.

Now, we can use it like we do in the old days of Express.js.

import nextConnect from 'next-connect'
import database from '../middleware/database';
import checkDb from '../middleware/checkDb';

const handler = nextConnect();

handler.use(database());
handler.use(checkDb());
handler.get((req, res) => {
    const user = await req.db.findOne({ userName: req.body.username });
    res.send(`Our homie is ${user.name}`);
});

export default handler;

What about non-API pages

We have been talking about API Routes (those in pages/api), what about normal pages (those in pages/). We can apply approach 2 to getInitialProps.

Page.getInitialProps = async ({ req, res }) => {
  await useMiddleware(req, res);
  /* ... */
}

Document middleware

An RFC in Next.js issue #7208 enables the same approach as above but allowing it to be available globally.

It is an experimental feature and need to be enabled in nextjs.config.js:

module.exports = {
  experimental: {
    documentMiddleware: true
  }
};

Then, in _document.js:

export const middleware = async ({ req, res }) => {
  await useMiddleware(req, res);
};

Using next-connect

See this.

Conclusion

I hope this will help your effort on moving away from Express.js. Moving away from Express.js will allow our app to run faster by enabling Next.js's optimization (and serverless, too!).

If you have any questions, feel free to leave a comment. I also recommend asking on Next.js channel on Spectrum to get answers from great people there.

Good luck on your next Next.js project!

[Outdated] How I build a full-fledged app with Next.js and MongoDB Part 2: User profile and Profile Picture

Hoang — Sun, 08 Sep 2019 21:50:13 +0000

This does not reflect the recent rewrite of nextjs-mongodb-app. Check out the latest version.

In this post, I'm going back to work on nextjs-mongodb-app. This is a follow up of Part 1.

In between, I have made several modifications.

In _app.js, I remove <Container> as it is deprecated.
Some styling

Again, Below are the Github repository and a demo for this project to follow along.

Github repo

Demo

What we are making

We are adding the following features:

Profile Page
Edit Profile
Profile Picture

Building the user profile

The user profile page

My user profile page will be at /profile. Create /pages/profile/index.js.

The reason, I have index.js inside /profile instead of profile.jsx is because we are adding /profile/settings later.

import React, { useContext } from 'react';
import Link from 'next/link';
import { UserContext } from '../../components/UserContext';
import Layout from '../../components/layout';

const ProfilePage = () => {
  const { state: { isLoggedIn, user: { name, email, bio } } } = useContext(UserContext);

  if (!isLoggedIn) return (<Layout><p>Please log in</p></Layout>);
  return (
    <Layout>
      <div>
        <h1>Profile</h1>
        <div>
          <p>
          Name:
            {' '}
            { name }
          </p>
          <p>
          Bio:
            {' '}
            { bio }
          </p>
          <p>
          Email:
            {' '}
            { email }
          </p>
        </div>
        <Link href="/profile/settings"><a>Edit</a></Link>
      </div>
    </Layout>
  );
};

export default ProfilePage;

There is nothing new, we use the Context API to get our user info. However, look at

if (!isLoggedIn) return (<Layout><p>Please log in</p></Layout>);

You can see that if the user is not logged in, I return a text saying Please log in.

I'm also adding a new field, bio. However, for that to work, we need to modify our /api/session:

const { name, email, bio } = req.user;

return res.status(200).send({
  status: "ok",
  data: {
    isLoggedIn: true,
    user: { name, email, bio }
  }
});

Basically, I'm retrieving the additional bio field and also returning it.

Also, I'm adding a link to the Setting page:

<Link href="/profile/settings"><a>Edit</a></Link>

That is what we are going to create now.

The Profile Setting page

Building the Profile Update API

The way for our app to update user profile is would be to make a PATCH request to /api/user.

Create pages/api/user/index.js:

import withMiddleware from '../../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'PATCH') {
    if (!req.user) return res.status(401).send('You need to be logged in.');
    const { name, bio } = req.body;
    return req.db
      .collection('users')
      .updateOne({ _id: req.user._id }, { $set: { name, bio } })
      .then(() => res.json({
        message: 'Profile updated successfully',
        data: { name, bio },
      }));
  }
  return res.status(405).end();
};

export default withMiddleware(handler);

If the request method is PATCH, the profile update logic will be executed.

It first checks if the user is logged in by checking req.user. If not, it will send a 401 response.

It will retrieve name and bio from the request body and call MongoDB UpdateOne to update the user profile.

The query (filter) is the document that has the _id of the current logged in user's. If successful, it will return the updated info with a message Profile updated successfully.

The Profile Settings Page

Let's create pages/profile/settings

import React, { useContext, useState } from 'react';
import axioswal from 'axioswal';
import { UserContext } from '../../components/UserContext';
import Layout from '../../components/layout';

const ProfileSection = ({ user: { name: initialName, bio: initialBio }, dispatch }) => {
  const [name, setName] = useState(initialName);
  const [bio, setBio] = useState(initialBio);

  const handleSubmit = (event) => {
    event.preventDefault();
    axioswal
      .patch(
        '/api/user',
        { name, bio },
      )
      .then(() => {
        dispatch({ type: 'fetch' });
      });
  };

  return (
    <section>
      <h2>Edit Profile</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            required
            type="text"
            placeholder="Your name"
            value={name}
            onChange={e => setName(e.target.value)}
          />
        </div>
        <div>
          <textarea
            type="text"
            placeholder="Bio"
            value={bio}
            onChange={e => setBio(e.target.value)}
          />
        </div>
        <button type="submit">
          Save
        </button>
      </form>
    </section>
  );
};

const SettingPage = () => {
  const { state: { isLoggedIn, user }, dispatch } = useContext(UserContext);

  if (!isLoggedIn) return (<Layout><p>Please log in</p></Layout>);
  return (
    <Layout>
      <h1>Settings</h1>
      <ProfileSection user={user} dispatch={dispatch} />
    </Layout>
  );
};

export default SettingPage;

In the setting page, I abstract the profile section into <ProfileSection /> and pass in the props of user and dispatch (the reducer to call when we need to update the user object).

We will have our name and bio state with the default value of initialName and initialBio which are basically the name and bio from the passed user object.

Similarly, we will set each of the values on input changes. On form submit, a PATCH request will be made to /api/user with name and bio. We then call dispatch({ type: 'fetch' }) to update the user information being shown in our app.

Building the Profile picture functionality

Profile Picture is a more complicated one to work on so I dedicate a section for it. We need somewhere to host our images. I choose Cloudinary to host my images, but you can use any services.

Add profile picture to settings page

After our first form, add our profile picture form:

/* ... */
const profilePictureRef = React.createRef();
const [isUploading, setIsUploading] = useState(false);

const handleSubmitProfilePicture = event => {
  if (isUploading) return;
  event.preventDefault();
  setIsUploading(true);
  const formData = new FormData();
  formData.append("profilepicture", profilePictureRef.current.files[0]);
  axioswal.put("/api/user/profilepicture", formData).then(() => {
    setIsUploading(false);
    dispatch({ type: "fetch" });
  });
};

return (
  <section>
    /* ... */
    <form onSubmit={handleSubmitProfilePicture}>
      <label htmlFor="avatar">
        Profile picture
        <input
          type="file"
          id="avatar"
          name="avatar"
          accept="image/png, image/jpeg"
          ref={profilePictureRef}
          required
        />
      </label>
      <button type="submit" disabled={isUploading}>
        Upload
      </button>
    </form>
  </section>
);

The isUploading state is what telling me if the file is being uploaded. We do want the user to accidentally upload multiple times by submitting the form multiple time. The submit button is disabled if isUploading is true: disabled={isUploading}, and the form will do nothing if isUploading is true: if (isUploading) return;

I set isUploading to true at the beginning of the submission and set it back to false when the submission is completed.

File Input is an uncontrolled component, meaning that its value can only be set by the user. The official documentation has a good explanation for it. We can only get its value by using React Refs.

Let's look at our form submission:

const handleSubmitProfilePicture = event => {
  if (isUploading) return;
  event.preventDefault();
  setIsUploading(true);
  const formData = new FormData();
  formData.append("profilePicture", profilePictureRef.current.files[0]);
  axioswal.put("/api/user/profilepicture", formData).then(() => {
    setIsUploading(false);
    dispatch({ type: "fetch" });
  });
};

We are creating a FormData and appending our file profilePictureRef.current.files[0] into the profilePicture field (keep that in mind). We then make a PUT request to /api/user/profilepicture containing that FormData. We then call dispatch({ type: "fetch" }); again to update the user data in our app.

Building the Profile Picture Upload API

I would like our endpoint for profile picture upload is PUT /api/user/profilepicture. I choose the PUT method because it refers to a Upsert (Update or Insert / Replace current profile picture or Set new profile picture) operation.

We will need something to parse the file upload. In Express.js, you may hear about Multer. However, since we are not using Express.js, I am going to use a module called Formidable.

npm i formidable

Let's create our pages/api/user/profilepicture.js:

import formidable from 'formidable';
import withMiddleware from '../../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'PUT') {
    if (!req.user) return res.status(401).send('You need to be logged in.');
    const form = new formidable.IncomingForm();
    return form.parse(req, (err, fields, files) => {
      console.log(files.profilePicture.path);
      res.end('File uploaded');
    });
  }
  return res.status(405).end();
};

export const config = {
  api: {
    bodyParser: false,
  },
};

export default withMiddleware(handler);

Please note that I have not integrated Cloudinary yet. Looking at:

export const config = {
  api: {
    bodyParser: false,
  },
};

I am disabling Next.js 9 body-parser because it does not play well with our Formidable parser.

We now parse our file.

const form = new formidable.IncomingForm();
return form.parse(req, (err, fields, files) => {
  console.log(files.profilePicture.path);
  res.end('File uploaded');
});

form.parse() gives a callback function containing error, fields, and files arguments. We only care about the files argument. files argument gives an object containing all of the file(s) in our multipart form. The one we are looking for is the profilePicture field.

For learning purpose, I console logging the path the file get saved to. Run the app and look at the output in the console. The file should be at the path mentioned.

Integrate Cloudinary

This is the section for the file uploading logic. The content in this section depends on the File Uploading library or service you choose. I am using Cloudinary in my case.

If you use Cloudinary, go ahead and create an account there.

Configurate Cloudinary

Cloudinary provides its Javascript SDK. Go ahead and install it:

npm i cloudinary

To configure Cloudinary, we need to set the following environment variable:

CLOUDINARY_URL=cloudinary://my_key:my_secret@my_cloud_name

A Environment variable value can be found in the Account Details section in [Dashboard](https://cloudinary.com/console "Cloudinary Dashboard). (Clicking on Reveal to display it)

If you use Cloudinary, look at its Node.js SDK documentation for more information.

Process the profile picture

Import the cloudinary SDK (Using its v2):

import { v2 as cloudinary } from 'cloudinary'

Uploading an image is as simple as:

cloudinary.uploader.upload("theImagePath");

Our image path is files.profilePicture.path.

Going back to our formidable callback and replace its content:

return form.parse(req, (err, fields, files) =>
  cloudinary.uploader
    .upload(files.profilePicture.path, {
      width: 512,
      height: 512,
      crop: "fill"
    })
    .then(image =>
      req.db
        .collection("users")
        .updateOne(
          { _id: req.user._id },
          { $set: { profilePicture: image.secure_url } }
        )
    )
    .then(() => res.send({
      status: 'success',
      message: 'Profile picture updated successfully',
    }))
    .catch(error =>
      res.send({
        status: "error",
        message: error.toString()
      })
    )
);

Awesome, we have managed to create our Profile Picture functionality.

Displaying the profile picture

Similarly to what we do earlier, go to pages/api/user/session.js and include our profilePicture field.

const { name, email, bio, profilePicture } = req.user;
return res.status(200).send({
  status: "ok",
  data: {
    isLoggedIn: true,
    user: { name, email, bio, profilePicture }
  }
});

In our pages/profile/index.jsx, include our profilePicture field and set it to an image:

const ProfilePage = () => {
  const {
    state: {
      isLoggedIn,
      user: { name, email, bio, profilePicture }
    }
  } = useContext(UserContext);

  if (!isLoggedIn)
    return (
      <Layout>
        <p>Please log in</p>
      </Layout>
    );
  return (
    <section>
      /* ... */
      <h1>Profile</h1>
      <div>
        <img src={profilePicture} width="256" height="256" alt={name} />
        /* ... */
      </div>
    </section>
  );
};

Voila, that's all we have to do

Conclusion

Let's run our app and test it out. We have managed to create our user profile functionality with profile picture.

Again, check out the repository here. The pull request for this particular feature is here.

Also, if you are interested in this project, please star it to motivate me to continue working on it.

Good luck on your next Next.js + MongoDB project!

How I migrate from Express.js to Next.js API Routes

Hoang — Wed, 14 Aug 2019 03:02:03 +0000

This if a follow up on my previous post Explore Next.js 9 API Routes.

After much consideration, I decided to ditch Express.js and moved into API Routes. At this point, my project was still simple - I did not have much code. I thought it was better to make the move now before the project get complicated.

Migrating to Next.js API Routes

In order to use the new API Routes, I need to update my Next.js module to v9 by running:
npm i next@latest react@latest react-dom@latest. This updates Next.js along with React.js to the latest versions.

Although this is a major update, I did not find any breaking changes that affect me in particular. However, if there was any for you, there is this upgrade guide to help you resolve any problems.

Rewrite codebase - more like, a lot of copypastes

Express.js to Next 9 API Routes

In my current express.js Server, to access an endpoint at /api/authenticate, my code in /server/components/account/accountController.js is:

// accountController.js
const express = require('express');

const User = require('../../api/models/userModel');

// In server.js, I called app.use('/api', AccountController);
const AccountController = express.Router();

AccountController.post("/authenticate", (req, res) => {
  const { email, password } = req.body;
  User.findByCredentials(email, password)
    .then(user => user.generateSessionId())
    .then(sessionId => {
      const { name } = user;
      res
        .cookie("sessionId", sessionId, { httpOnly: true, secure: true })
        .send(`welcome my homie, ${name}`);
    })
    .catch(e => {
      // reject due to wrong email or password
      res.status(401).send("who are u, i dun know u, go away");
    });
});
module.exports = AccountController;

You can see how I made use of req and res. Let's look into the Next.js 9 API Routes' way:

export default function handle(req, res) {
  res.end('Hello World');
}

The handle function has the same syntax: it takes the same req and res. Better yet, Next.js 9's API Routes implements the similar Express.js's Middlewares, including parser req.body and helper function res.status and res.send. This means I do not have to make lots of changes.

// FIXME: No res.cookie in Next.js API Routes

It appears that there is no res.cookie helper function in Next.js 9 API Routes. I need to rewrite the function, falling back to http.ServerResponse's setHeader (Because NextApiResponse extends http.ServerResponse):
res.cookie("sessionId", sessionId, { httpOnly: true, secure: true }) becomes

res.setHeader('Set-Cookie', `sessionId=${sessionId}; HttpOnly; Secure`)

.

I have created a feature request on zeit/next.js for adding res.cookie. I hope they will add it. For now, I have to stick with res.setHeader.

// TODO: Creating API Routes version of `/api/authenticate`

I created pages/api/authenticate.js.

// authenticate.js
export default (req, res) => {
  const { email, password } = req.body;
  User.findByCredentials(email, password)
    .then(user => user.generateSessionId())
    .then(sessionId => {
      const { name } = user;
      res
        .setHeader("Set-Cookie", `sessionId=${sessionId}; HttpOnly; Secure`)
        .send(`welcome my homie, ${name}`);
    })
    .catch(e => {
      // reject due to wrong email or password
      res.status(401).send("who are u, i dun know u, go away");
    });
};

Perfect, that was how I transformed my code from Express.js to Next.js API Routes: Just copypaste and make small touches. By doing so, I just ditched Express Router, making the code so much cleaner. I went and did the same thing for every single API endpoint.

Uh, oh. Where is our database?

Back at the Express.js version, my npm start runs this server.js script:

const express = require("express");
const mongoose = require("mongoose");
const AccountController = require("./components/account/accountController");
const app = express();
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useFindAndModify: false,
  useCreateIndex: true
});
app.use("/api", AccountController);
app.listen(process.env.PORT);

(I removed Next.js custom server integration for the sake of simplicity)

Notice that mongoose.connect() is how I connected to the database. Routing to /api/authenticate was then handled by app.use("/api", AccountController);.

Let's take a look at this diagram I draw:

There is no MongoDB connection in the Next.js version

As you can see, in the Express.js version, the server stays running and maintains the connection. However, in the Next.js version, the server does not have a starting point where it initializes the connection.

How about adding mongoose.connect() on every single endpoints (every single .js under /pages/api. Well, that's not quite the case.

Imagine each time an API Route is hit, it calls mongoose.connect(). Therefore, multiple mongoose.connect()will be called. However, you can only call mongoose.connect() once. Else, you will get this error:

MongooseError: You can not 'mongoose.connect()' multiple times while connected

// TODO: Maintain only one Mongoose connection

There must be a way to check if there is a mongoose connection. We only attempt to connect if there isn't one.

This is my approach:

// db.js
import mongoose from 'mongoose';

export default async () => {
  if (mongoose.connections[0].readyState) return;
  // Using new database connection
  await mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useFindAndModify: false,
    useCreateIndex: true,
  });
};

Edit: Update the correct way to do it

After successfully connecting to MongoDB, mongoose.connections[0].readyState will be 1 (true). Next time when the function is called, it will simply return.

What is left to do is to import the function from db.js in every API endpoint.

// authenticate.js
import connectToDb from '../../../api/db';

export default async (req, res) => {

  await connectToDb();

  const { email, password } = req.body;
  User.findByCredentials(email, password)
    .then(user => user.generateSessionId())
    .then(sessionId => {
      const { name } = user;
      res
        .setHeader("Set-Cookie", `sessionId=${sessionId}; HttpOnly; Secure`)
        .send(`welcome my homie, ${name}`);
    })
    .catch(e => {
      // reject due to wrong email or password
      res.status(401).send("who are u, i dun know u, go away");
    });
};

I made the handler an async function so that I can use the keyword await on connectToDb(). By having the await keyword, we are making sure that connectToDB() is completed before anything else.

That's it!

The alternative way: Using middleware

A "middleware" can be achieved by wrapping the handler function.

Create a dbMiddleware.js:

import mongoose from 'mongoose';

const connectDb = handler => async (req, res) => {
  if (mongoose.connections[0].readyState) return handler(req, res);
  // Using new database connection
  await mongoose.connect(process.env.MONGODB_URI, {
    useNewUrlParser: true,
    useFindAndModify: false,
    useCreateIndex: true,
  })
  return handler(req, res);
}

export default connectDb;

After that in my API functions, I wrap the handler function.

import connectDb from '../../../api/middlewares/dbMiddleware.js';
const handler = (req, res) => { 
  const { email, password } = req.body;
  User.findByCredentials(email, password)
    .then(user => user.generateSessionId())
    .then(sessionId => {
      const { name } = user;
      res
        .setHeader("Set-Cookie", `sessionId=${sessionId}; HttpOnly; Secure`)
        .send(`welcome my homie, ${name}`);
    })
    .catch(e => {
      // reject due to wrong email or password
      res.status(401).send("who are u, i dun know u, go away");
    });
};
export default connectDb(handler);

Learn more about it in this post.

TODO: Be consistent when import and export

When using Express.js, I did not implement Babel and could not use ES6 Import / Export.

When I started to using API Routes (which includes Babel), I changed part of the codebase to use ES6 Import or ES6 Export. However, several functions still used module.exports. This caused an issue that I mention below. (see FIXME: ... is not a function).

Therefore, be consistent. I recommend using ES6 import/export for the whole codebase.

Miscellaneous issues

// FIXME: Blank page with no error

Note: This particular issue I had below was not originated from Next.js. You can skip it!

One of the problems I got was that when I ran next dev, the terminal shows build page: /, compiling... then compiled successfully. However, when I visited http://localhost/, I saw an empty page with the tab's status bar showing loading indication.

When I looked at the Network tab, I saw GET localhost:3000/ kept on running with no response. (no Status, Response header, payload).

What so annoying about this issue was that there was no 500 internal server error or any red error texts in Console.

I looked through my code and checked all the syntax. Everything looked fine. I mean I just copied pasted a working version of my code to the new format. If there was an error in my code, it should had happened before I made the migration.

Luckily, when I attempted to run next build, I saw the error:

I found out only when doing my next build

What was node-sass doing? It was totally irrelevant. Then, I thought of that stupid IT joke "Have You Tried Turning It Off And On Again?". Well, no, I did not literally restart my computer. What I did was to run npm rebuild. This allowed me to "reset/restart" the node modules (which of course include node-sass). It just magically worked. Deleting my node_modules folder and running npm install would achieve the same thing.

When in doubt, run npm rebuild

Running next build now showed compiled successfully and running next dev worked: No more blank page... Well, but now we had some 500 Internal Server error

// FIXME: ... is not a function

If you run the production version, you may encounter UnhandledPromiseRejectionWarning: TypeError: ... is not a function.

After some trials and errors, I noticed it that if I used ES6 import instead of require, the error went away.

I guessed that for some reason, webpack did not parse require correctly. I noticed in my code that I used two different variants: I imported the function by require but exported it by export default. It might be the cause of the problem.

Therefore, go ahead and change from require / modules.export to import / export. If you do not specific export *default*, you will have to explicitly mention the name of the function. For example:

import { nameOfFunction } from 'path/to/theFunction'

// FIXME: Cannot overwrite model once compiled

I think it is not actually your error. You may think that it is because you import the model.js file multiple times. Back when I used Express.js, I had to do the same thing but did not encounter this problem. I suspect it was due to Hot Module Replacement (HMS). Because HMS compiles on-the-go, there is a chance that model.js gets compiled more than once, causing the problem.

I tested out my theory by trying to serve a production build using next build and next start. There was no error because Webpack did not do its compilation then.

Here is a workaround for the problem:

export default mongoose.models.User || mongoose.model('User', UserSchema);

As you can see, we first see if mongoose.models.User exists and only model it if it does not.

Hello Next.js API Routes, Goodbye Express.js

Uninstall redundant dependencies

Since we are no longer using Express.js, it is always a good idea to remove it.

With Express.js, I also need to uninstall along with two dependencies: nodemon and cookie-parser. I

I used to need nodemon to restart my server when I make a change to the code. This is no longer needed as I will use Webpack's Hot Module Replacement from now on.

I used to need cookie-parser to access req.cookies. This is no longer needed because Next.js 9 has already provided a way to do so.

I went ahead and uninstall them by running:

npm uninstall express nodemon cookie-parser

Make sure to remove any import / require of the mentioned dependencies from the code.

Change the scripts in package.json

In my Express.js version, my scripts were:

"scripts": {
    "dev": "nodemon server/server.js",
    "build": "next build",
    "start": "cross-env NODE_ENV=production node server/server.js",
 }

For npm run dev, I nodemon my custom server server.js. For npm run start, I node my server.js.

Moving to API Routes, I no longer need a custom server or hot reloading. All I have to do is run next dev and next start.

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
}

Conclusion

I managed to change my code base to using Next.js API Routes. It opens the possibility of serverless, which I will explore soon.

I still run into issues with this new Next.js API Routes now and then. When I do, I will make sure to include it in this article. Good luck deploying your Next.js API Routes.

[Outdated] How I build a full-fledged app with Next.js and MongoDB Part 1: User authentication

Hoang — Fri, 09 Aug 2019 14:38:02 +0000

This does not reflect the recent rewrite of `nextjs-mongodb-app`. Check out the latest version.

Update: I have replaced argon2 with bcryptjs for compatibility.

For the last month, I have been struggling with implementing an authentication system for my next project. It is part of an organization that I found to tackle problems in the community with code.

The project is an online game that promotes good behaviors, so it needs to have a way for users to login.

I am using Next.js, a React framework, and MongoDB as my database.

I used to have an Express backend as a Next.js custom server, where I (lazily) use PassportJS to handle authentication. I realized that I did not much control of my APIs doing so. Therefore, I decided to go for my authentication system.

A possible counter-argument is that I should not reinvent the wheel. Still, I wanted exploration and challenges, so I took the path.

Most of the solutions I found online are either relied on 3rd party services (Google, Facebook, Identity as a Service) or half-baked without much thought into the real-life application. Thus, I decide to make my own.

Below are the Github repository and a demo for this project to follow along.

Github repo

Demo (Fixed)

About `nextjs-mongodb-app` project

nextjs-mongodb-app is a full-fledged app built with Next.JS and MongoDB. Most tutorials on the Internet are either half-baked or not production-ready. This project aims to fix that.

This project goes even further and attempts to integrate top features as seen in real-life apps, making it a full-fledged app.

For more information, visit the Github repo.

Getting started

Typical tutorials will tell you do to npm install next or whatsoever, but I trust you to be an experienced developer already.

I will start by getting right into scaffolding my application.

Environmental variables

This project retrieves the variable from process.env. You will need to implement your strategy. Some of the possible solutions are:

https://github.com/zeit/next.js/tree/canary/examples/with-dotenv
Setting the environment variables in your service provider (such as now.sh env, or heroku config var)

Required environmental variables in this project includes:

process.env.MONGODB_URI

Request library

This project will need to have a request library to make requests to API. Feel free to pick your own. Here are some suggestions:

Validation library

I'm using validator for validation, but feel free to use your library or write your check.

Password hashing library

Password must be hashed. Period. There are different libraries out there:

bcrypt (most common)
scrypt
argon2 (my choice)

And, no MD5, SHA1, or SHA256, please!

Mongoose... I mean MongoDB

Mongoose is not MongoDB. It is a whole different avenue. I see a lot of tutorials use Mongoose and MongoDB interchangeably, and that is so wrong.

Mongoose is an Object data modeling library. This ensures persistence and integrity of data by defining schemas in your database, which, in my opinion, destroys the purpose of NoSQL.

NoSQL is designed to drop validation and modeling (which is known as ACID). It means any type of data is accepted and future modification of the structure is flexible. On the other hand, Mongoose will require you to have a schema for everything. If I define to my Age field to be Number, trying to save a String to the field will generate an Error.

Be aware that using Mongoose has a significant decrease in performance because data must be validated in every READ and WRITE (which justify dropping ACID).

In case you are going to use Mongoose, here is the schema I have for User:

const UserSchema = new mongoose.Schema({
  email: {
    type: String,
    trim: true,
    minlength: 1,
    unique: true,
    index: true,
  },
  emailVerified: {
    type: Boolean,
  },
  password: {
    type: String,
    minlength: 6,
  },
  name: {
    type: String,
  },
 });

 export default mongoose.models.User || mongoose.model('User', UserSchema);

Building the full-fledged authentication.

Response schema

measure twice, cut once

I just cannot stress that enough. I would like to see a persistency in my APIs' responses. Thus, I come up with this schema - a standard response for every APIs:

{
  "status": "ok / error",
  "message": "a user-readable message",
  "data": "<payload object>"
}

Feel free to have your own. For some inspirations, see this Stackoverflow discussion.

If I do not have this planned out, I may run into several problems. Imagine one of my endpoints responses with:

{
  "success": true,
  "msg": "successful stuff",
}

...while another one responses with:

{
  "error": false,
  "text": "ok",  
}

I will have to write two different checks and tries to display the messages using two different field:

if (response.success === true || response.error === false) {
  alert(response.msg || response.text);
}

It will get bad quick especially when the endpoints grow in number and get undocumented.

Middlewares

You may be familiar with the term middleware if you have an ExpressJS background.

The way to use Middlewares in Next.js is to take the original handler (API Route function of (req, res)) an as argument and return a new handler with additional functionality.

Database middleware

We will need to have a middleware that handles database connection since we do not want to call out the database in every route.

Creating middlewares/withDatabase.js:

import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, { useNewUrlParser: true });

const withDatabase = handler => (req, res) => {
  if (!client.isConnected()) {
    return client.connect().then(() => {
      req.db = client.db('nextjsmongodbapp');
      return handler(req, res);
    });
  }
  req.db = client.db('nextjsmongodbapp');
  return handler(req, res);
};
export default withDatabase;

What happens is that I first only attempt to connect if the client is not connected.

I then attach the database to req.db and client to req.mongoClient. The client can be reused later in our session middleware.

It is not recommended to hard-code your MongoDB URI or any other secure variable. I'm getting it via process.env.

Session middleware

Session is one of the crux elements in our project. In ExpressJS, we can use express-session. In Next.js, a session middleware to use is my next-session. You can go ahead and install it or use/make your middleware.

npm install next-session

Note: At the moment, next-session does not have any native session store, but it is compatible with express-session session stores by setting storePromisify to true.

The default store is MemoryStore, which is not production-ready. For now, we can use connect-mongo since we are already using MongoDB:

Creating middlewares/withSession.js:

import session from 'next-session';
import connectMongo from 'connect-mongo';

const MongoStore = connectMongo(session);

const withSession = handler => session.withSession(handler, {
  store: new MongoStore({ url: process.env.MONGODB_URI }),
});

export default withSession;

MongoStore also requires session. Our session middleware is next-session.

Global middleware

This is my approach to middleware, I'm going to quote it from next-session.

In reality, you would not want to wrap session() around handler in every function. You may run into a situation where the configuration of one session() is different from others. One solution is to create a global middleware.

Simply create middlewares/withMiddleware.js and include our other middlewares:

import withDatabase from './withDatabase';
import withSession from './withSession';

const middleware = handler => withDatabase(withSession(handler));

export default middleware;

It is important to know that the order in withDatabase(withSession(handler)) is matter. Later we will add a middleware called withAuthentication which make use of our database. Thus, we will have withAuthentication inside withDatabase and inside withSession or the database will not be ready and the session will not exist then.

`components/layout`: The Layout

This part is optional. This is where you can include your Header.jsx to have it on every page as long as you wrap the pages with <Layout>.

I'm going to add some styles using Next.js styled-jsx.

import React from 'react';

export default ({ children }) => (
  <>
    <style jsx global>
      {`
        * {
          box-sizing: border-box;
        }
        body {
          color: #4a4a4a;
          background-color: #f8f8f8;
        }
        input {
          width: 100%;
          margin-top: 1rem;
          padding: 1rem;
          border: none;
          background-color: rgba(0, 0, 0, 0.05);
        }
        button {
          color: #ecf0f1;
          margin-top: 1rem;
          background: #009688;
          border: none;
          padding: 1rem;
        }
      `}

    </style>
    { children }
  </>
);

User registration

Let's start with the user registration since we need at least a user to work with.

Building the Signup API

Let's say we sign the user up by making a POST request to /api/users with a name, an email, and a password.

Everything in the /api is an API Route, a new addition to Next.js 9. Each has to export a function that take two arguments req and res. Here is the content for our users.js:

import isEmail from 'validator/lib/isEmail';
import * as argon2 from 'argon2';
import withMiddleware from '../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'POST') {
    const { email, name, password } = req.body;
    if (!isEmail(email)) {
      return res.send({
        status: 'error',
        message: 'The email you entered is invalid.',
      });
    }
    return req.db.collection('users').countDocuments({ email })
      .then((count) => {
        if (count) {
          return Promise.reject(Error('The email has already been used.'));
        }
        return argon2.hash(password);
      })
      .then(hashedPassword => req.db.collection('users').insertOne({
        email,
        password: hashedPassword,
        name,
      }))
      .then((user) => {
        req.session.userId = user.insertedId;
        res.status(201).send({
          status: 'ok',
          message: 'User signed up successfully',
        });
      })
      .catch(error => res.send({
        status: 'error',
        message: error.toString(),
      }));
  }
  return res.status(405).end();
};

export default withMiddleware(handler);

The function validates the email, hash the password, and insert a user into the database. After that, we set userId in the session to the newly created object's id.

You can see that I first check that the method is POST before proceeding. If it is not, I return status code 405 Method Not Allowed.

If the user is created, I set req.session.userId to the created object id. I will explore it later.

Also note that in each case of error, I simply return a rejection with Error object. The rejection will be caught at .catch(), where I send back a response with the error message via .toString() (Error is an Error object, thus needed to be converted to a string).

`pages/signup.jsx`: The sign up page

In signup.jsx, we will have the following content:

import React, { useState } from 'react';
import axioswal from 'axioswal';
import Layout from '../components/layout';
import redirectTo from '../lib/redirectTo';

const SignupPage = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    axioswal
      .post('/api/users', {
        name,
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          redirectTo('/');
        }
      });
  };

  return (
    <Layout>
      <div style={{ margin: '4rem' }}>
        <h1>Sign up</h1>
        <form onSubmit={handleSubmit}>
          <div>
            <input
              type="text"
              placeholder="Your name"
              value={name}
              onChange={e => setName(e.target.value)}
            />
          </div>
          <div>
            <input
              type="email"
              placeholder="Email address"
              value={email}
              onChange={e => setEmail(e.target.value)}
            />
          </div>
          <div>
            <input
              type="password"
              placeholder="Create a password"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
          </div>
          <button type="submit">
            Sign up
          </button>
        </form>
      </div>
    </Layout>
  );
};

export default SignupPage;

Awesome, let's start up our dev server, navigate to /signup and check it out. Try sign up with a creative imaginary email and a badass password.

Also, try to:

Sign up again with the same email.
Entered some invalid email.

Does it show the error messages? If yes, great! Let's review what you have just done.

In case you are unfamiliar with Hook, I use the React State Hook useState. In every textbox, I set its value to its corresponding state variable (name, email, password), and when it changes (onChange), I call the the method (setName, setEmail, setPassword) and apply its new value (via e.target.value).

Looking at onSubmit={handleSubmit}, we can see that the submission (either via a button or Enter) will call the function handleSubmit, where we are going to add our login flow. event.preventDefault() prevents the form to be submitted (to the current page, which causes the page to rerender).

What handleSubmit should do beside preventDefault() is to make a POST request to /api/users. After that, I also need to show an Error or Success message to the user.

I use my axioswal, which make the Axios request, process the response, and show an sweetalert2 dialog based on the response.

npm install axioswal

If you are using a different request library or want to handle it on your own, feel free to do so.

Also, note that I redirect the user if he or she signs up successfully. I use a function defined at lib/redirectTo.js:

import Router from 'next/router';

export default function redirectTo(destination, { res, status } = {}) {
  if (res) {
    res.writeHead(status || 302, { Location: destination });
    res.end();
  } else if (destination[0] === '/' && destination[1] !== '/') {
    Router.push(destination);
  } else {
    window.location = destination;
  }
}

Taken from a Github snippet, but I forgot where it was. If you know, tell me :(

User authentication

Now that we have one user. Let's try to authenticate the user. We actually did authenticate the user when he or she signs up:

req.session.userId = user.insertedId;

Let's see how we can do it in /login, where we make a POST request to /api/authenticate.

Building the Authentication API

Let's create api/authenticate.js:

import * as argon2 from 'argon2';
import withMiddleware from '../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'POST') {
    const { email, password } = req.body;

    return req.db.collection('users').findOne({ email })
      .then((user) => {
        if (user) {
          return argon2.verify(user.password, password)
            .then((result) => {
              if (result) return Promise.resolve(user);
              return Promise.reject(Error('The password you entered is incorrect'));
            });
        }
        return Promise.reject(Error('The email does not exist'));
      })
      .then((user) => {
        req.session.userId = user._id;
        return res.send({
          status: 'ok',
          message: `Welcome back, ${user.name}!`,
        });
      })
      .catch(error => res.send({
        status: 'error',
        message: error.toString(),
      }));
  }
  return res.status(405).end();
};

export default withMiddleware(handler);

The logic is simple, we first look up the email by calling findOne given the email as our query. If the email does not exist we reject and say "The email does not exist". If the email does exist, req.db.collection.findOne returns a document which we refer to as user.

We then try to match the passwords. I call argon2.verify (which hash the received password and compare it with the hashed one) to see if the password we get from the request matches the one in the database. If it does not match, argon2.verify() returns false. We then reject and say "The password you entered is incorrect".

In reality, however, I may not want to have two distinct responses saying if it is the email or the password that is incorrect. It may allow brute-forcing. We can change it by simply changing each Error() object to both say "Your email or password is incorrect".

If it matches, we set userId to req.session similar to Signup, and return a message saying "Welcome back" with the name of the user.

`pages/login.jsx`: The login page

Here is our code for pages/login.jsx:

import React, { useState } from 'react';
import axioswal from 'axioswal';
import Layout from '../components/layout';
import redirectTo from '../lib/redirectTo';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    axioswal
      .post('/api/authenticate', {
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          redirectTo('/');
        }
      });
  };

  return (
    <Layout>
      <div style={{ margin: '4rem' }}>
        <h1>Log in</h1>
        <form onSubmit={handleSubmit}>
          <div>
            <input
              type="email"
              placeholder="Email address"
              value={email}
              onChange={e => setEmail(e.target.value)}
            />
          </div>
          <div>
            <input
              type="password"
              placeholder="Create a password"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
          </div>
          <button type="submit">
            Log in
          </button>
        </form>
      </div>
    </Layout>
  );
};

export default LoginPage;

If you look at it closely, I copy the whole thing from our signup.jsx, remove the name field, and change the POST URL to api/authenticate.

The logic is the same. We still redirect the user if he or she logs in successfully.

Start the server and navigate to /login to see our result.

Did it work? If it did, awesome! We have managed to get through most of the project.

Using session to determine user identity

Recall that we set an userId in req.session. What we can do is to have a middleware to look it up in our MongoDB database.

`req.user` middleware

Go ahead and create middlewares/withAuthentication:

import { ObjectId } from 'mongodb';

const withAuthentication = handler => (req, res) => {
  if (req.session.userId) {
    console.log(req.session.userId);
    return req.db.collection('users').findOne(ObjectId(req.session.userId))
      .then((user) => {
        console.log(user);
        if (user) req.user = user;
        return handler(req, res);
      });
  }
  return handler(req, res);
};

export default withAuthentication;

Include it in our withMiddleware.js:

const middleware = handler => withDatabase(withSession(withAuthentication(handler)));

I mentioned that the order is matter because we need req.session to be ready then.

If there is a req.session.userId, we try to look the id up (making sure convert it into an ObjectId first). If there is a user, we attach it to req. Why? Because we may reuse this user document in other endpoints. Since every endpoint goes through withAuthentication, which available via withMiddleware, we can determine the user by simply referring req.user. This also helps us avoid repetitive codes.

Session endpoint to get current user

Let's have an endpoint that fetches the current user. I will have it /api/session, but you can call it anything like /api/user or /api/users/me.

In /api/session, put in the following content:

import withMiddleware from '../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'GET') {
    if (req.user) {
      const { name, email } = req.user;
      return res.status(200).send({
        status: 'ok',
        data: {
          isLoggedIn: true,
          user: { name, email },
        },
      });
    }
    return res.status(200).send({
      status: 'ok',
      data: {
        isLoggedIn: false,
        user: {},
      },
    });
  }
  return res.status(405).end();
};

export default withMiddleware(handler);

In my opinion, it is appropriate to have the endpoint accepts GET request for fetching current user information.

As you can see, I first see if a user is logged in simply by checking if req.user exists.

If so, I responded saying isLoggedIn: true and response with the user's name and email.

If not, I simply response saying isLoggedIn: false and an empty user object.

User Context

We need to call GET /api/session from somewhere and pass the data across React components. I manage to achieve it using React Context API.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

Yes, just what we need.

Another similar solution would be - I'm sure you heard this a lot - Redux. However, I believe Redux is overkill and the simpler the better.

Let's create components/UserContext.js:

import React, { createContext, useReducer, useEffect } from 'react';
import axios from 'axios';

const UserContext = createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case 'set':
      return action.data;
    case 'clear':
      return {
        isLoggedIn: false,
        user: {},
      };
    default:
      throw new Error();
  }
};

const UserContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { isLoggedIn: false, user: {} });
  const dispatchProxy = (action) => {
    switch (action.type) {
      case 'fetch':
        return axios.get('/api/session')
          .then(res => ({
            isLoggedIn: res.data.data.isLoggedIn,
            user: res.data.data.user,
          }))
          .then(({ isLoggedIn, user }) => {
            dispatch({
              type: 'set',
              data: { isLoggedIn, user },
            });
          });
      default:
        return dispatch(action);
    }
  };
  useEffect(() => {
    dispatchProxy({ type: 'fetch' });
  }, []);
  return (
    <UserContext.Provider value={{ state, dispatch: dispatchProxy }}>
      { children }
    </UserContext.Provider>
  );
};

const UserContextConsumer = UserContext.Consumer;

export { UserContext, UserContextProvider, UserContextConsumer };

Quite a lot going on here. I suggest reading about Context on React website and heading back here.

We first create a context by calling createContext().

I then create a Reducer (again, I would suggest do some reading first) using React Hook:

const [state, dispatch] = useReducer(reducer, { isLoggedIn: false, user: {} });

where { isLoggedIn: false, user: {} } is the default value and reducer is as defined above:

const reducer = (state, action) => {
  switch (action.type) {
    case 'set':
      return action.data;
    case 'clear':
      return {
        isLoggedIn: false,
        user: {},
      };
    default:
      throw new Error();
  }
};

The value that is returned will be set to the state.

For example, in the clear function, I simply returned empty user object and isLoggedIn: false.

Things get a little bit weird at set.

Reducer does not support async function so I have to implement a little trick. I have a "proxy" function. All reducers will first go through dispatchProxy.

If the reducer requires an async call such as fetch dispatchProxy() will do the asynchronous action and call dispatch() when the action resolves. In particular, after fetching completed, it dispatchProxy() calls dispatch() and update the user context.

If the reducer does not contain an asynchronous call, I simply forward it to the actual dispatch().

Every time I need to fetch the user data (after logging in, or after changing profiles, etc.), I simply call the dispatch(), which is available by simply importing the UserContext. Also notice useEffect(() => {}, []);: I want to fetch in the app first rendering.

Similar to the availability of reducer, we can access the state by importing UserContext too. The state will contains all the user information we need.

Provider

To use Context on child components, we need a ContextProvider at the higher-order components.

<Provider>
  <Child1 />
  <Child 2>
    <Child 3 />
  </Child 2>
</Provider>

Looking at the mapping above, Child 1, Child 2, Child 3 will be able to access the Context. The <Provider> will have this format:

<MyContext.Provider value={/* some value */}>

If you look back to the return value of UserContextProvider in UserContext.jsx, you can see that we achieve that. Therefore, simply import UserContextProvider in that high ordered component.

In Next.js, _app.js is the highest component we have access to. Thus, we are going to have our UserContextProvider imported there.

Creating pages/_app.jsx:

import React from 'react';
import App, { Container } from 'next/app';
import { UserContextProvider } from '../components/UserContext';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <UserContextProvider>
          <Component {...pageProps} />
        </UserContextProvider>
      </Container>
    );
  }
}

export default MyApp;

Accessing `state` of `UserContext`

Open up our pages/index.js and fill in the following:

import React, { useContext } from 'react';
import Link from 'next/link';
import { UserContext } from '../components/UserContext';
import Layout from '../components/layout';

const IndexPage = () => {
  const { state: { isLoggedIn, user: { name } } } = useContext(UserContext);

  return (
    <Layout>
      <div>
        <h1>
          Hello,
          {' '}
          {(isLoggedIn ? name : 'stranger.')}
        </h1>

        {(!isLoggedIn ? (
          <>
            <Link href="/login"><div><button>Login</button></div></Link>
            <Link href="/signup"><div><button>Sign up</button></div></Link>
          </>
        ) : <button>Logout</button>)}

      </div>
    </Layout>
  );
};

export default IndexPage;

Sorry if const { state: { isLoggedIn, user: { name } } } = useContext(UserContext); confuses you as I use some ES6 Syntax. I basically get isLoggedIn and user.name from the state of UserContext.

I also write a conditional rendering. If isLoggedIn === true, I will render the name. Otherwise, I will render "stranger". Also, below the Welcome text, if isLoggedIn === false, I also render the two links to Login and Sign up. Similarly, we render the Logout button if isLoggedIn === true.

Dispatch `fetch` in `UserContext`

Remember that we need to dispatch the fetch reducer for everything to work.

Open pages/login.jsx and pages/signup.jsx and include the UserContext. Here is the implementation for pages/login.jsx. Try to do the other one on your own.

axioswal
      .post('/api/authenticate', {
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          //  Fetch the user data for UserContext here
          dispatch({ type: 'fetch' });
          redirectTo('/');
        }
      });

dispatch({ type: 'fetch' }); will call the dispatchProxy(), which make the GET request and call dispatch() to update the UserContext.

Logout: delete `userId` from `session`

Let's add functionality to the Logout button in index.jsx:

import React, { useContext } from 'react';
import Link from 'next/link';
import axioswal from 'axioswal';
import { UserContext } from '../components/UserContext';
import Layout from '../components/layout';

const IndexPage = () => {
  const { state: { isLoggedIn, user: { name } }, dispatch } = useContext(UserContext);
  const handleLogout = (event) => {
    event.preventDefault();
    axioswal
      .delete('/api/session')
      .then((data) => {
        if (data.status === 'ok') {
          dispatch({ type: 'clear' });
        }
      });
  };
  return (
    <Layout>
      <div>
        <h1>
          Hello,
          {' '}
          {(isLoggedIn ? name : 'stranger.')}
        </h1>

        {(!isLoggedIn ? (
          <>
            <Link href="/login"><div><button>Login</button></div></Link>
            <Link href="/signup"><div><button>Sign up</button></div></Link>
          </>
        ) : <button onClick={handleLogout}>Logout</button>)}

      </div>
    </Layout>
  );
};

export default IndexPage;

I import dispatch from UserContext. Also, I assign a function to the Logout button that makes a DELETE request to /api/session. If the request is a success, we call the clear reducer to empty the UserContext.

Obvious we need to add a DELETE request handler in api/session.js:

import withMiddleware from '../../middlewares/withMiddleware';

const handler = (req, res) => {
  if (req.method === 'GET') {
    if (req.user) {
      const { name, email } = req.user;
      return res.status(200).send({
        status: 'ok',
        data: {
          isLoggedIn: true,
          user: { name, email },
        },
      });
    }
    return res.status(200).send({
      status: 'ok',
      data: {
        isLoggedIn: false,
        user: {},
      },
    });
  }
  if (req.method === 'DELETE') {
    delete req.session.userId;
    return res.status(200).send({
      status: 'ok',
      data: {
        isLoggedIn: false,
        message: 'You have been logged out.',
      },
    });
  }
  return res.status(405).end();
};

export default withMiddleware(handler);

Just like we set userId to the session when we log in. All I have to do is to delete the userId from the session to log out.

Conclusion

Alright, let's run our app and test it out. This will be the first step in building a full-fledged app using Next.js and MongoDB.

I hope this can be a boilerplate to launch your next great app. Again, check out the repository here. I do accept feature requests. What features should I add next time? Feel free to create an issue and tell me.

I'm not so good at writing, so if there is an issue with the article, please help me improve.

Good luck on your next Next.js + MongoDB project!

Forem: Hoang

Next.js and MongoDB full-fledged app Part 4: Posts and Comments

About nextjs-mongodb-app project

What we are making

Build the posts feature

Create Post API

Create Post UI

Get Posts API with pagination

Get Posts UI

Post component

Build the comment feature

Create comment API

Create comment UI

Query comments API

Comments List UI

Conclusion

Next.js and MongoDB full-fledged app Part 3: Email Verification, Password Reset/Change

About nextjs-mongodb-app project

What we are making

Building Password Change

Password Change Section

Password Change API

Password Reset

Forget Password API

Password reset request

Forget Password page

Reset Password API

Reset Password page

Building Email Verification

Email Verification API

Email Verification page

Present the email verification status

Conclusion

Next.js and MongoDB full-fledged app Part 2: User profile and Profile Picture

About nextjs-mongodb-app project

What we are making

The user profile page

The Profile Setting page

Building the Profile Update API

The Profile Settings Page

Building the Profile picture functionality

Add profile picture to the settings page

Building the Profile Picture Upload API

Integrate Cloudinary

Conclusion

Next.js and MongoDB full-fledged app Part 1: User authentication (using Passport.js)

About nextjs-mongodb-app project

Getting started

Environmental variables

Validation library

Password hashing library

Middleware

Database middleware

Session middleware

Email/Password authentication using Passport.js

Authentication middleware

Request body validation middleware

User state management

Endpoint to get the current user

State management using swr

useCurrentUser hook

User registration

Building the Signup API

pages/sign-up.jsx: The sign up page

User authentication

Building the Authentication API

pages/login.jsx: The login page

Sign out

Conclusion

How I build a full-fledged app with Next.js and MongoDB Part 3: Email Verification, Password Reset/Change

What we are making

Building Password Change

Password Change Section

Password Change API

Password Reset

Forget Password API

Forget Password page

Reset Password API

Reset Password page

Building Email Verification

About `nextjs-mongodb-app` project

About `nextjs-mongodb-app` project

About `nextjs-mongodb-app` project

About `nextjs-mongodb-app` project

State management using `swr`

`pages/sign-up.jsx`: The sign up page

`pages/login.jsx`: The login page

Example usage with `next-connect`

// TODO: Creating API Routes version of `/api/authenticate`

This does not reflect the recent rewrite of `nextjs-mongodb-app`. Check out the latest version.

About `nextjs-mongodb-app` project