Custom Login Page in Next-Auth and Next.js 13 Authentication : Complete Step-by-Step Tutorial

hey what's going on the vitalparts welcome to the Sakura Dev channel in this video we are going to create a custom login page for next auth package inside our next.js version 13 application so without further Ado let's get into it okay I open up a next.js version 13 project which is integrated with the next auth package but before moving forward I want to mention that this is not a detailed video about next auth so if you're not familiar with the next half I highly recommend you to watch my other video which is about the how to set up the next half package with Nexus version 13. and as I mentioned I've already set up the next off with this project so we can quickly go forward to create our custom login page so before doing that let me show you what we have here in the Pages directory and API we have an auth directory and inside it we have the next auth configuration file so in this file I've added the credentials provider into the providers of the next auth so as you know with the credential provider we can authenticate our user with a username and password so here we have the authorized method which takes the username and password inside an object called credentials and then inside this function we have to authenticate our user so in my case I keep the user list inside a backend database so here I have to send a post request to this backend API slash auth login route and then inside the body of the post request I send the username and password which are extracted from the credentials object which is fed into the authorized function and then if the post request Returns the user data it means that the user is authenticated so we return the user into the session of the next auth or else we just return null which means that the user is not authenticated and then inside the app directory first of all we have a providers component which wraps its children inside the session provider that comes from the next off slash react so in this way all the children inside this session provider can access to this session of the next half with the EU session Hawk and then inside the root layout of our application we just wrap all the pages and components of this application inside the providers component that we just defined and also here in the root layout we have an app or component so if I go to the app or compound you can see that it's just a header section which has an a link to the home page and also a login button so in the login button first of all we read the session from the U session hook which comes from the next auth slash react and then check if the session that user existed which means that the user is now logged in into our application we just show the username and then show a sign up button which in the on click event of this button we call the sign in function which comes from the next auth slash react and otherwise if the user is not existed in this of the next auth which means that the user is not logged in into our application we just show a signing button and in the on click event of this button we call the sign in function which again comes from the next auth slash react foreign now let me talk about a little more about the signing function of the next auth we can call the signing function in two ways without any argument or with arguments so if we call it without any arguments just like this it just sends the user into the login page we can also call the sign in function with arguments so if we call the sign in function with these two arguments the credential string as first argument which determines that we are using the credentials provider and then pass an object which contains the username password it calls the authorized function in the next auth configuration file and if I go back to the vs code and here in the login button you can see that we just call the sign in function without any argument which means that it just sends the user into the login page so now let me run the server if I click on the sign in button here it just sends us to the login page that is created by the next auth package so if I put my username and password and click on this sign in you can see that now the user is logged in and the name of the user is now on the app bar but what if we want to have a custom plugin page so stay with me until the end of this video and you will find how to create a custom login page and how to configure the next auth to send the user into the custom login page instead of that simple login page that is created by itself okay let's do that so I go to the vs code and the first thing I want to do is to go to the next auth configuration file and after the provider section I'm going to Define an object called pages and inside it we can Define the route for the custom login page so the route for the sign in is going to be slash off slash sign in so obviously this route is not existed in our application so I go to the app directory and create this route so here I'm going to create a ask directory and then inside I'm going to create a sign-in directory and then inside it I'm going to create the page.tsx so here first of all I'm going to create a functional component and call it the login page okay let's save this and here let's sign out and again sign in and you can see we are headed to our custom login page instead of that simple login page that is created by the next art itself so let's complete this login page so first of all I'm going to create two userf one for the username and the other for the password so for the sake of time I just paste them and let's import the user from the react so we have the username and password and then let's copy and paste the class name for this pattern div and inside this pattern div I'm going to create another div which contains the inputs for the username and password let's put the class name for it and then inside it I'm going to Define two text box so let's import the text box from the element folder which is here in the components slash elements and here we have a button element and also a text box as you can see it's just a label and also a text input with a bunch of Tailwind CSS and you can use it in your own project if you want so here in the login page you can see that in the username text box in the unchanged event we set the username use ref to the value of this text box and also we do this with the password text box and after these two text boxes we just put a button here let's import it and its caption is login and the on click event of this one we call the on submit function so we haven't defined the unsubmit function yet so let's define it so I'm going to say const and submit is going to be an async function and then insert it we are going to say const results equals to weight and then call this sign in function from the next pass package and here instead of just calling the sign in function without any argument we have to pass two arguments the first one determines which provider we are going to use so obviously here we are going to use the credentials because we are going to authenticate our user with username and password and then pass an object that contains the username and password so I set the username to the username use ref dot current and also the password to the pass user that current and here we can Define two other properties the first one is redirect and set it to true which determines that after the sign in function is complete we redirect the user into a certain page that we Define here so we Define the Callback URL and set it to our home page so these two properties determines that when the sign in function is complete then redirect the user into the home page so now if I save this and go back to the browser it says we have user inside the page.tsx file and this is a server component so let's mark it with the use client and let's save this and it says newsrev is not the file so let's refresh this and the arrow is gone go to the home page and if I click on the assigning button here you can see that we are headed to the custom login page and if I put my username and password and and click on the login button you can see that the summoning functionality is completed and we are headed to the home page and here we can see that the name of the user is now on the app bar so in this way we have successfully created a custom login page and also configured the next auth to call the custom login page instead of that simple login page that is query by itself so let me quickly review what we have done here first of all in the next auth configuration file we have to define the path for our custom login page so in this case we set it to slash off sign in and then go to the app directory and create a route for slash off sign in and then here inside the page we have created a client components which takes the username password from the user and then inside the or click event of this login button we call the on submit function and inside the unsubmit function we just call the sign in function which comes from the next half slash react with these two argument the first argument determines the type of Provider that we are going to use and in this case we use credentials provider and in the second argument we pass the username and password of the user and then we say after the completion of the signing function we direct the user to this URL that we have defined in this case we set it to our home page and yeah I think that's it for today and if you like the video please hit the like button and stay tuned for my next video bye bye

Channel: Sakura Dev

Views: 49,007

Keywords: next.js tutorial, next.js, authentication, next.js 13, nextjs authentication, next.js tutorial for beginners, next js tutorial, nextjs tutorial, authentication in next.js 13, next.js tutorial on sign in and sign out, next.js tutorial on server-side authentication, server-side authentication in next.js, authentication in nextjs, next-auth tutorial, next-auth, next js authentication tutorial, next-auth custom login page, how to make money from programming

Id: hADeo48SATU

Length: 12min 18sec (738 seconds)

Published: Sun Mar 26 2023