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.