"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code available till this point of lesson is available at
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
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, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:02 Now that we have the full logic for credentials authentication implemented, let's actually allow our users to sign in and keep track of that actively signed
00:00:11 in session.
00:00:11 We can do that by heading to our code, actions, auth actions.ts, and within this same file below sign up with credentials,
00:00:20 we can create a new function to sign in with credentials.
00:00:23 To create it, we can actually duplicate the sign up and just replace a couple of things since it's very similar.
00:00:31 Let's say sign in right here with credentials.
00:00:35 For auth credentials, it'll be similar, but we'll use TypeScript's pick functionality, where from T we can pick a set of properties whose keys are in the
00:00:46 union K.
00:00:46 I know it sounds complicated, but basically what it says is take in these auth and credentials, but sometimes we can pass just the email and the password.
00:00:55 Now we can get the validation result, but in this case, we'll refer to the sign in schema.
00:01:01 We're going to check for the error.
00:01:03 This time, we won't be getting the name and the username from the validation programs because we're just logging in with the email and password.
00:01:09 In this case, we don't have to start a new transaction just because we are not doing any mutations or deletions.
00:01:17 We're simply trying to sign our user in.
00:01:20 So I will return the part where we try to create a session.
00:01:24 I'll also scroll down and I'll remove this part where we commit the session as well as the finally where we end the session.
00:01:31 And we can modify the catch block to just return the handle error.
00:01:36 Now let's scroll up in the try block.
00:01:39 We're first trying to get the existing user by email and we don't have to add the session.
00:01:45 Then if we don't find it, we return a new error, but we can say something like throw new, not found.
00:01:56 this is a bit more precise and then we can say user so we know that the user was not found after that we can try to get not the existing username we don't
00:02:06 care about that because we're just trying to find a user to log in so instead of this we need to try to find a new user account so i will actually remove
00:02:17 all of this and immediately after if existing user We can put that in a single line.
00:02:24 We can try to find an existing account by saying const existing account is equal to await account dot find one based on the provider,
00:02:38 which is going to be equal to credentials.
00:02:41 And we also have to pass the provider account ID, which is going to be equal to email.
00:02:46 Finally, if there is no existing account, we can simply say throw new not found error for the account.
00:02:54 And this is going to be if the existing account doesn't exist.
00:02:57 Next, we have to check whether the passwords match by saying const password match.
00:03:03 is equal to await bcrypt.compare where we're comparing the password with the existing account.password.
00:03:11 Finally, if the passwords don't match, we're going to throw a new error saying passwords don't match.
00:03:17 But if they do match, we'll sign the user in with the credentials, email password and redirect to false and return a success of true.
00:03:26 And this is it.
00:03:27 This is our sign in with credentials function.
00:03:30 Now that we have this function, let's head over to our sign in page.
00:03:35 And here where we have the promise resolve, we'll actually call it.
00:03:39 So let's call the sign in with credentials function coming from lib actions, odd actions.
00:03:47 Let's just verify we have the use server at the top, which we do.
00:03:50 And believe it or not, that should be it.
00:03:53 If we implemented everything correctly, we should be able to go back, enter the email address you used to register with,
00:04:01 and the password that you used before, and click sign in.
00:04:04 In this case, we're getting Kenneth Read properties of null reading password.
00:04:08 So if we head back over to auth.action.ts, the error should be somewhere here, most likely for this existing account.password.
00:04:18 The existing account doesn't exist.
00:04:20 So, Oh, would you look at that?
00:04:22 If existing account, throw a not found error for the account.
00:04:26 That's definitely not right.
00:04:27 If the existing account doesn't exist, so that's a not sign right here, then throw the not found error.
00:04:34 Same thing for the user.
00:04:35 If not existing user, then throw the not found error.
00:04:39 Okay, that's just a typical check mistake.
00:04:42 So now that you've done that, let's try to sign in once again.
00:04:46 This time we're getting a user not found 404. So if we head back over to your MongoDB Atlas, head over to users, you should be able to see a user with
00:04:55 the email that you're trying to log in with, as well as its new account that was created for you, which means that the user with this email should be surely there.
00:05:04 Of course, if I knew how to type, it looks like I didn't type the word JavaScript properly.
00:05:09 So now if I fix this and click sign in, success, we're signed in successfully.
00:05:14 That is great.
00:05:15 Now, that means that both the sign-up functionality with the email and password is now working alongside the OAuth sign-in options and the sign-in with
00:05:24 the email and password.
00:05:26 The next thing, of course, will be to actually utilize and show that session that we have created right here at the bottom left of our navigation bar.
00:05:36 So we can tell the user that they're logged in and we can then hide the login and sign up buttons.
00:05:41 We also need to implement the logout functionality.
00:05:44 So let's do all of that in the next lesson to finalize the whole authentication process.
00:05:49 Things will go super smoothly from now on.
