Complete Login System for a Job Portal App with Next.js, MySQL, Drizzle ORM, and TypeScript

Hello, what's up guys? Welcome to the next JS and MySQL Present job portal application. Today is our day 17 and today we are going to see login functionality. Yes, guys, we have already made the login page. Our registration page is also complete. The rest is your login page. Login page means the UI is ready. But whenever you go to log in on it, whether it is correct or not, the user's email id and password is written, whether it is correct or not, we are going to complete all those things in just one video today. I mean, how much time did it take us to register? But we have already taken that time in it. That's why we are going to complete the login from start till end in just one video today. Whatever value the user is writing, we have to get it first. On top of that, if we are using TypeScript, we have to define types. And then after that, whenever someone clicks on the create account, we have to get that data and pass it to our server action. Go to the server action and call the database to see whether this email id and password already exist or not. Before that, we have to check that this password is already a string. And the password in our database is hashed in this way. So I can't even compare it with a normal string in hash. So what should we do for that? We will need the help of our library Argon2. So there are a lot of things that we have to check. In just one video today, you can tie the seat belt. Let's start the video without any delay. Before that, don't check out the rest of the previous videos. Please check out. You will get to learn a lot even if you do it slowly. And guys, if you haven't subscribed to the channel yet, please do it. So that you don't miss such awesome videos. And if you want to learn live react classes from me yourself every night from 9 to 10.30 or 11 o'clock. So guys, you can join the course. It has been completed for 4 days. So there is still a month left. It's up to you. Else, let's start the video without any delay. So first of all, we have already made the login page. And I am assuming that you have already made it. If you don't have a source code yet, then you can get the link in the description and comment section below. So this is our login form. Where we have an email and then we have a password. On change, value, everything. We have stored the value in the user state as well. No doubt, my form data already has the email and password data. So if I go to the register, then we did something like this. So I copy this here. Because we have already seen why to do it again and again. So I go here. Look carefully, instead of registration data, I will go with login data. No doubt, I go to the login data. I don't need a name. I don't need a username. I don't need a role. I want only email and then password. So once I got the email and password that the user had typed. In fact, I have made it lowercase in a better way. And we have also trimmed it. Because when we were registering, we did the same thing there. So now what I will do here, I have to create a server action. So login, user and then action. So this is my server action. And I am passing this login data on it. Now remember one thing, when you pass login data like this, then your work is done. But yes, this is giving you a warning. You can use await only when you are using async function. So I made this async like this. Here still cannot find your server action. It is not getting it. Because we have not created it yet. So I will go to the same auth.action.tss file. And by the way, if you see, my auth part, server action, I have kept it separately. So we have a feature folder. It also has auth. It also has a server. And I have added auth.action.tsx there. This is a convention of folder structure. If you want, you can follow it. And guys, there is a background noise. I am really sorry. It's my nephew. But it's okay. When my nephew is speaking, there is happiness in the house. Let it be. It's okay. So I told you in this way. Auth.action.tsx We have already seen the registration in this. Now we will see the login here. So we have export const login user action. We need this. And then let's go with fat arrow function. And obviously, we are going to use asynchronous operation in this. If you remember, I have passed the login data there. Where? Here. If you look carefully, login data. I have got it here as a parameter in the name of data. Now what should we use? Type script. It is telling me. It implicitly has any type. But I know that it has only two data. Email and then your password. And both are strings. I have to tell it here. So what do I do? Either I can go with interface. Either I am using type. And when you are using type. Login. What is written? I have written data. And yes. Equal to. Now I will tell you here. How will you know what type you like? I mean what to pass. When you were creating a login in this way. If you hover on this login data. Then it tells you by default. See this. This is basically from this scope. Whatever is in the middle of this scope. You have to copy paste it. I did it this way. I will come here. At this place. And see this. I will paste it instead of this. That's it. Now I will pass this login data here. So my work is done. I have shown the type of my data here. That this is its type. In which there will be two fields. And this is the type of both of them. This is it. This was its work. Now. After doing so much of my work. What can I do here? I will go to try and then catch. So now first of all. I have to destructure my email and password. Isn't it? So email and then password. From where? Obviously from the data. So this destructure is mine. Once you get the email and password. So now what you have to do. You have to check this email. Does it already exist in the database or not? Means from the beginning. Has it been registered with this email id or not? Because now what we are doing here. We are trying to log in. Means the user must have already registered. That's why he is logging in. Isn't it? And I had shown you in yesterday's video. How easily we can check out. Whether the user has logged in or not. If he is not logging in. Then I will copy this from yesterday's video. And I will paste it here. Now yes. I don't want to check the username. So I will remove the username part. And along with that. I don't need any other operator. So I will also remove it like this. Isn't it? So this is how I got it here. And by the way. Something is wrong. And yes. One if statement is left here. Like this. Isn't it? So now you can see very clearly. That if you get the email. Then it will come to the user. Now I don't need to write if user.email like this. Because I know. If the email is matched. Then that user. I mean it is already true. So I don't need this. I will remove it like this. But. There is a problem here. The problem is. If the email already exists. Means it is correct. Means the person had already registered. So this condition is wrong. So here if user doesn't exist. If not user. Means user doesn't exist. Then throw this error. Now the user's tension is over. I mean email id. Now we have to see the password. Now I can't compare the password directly. For that what I have to do. Has password. You write something like this. Or is password valid. Or is valid password. You write something like this. Equal to. Isn't it? And wait. And what did we do? If you remember. You won't get it here. I guess you will get to know here. One second. Here. When we enter the password. Yeah. This is it. Look. When I was hashing the password. Then we have used argon2. And then this is the hash method. In the same way. When you have to check. Verify. So we have argon2. We have a verify method. If you go inside it. If you scroll a little bit. Then nothing is visible here. But whatever it is. Look carefully. We have a digest. Isn't it? And then we have this password. So remember this much. The digest that has been written. The digest means that. Your actual database password. So here the database. How can I get the value of it? Look. If the email id is matched. I am getting the user. Only here I am not getting the email id. If the email id is matched. Do you understand? What am I saying? If the email id is matched. So I will get the complete row. The complete data. I mean I will get the name. The password. Basically password. Its email id. Email id. Everything is clear. So, that user.password, your actual password, which is written by the user, you have to pass This is the password, which is the hash password, this is your normal string password, and if you verify argon2.password, it will make sure that both are common or not, both are same or not. If is not valid password. Sorry, we will not write invalid password. So, that's why, we will write invalid email or password, and even over here also, email already exist. Understand, this is a very important step to prevent your data. Alright. Once, if we have tackled this, we have tackled this also, means, even after this, if we have come to this line, next line, means, user is also correct, password is also correct, means, everything is correct, then there is nothing to do. Now, you just say this, login successful, return success, and login successful, and at the end, if still something goes wrong, then error, unknown error occurred, please try again later. That's all you can do. That's all you have to do. Your login functionality is also done. You can do it here. Import. My work is done. So, now I will go here. We have this email id. I am copying it. I will refresh it once, data will come. No tension. I am putting it in email id. I am creating password. Alright, guys. Nothing came. This means that we have not tackled the notification. Now, I will not do a separate video. Don't worry. I did it in register. So, if you come here, then this login user action is here. I am pasting it right below this. Now, you will say, where did this come from? So, by the way, whatever is the result of server action, I am getting the result here. And my work is done. And I am importing this toast from Sonar. This is it. And by the way, I had already told you in the notification video. Please check it out. And all this is normal. We have already seen it. If you do this much. See this. Invalid email and password. Ah, okay, okay, okay. I understood. First of all, your page is being refreshed quickly. Because you have not done one thing here. Event.prevent default. I forgot to write this. I am really sorry. Alright. So, guys, you can see. I am writing something useless. So, invalid email and password. This is the beauty. Alright. Now, whatever is my actual email and id. I am pasting it. So, guys, this time I have written the actual email id. Which already exists. And I have written the actual password. And login successful. And boom, guys, see. Now, you can see. Login successful. So, yeah, guys, this is it. That's all for today's video. I hope you liked the video very much. Where I showed you. That today in just this one video. We tackled the complete login functionality. I showed you everything from A to Z. And by the way. We could have cleared it. But why clear? Because whenever we log in. We go to the other page. So, there was nothing to worry about. If anyone has any doubt. Do comment and tell. Like the video. Share it with your friends. And next target is 8 lakh subscribers. If you haven't subscribed yet. Please do it. See you in the next video. Till then, guys, thank you so much. Take care.