No Comments Yet
Be the first to share your thoughts and start the conversation.
The Edge Case
Loading...
Resources
Loading...
0 Comments
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, the instructor discusses the importance of resolving edge cases when implementing authentication in Next.js, especially concerning compatibility with the Edge runtime and MongoDB. The session highlights the challenges faced with Mongoose and provides alternative solutions for authentication without losing the efficiency of using API routes.
00:00:02 Now, just before we finally begin implementing our authentication, there is one edge case I want to talk to you about.
00:00:10 Understanding, resolving, and overcoming these edge cases is what differentiates you from a junior mid-developer to a senior developer.
00:00:19 because it's easy to just follow a YouTube tutorial or sometimes just read the docs.
00:00:24 But when you have to do something other than what the docs say to implement a feature that is not supported by the software you're using,
00:00:31 well, that's where the difficulty increases.
00:00:34 So that's why I want to teach you how to overcome it.
00:00:37 But first, let me explain the edge case I'm talking about.
00:00:41 If you head over to Next.js middleware documentation, you'll see that the middleware currently only supports APIs compatible with the Edge runtime.
00:00:52 APIs exclusive to Node.js are unsupported.
00:00:56 Now, why are we talking about middleware?
00:00:59 Well, middleware comes into the picture when we're implementing authentication.
00:01:03 Whenever you try to authenticate, we have to figure out whether you're logged in or not.
00:01:08 So we need this to be compatible with the Edge runtime.
00:01:12 Okay, that makes sense.
00:01:13 Then, if you head over to Mongoose, after a lot of debugging, I found this documentation page, saying, using Mongoose with Next.js,
00:01:23 specifying how Next.js is a popular framework, and then right below, we have a section on the Next.js edge runtime, saying that Mongoose does not currently
00:01:33 support the Next.js's edge runtime.
00:01:36 While you can import Mongoose in Edge Runtime, you'll get Mongoose's browser library.
00:01:41 There is no way for Mongoose to connect to MongoDB in Edge Runtime, because Edge Runtime currently doesn't support Node.js' net API,
00:01:50 which is what the MongoDB Node driver uses to connect to MongoDB.
00:01:54 That's the underlying issue we're trying to resolve here.
00:01:56 We're using Mongoose and MongoDB for our database, but we're using Next.js as our backend solution.
00:02:03 And those two, at the time of the recording of this video, don't seem to be compatible.
00:02:08 It's possible things change in the future, but I'm actually very glad that we encountered this real-world issue, because now I get the opportunity to show
00:02:16 the solution to you.
00:02:17 There's also one article written on Medium that says, MongoDB in Next.js, how to overcome the edge runtime middleware hurdle.
00:02:25 This is where NextAuth comes in, because we're using NextAuth as our authentication solution.
00:02:31 And if you go down, you'll notice right here that the primary issue lies in when a user is trying to log in, the website attempts to perform MongoDB operations
00:02:41 in Next.js middleware, which is running within the Edge runtime environment.
00:02:45 However, this MongoDB connection does not support the Edge runtime right now.
00:02:51 Changing the runtime environment will not be able to resolve this issue because the Next.js middleware layer supports Edge runtime environment only.
00:02:59 So how can we actually solve this?
00:03:01 Well, one of the ways is using Prisma with MongoDB, which is totally okay.
00:03:05 The second solution is to use the API routes.
00:03:09 Yep, the same API routes we have created in the previous module.
00:03:14 So everything we're saying right now that it doesn't work, it doesn't work with the server actions as they're being executed through the middleware.
00:03:22 But if you use API routes, which is what I taught you how to do, Then you can very freely just register a user by calling the API registerRoute.ts or login
00:03:34 a user through the API login route.
00:03:36 After implementing these changes, it's going to run and this should resolve your build issues.
00:03:42 So even though you've learned about all the amazing benefits of using server actions and how convenient and easy they are to use,
00:03:50 we won't be using server actions for implementing authentication.
00:03:54 We'll be using them for everything else in this project, but we'll use a couple of API routes we have already created, such as these ones right here under App,
00:04:04 API, Account, and Users.
00:04:06 And we'll also create a few more API routes to implement the authentication part of our application in a way that it is connected to our MongoDB database.
00:04:15 But for all other functionalities not related to Auth, we'll be using server actions.
00:04:21 So that's why I said that I'm incredibly glad that this issue happened.
00:04:24 because it allowed me to teach you not only how to use API routes, because it allowed me to teach you not only how to use server actions,
00:04:33 the ones that you have seen in a previous demo, but also how to use the API routes using the best possible industry standard practices like error handling,
00:04:43 fetch functionality, and even this API object, which simplifies data fetching.
00:04:48 So you're basically getting best of both worlds.
00:04:51 So with that said, now that you understand the whole story, let's finally allow our users to get authenticated.