Quick Lecture Overview
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
Debugging oAuth
Loading...
Loading...
Complete source code available till this point of lesson is available at
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
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, FunctionsSubscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 I would start searching for the bug somewhere near the files that we have created.
00:00:06 Maybe let's look into the route.
00:00:09 Here we have the post request.
00:00:10 And right off the bat, I don't think this file is to blame because we haven't yet even fired the API request.
00:00:16 So it's gonna happen a bit before.
00:00:18 maybe in this OAuth sign in.
00:00:21 Here, we're calling the fetch handler, which is trying to establish a request that we have specified here, to forward slash auth,
00:00:29 forward slash sign in.
00:00:31 I'm missing an N right here, so that's sign in with OAuth.
00:00:38 And I think I'm missing a U here.
00:00:40 So I actually made a double typo here.
00:00:42 And this is something that actually could have been fixed by using the routes functionality, which we have implemented at the start under constants and
00:00:50 then routes.
00:00:51 See, if I copy this string right here and add it right here as something like, let's do it as sign in with OAuth.
00:01:00 So I'll say sign in with OAuth.
00:01:04 And that's gonna be equal to just a string of signInWithOAuth, like this.
00:01:10 Now what you can do is instead of using this string, now you can simply say routes.signInWithOAuth.
00:01:18 And if you make a mistake here, it's gonna be immediately noticeable because you're no longer exporting that specific string.
00:01:26 Okay, good.
00:01:27 And feel free to do that for other routes too, if you want to.
00:01:30 So, if I head back here and try to log in with GitHub, we get access denied, and if you check the terminal, it says connected to MongoDB,
00:01:38 but the error is happening with the validation, saying account validation failed, user ID, path user ID is required, and we got access denied.
00:01:48 If you scroll down, you can see another 500 error fetching this data.
00:01:53 Okay.
00:01:54 So we know we have some kind of a validation error regarding the user ID.
00:01:58 So let's head over to where we're using that validation by heading over to sign in with OAuth.
00:02:06 that's going to be right here, and I believe we're validating stuff right here.
00:02:11 Sign in with OAuth schema.
00:02:13 Yep, that's it.
00:02:14 If we head over to the validation, you'll notice that we have the provider, the provider account ID, and then the user, which has the name,
00:02:23 username, email, and image.
00:02:25 But in this case, the validation was actually complaining about the user ID.
00:02:29 Interesting, considering that we're never mentioning that user ID here.
00:02:33 And in this file, the only place where we mention the user ID is right here under account.find1.
00:02:39 But this is just for the account search, so it shouldn't really pose a problem.
00:02:43 But currently, we're also checking for the case equality.
00:02:46 What if we don't match the case?
00:02:48 You'll notice I mentioned a user ID for the second time, but this time I made a typo, and the I is not uppercased.
00:02:56 So now, if we fix this, everything should be working.
00:02:59 I mean, this is just absolutely amazing that we got the account validation failed under path user ID is required and we were only able to find this error
00:03:10 so easily because we have a very comprehensive validation and error handling system put in place.
00:03:16 So with that, if I head back over here and try to log in with GitHub, now I get a different kind of error.
00:03:22 We get the same thing as before, which is not very motivating.
00:03:26 But if I head back over to the terminal, this time we got a different error saying, internal error, no response is returned from the route handler,
00:03:35 project app API auth, sign in with OAuthRoute.ts.
00:03:40 Ensure you return a response or a next response.
00:03:44 Okay, so this is pointing us in the right direction.
00:03:47 We have to head over to sign in with OAuth, and we have to see what we are returning from it.
00:03:53 In this case, it really seems like we're not returning anything.
00:03:56 So, again, I made a mistake here.
00:03:58 It should have been return nextResponse.json, and we can pass the success of true.
00:04:06 And of course, the next response needs to come from nextServer.
00:04:11 Even though I've made multiple mistakes while we were implementing the authentication functionality, you can see how with proper error handling,
00:04:18 it is very easy to debug it.
00:04:21 So now if I head back over here and try to log in with GitHub.
00:04:27 This time, it actually worked.
00:04:29 But how can we make sure that it actually worked?
00:04:32 Well, head back over to your terminal and check this out.
00:04:36 The session is now populated with an object containing all of the user information coming directly from GitHub.
00:04:44 And we also got the expiration timestamp, which means that the session indeed got created.
00:04:49 Even though we cannot see it on the page yet, that is now a very simple thing to do.
00:04:53 considering that we have done all the hard thing of actually making it happen, and making sure that this data is where it needs to be.
00:05:00 But of course, the only way to tell whether this truly works is head back over to our MongoDB Atlas to see whether a user has been added to the database.
00:05:09 So head over to Clusters, Devflow, and then Collections.
00:05:14 Under Collections, you should be able to see a new Devflow accounts and users collections.
00:05:21 Under Users, you can see two users.
00:05:23 One is for John Doe, which is a fake user we have created before, which for now I can simply delete.
00:05:29 And the real user is the one that was generated for me by using GitHub OAuth.
00:05:34 We get the username, email, even the image, created ad, updated ad, name, and all that good stuff.
00:05:41 But with it, we also got a new account that was created for that user, pointing to the user ID where we have the name, image,
00:05:50 as well as the provider and the provider account ID, which means that everything worked perfectly.
00:05:55 So from now on, whenever you need to see whether something has been successfully done in the database, you can head over to the MongoDB Atlas clusters
00:06:03 and then head over under collections and play with the data.
00:06:05 If you're on VS Code, you can also check it out right here, where we have an active connection to the same Atlas cluster.
00:06:12 So if you want to check out this user or documents, we can see them right here and explore them directly within the VS Code.
00:06:20 Pretty cool, right?
00:06:21 With that in mind, Let's just check out what happens if we try to log in with the same email, but this time using Google.
00:06:28 I'll click login with Google, and I chose the same email that I registered through GitHub with.
00:06:33 Now, if I check out my structure and reload the users, you'll notice that there is still only one single user.
00:06:40 Before, my name was my first and last name and then JS Mastery, but now it actually modified it to just my first name and JS Mastery,
00:06:49 because that's how it's specified in the image, because that's how it was specified in Google.
00:06:53 You can also notice that now the image is coming from Google and not from GitHub, which means that the updates are working perfectly.
00:07:01 But now, if you head over to accounts, you will see two different accounts.
00:07:06 One regarding GitHub, connected with this specific user.
00:07:10 whose ID ends with ED2 and another one coming from Google whose user ID also ends with ED2.
00:07:18 And I think you can now finally fully understand the point and the difference between users and accounts.
00:07:26 Great.
00:07:27 Great work on implementing social OAuth in the most native way possible, using Mongoose and MongoDB, as well as NextAuth and hooking it up to our own API
00:07:40 routes that allow us to establish JSON web tokens and keep track of sessions.
00:07:45 We also overcame some bugs and errors, but we were able to resolve them very quickly given our comprehensive error handling system we have developed before.
00:07:53 So let me write our commit message right here by saying, implement OAuth, commit, and sync.
00:08:01 And with that, we are ready to move onto the credentials authentication, this time using the email and password.
00:08:08 For that, instead of using API routes, will actually use server actions.
00:08:13 So you'll get to understand how both of these work for implementing similar functionalities.
00:08:18 In this case, the auth.
