Custom Login Page 2023 | Next-Auth | Next.js App Router

how we can create custom login page for next auth in next year's version 13. so we are going to create this custom signing page for next app which uses the intercepting route concept of the next JS so as you can see we are in a model login page which is actually an intercepting page route for this sign in here so if I hard refresh the page we are headed to the actual sign-in page of our application so we are going to use this custom login page instead of this simple and basic sign-in page that is created by the next app automatically for us so sit tight here because in this video you're going to learn a lot about how to create a next of custom login page and also how to intercept the routes inside the Nexus application so without further Ado let's get right into it okay this is the next JS version 13 project and I have set up the next app inside the app directory so let me show you quickly what's going on here we have the route Handler of the next off and as you can see I have created a Handler with the next R function and set up the credentials provider here and here we have the authorize function which is most important part of the credentials provider and in this function we should actually authenticate our user in other words when the user click on the sign in button inside the sign in page this authorize function will be called and the credentials object here contains the provided username and password which user enters in the login page so actually we should have a mechanism here that checks the provided username and password and if they are correct we should return a user object and if they're not correct we should return now the return object of this authorized function will be kept inside the next auth session so anywhere inside our application in order to check if the user is authenticated or not we can check the next of session and if there is a user object inside it we can say that the user is authenticated and if there is not a user object inside it we can say that the user is not authenticated that's it and as a last step inside the next of Route Handler we export the Handler that we've just created as a git function and also as a post function so every request to this slash API slash off slash whatever just like this will be handled by this rap tumbler okay so if we look back at the authorized function here you can see we call a login function which takes the username and password and this login function comes from the lip slash auth file so this is the of the TS file and here as you can see we export the login function which takes the username password then with the help of the Prisma we check inside our database if such a user with this username is existed and and here we check if the user is not now which means that there is such a user with that username and then we use the compare function from the big grip library to compare the provided password with the hashed version of the password which is saved inside our database so if the provided password is correct we can return this user object from this login function and before doing that we just remove the password from the user object and then return it to the authorize function we are doing that because it is not safe to keep the user password inside the next auth session and actually we don't need the user password and let's move on next we have created the providers component which comes from the next off slash react and then it gets the children as its prop unwrap the children's inside the session provider and then we can use this provider's component inside the main layout of our application so now in every client component inside our application we can access to the use session hook which actually Returns the session of the next auth and in the server components we don't need that session provider we can just call the get server session to retrieve the session of the next half from the server that's it the next app will handle it for us and we don't need to worry about it okay and then we have the sign in button which uses the use session hook and this eustition hook comes from the next up react and it Returns the session object and then we can check if the session is existed and also station has a user inside it we can just render the name of the user session.user.name and also will render a button that calls the sign out function from the next off it will sign up the user from our application and if this condition is not the case it means that the user is not authenticated yet so we have to render a button with which calls the sign in function from the next off it automatically redirect the user to the sign in page and now let's run our application to see what's going on in the browser okay we have this simple application this is a link to the home page and this is the sign in Button as you can see we haven't signed into our application so if I click on the sign in it will redirect us to the sign-in page that next auth will create for us automatically we didn't create this sign-in page it is created by the next auth so here I put my username and also my password and if I click on the sign in button here the authorize function from the credentials provider will be called so if I click on the sign in you can see now in the sign in button we have the name of the user and also a sign out button okay that's cool but how we can create a custom login page for our next year's application that uses next up for authentication so let's get right into it okay if you still want watching please consider subscribing to my channel I have a variety of content about nextges typescript and also nextges that I'm sure you'll find them useful okay so first we need to go to the next of Route Handler and here after the providers list we should add a Pages object okay and then inside it we can define a custom route for our sign in page so here I'm going to specify this sign in and set it to slash sign in so let's save this and let's go back to our application let's sign out and now if I click on the sign in it will redirect us to the slash sign in but since we haven't create a sign in page yet it shows us a 401 page which means that the page is not existed in our application so now let's quickly create a sign in page in our application so I go back to vs code and here inside the app directory I'm going to create a directory called sign in and then inside it I'm going to create the page.dsx okay so now let's create a functional component here and let's call it sign in page okay let's save this and go back to our application if I click on this sign in you can see it will redirect us to the sign-in page that we have just created so now let's go back to vs code and create this login page so as I said in the introduction section of this video we are going to use a route intercepting features of the Nexus version 13. so we actually want to create two sign-in page for application the first one is our actual sign-in page and the second one is the sign in page that will intercept the sign in route and it is a model version of our sign in page so the contents of the both sign-in page are the same so in order to prevent repeating ourselves we just want to create a login component here inside the components directory and then we can use it inside both sign-in page so here I'm going to create a login component here in the components directory plugin the TSX okay so I'm going to create a functional component here and let's create a props types for this component so I'm going to say type props and it's going to have a class name just going to be a string okay so now we can have the props here so we have the props object and set its type to the props type that we have just created here and let's find the crops.class name to the root div of this login page okay and then inside it we're gonna have another div let's put a login form text inside it okay and let's add some table and CSS classes here okay and let's go back to our sign in page and just render a login component here okay and now let's go back to our browser and you can see the login form here so let's go back to our login component and let's create a form here okay let's add some table CSS classes use the flex here and set the direction of the flux to the column and now we can have two input for username and password here so I put two input bugs here and let's import the input box it is a component with just a label and also an input together you can find it here inside the components directory and as you can see the name of the first one is username and the second one is password also we set the type of the second input box to password so it will mask the password when we are typing the password and here as you can see inside the unchanged event of each input box we have set a username and past state to the correspond input box value so let's define our two State here the username and pass and set them to user Hook from react we use use ref here because we don't want our page to re-render every time user inputs a carry character inside the input box you can also use react hook form library to handle this form but in this video we're not going to use the react hook form Library we just want to keep it simple okay so as you can see we have two State here username and password and we bind them to their correspondent input boxes okay and then we need to create two button the first one is for the sign in and the second one is actually a link for canceling the signing operation okay so first let me create a d viewer and then put those two button inside it okay and now let's set the class name here we just use the flex option here and inside it we can have our two button the first one is the sign in button which its type is submit we didn't create the submit function for this form and we're going to create it in a second and next to the sign in button we're going to have a link here which is actually a cancel button we which redirect the user to the crops.callback URL or to the home page if the Callback URL is not existed so we didn't Define the Callback URL inside the props of this login component so we're going to quickly create that and here inside the props you should add the Callback URL which is going to be a string okay so now let's save this and go back to our application and here it gives us an error and that's because we use the use ref inside a server component so let's turn into a client component here we can't use a server component for our login component in the next auth I have tried to use a server component but it's not possible and I will tell you the reason in a second okay let's go back to our browser and as you can see we have the username input box and also the password input box and then we have the sign in button here and also we have the cancel link here which if I click here it will redirect us back to the home page so again if I click on the sign in we will be redirected to this sign-in page okay so now let's go back to our login component here and here we need to create a unsubmit function so I'm going to say const and submit which is going to be an async function that has one parameter e which is going to be type up form event so now we can easily set this on submit function to the unsubmit event of our form here and let's create the body of this unsubmit function the first thing we should do here is to call the prevent default of the parameter so it will prevent the page from refreshing so here I'm going to call prevent default that's it and then here we should call the sign in function that comes from the next auth so I'm going to say wait sign in here as you can see the sign in function comes from the next auth slash react and here we should say that with which provider we are going to authenticate our user here I'm gonna go ahead with the credentials and then we should pass an object here the ads first of all contains the username okay and set it to the username ref that correct and also you should do that with the password okay and set it to the Past state that current so remember the username pass are user so that's why we use the dot current here and then we can also specify the redirect here I can set it to true so after the sign in is completed it will redirect us to the Callback URL that we are going to set here so we can set the Callback URL here and set it to props dot callback URL and if the Callback URL is not provided we can just redirect the user to the home page of our application that's it and if you don't want to automatically redirect the user to the Callback URL we can just set the redirect to files okay and now let's go back to our our browser and here as you can see we have the username and also my password here and if I click on the sign in it does nothing for us just refreshing the page and that's because here inside the form we didn't set the unsubmits of the Forum to the on submit function that we have just created okay I just call the on submit and just set it to unsubmit function so now let's save this and go back to our browser and if I click on the sign in you can see we will redirect it to the home page and now we can see inside the sign in button the name of the user which is Sakura Dev and it means that the user is now authenticated okay so if I click on the sign out and again click on the sign in and just put a wrong password here and if I click on the sign in you can see we will be redirected again to the signing page and here we have a query prompter here that has the error equals to credential sign in which means that the sign need was not successful because we have provided the wrong password okay so now let's go back to our login component and also we can have the error here inside the props so we have the error okay which is going to be a string or we can just set it to Boolean we just set it to string and here before the form we can check that if props that error is existed so now let's turn it to a Boolean value so these two double exclamation mark turn the error props to a Boolean variable okay if the arrow existed we can render a message here we're going to render a paragraph tag here okay and then we can say something like authentication failed okay so now let's get back to our sign-in page here and let's define a props for the sign in page I'm going to create a type and name it to props okay we're gonna have a search params here which is actually these search Brands here we have the Callback URL and also the arrow here we can access to these search params from the browser URL so let's get back to our sign in page and set the search primes to a record here and let's set the type of the key to a string Union it is going to be a callback URL or an error so the search params can either be callback URL or error and then the value of the search param is just a straight so in this way we can access to the search params of the sign-in page so now let's get the props here in our component and set its type to the props type that we have just created and now we can set the error props here I'm going to set it to the props that search prompts dot error okay we can do this with the Callback URL so we're going to have the Callback URL and we can set it to props yeah searchpreams.callback URL Okay so so now let's get back to our sign-in page and provide a wrong password and if I click on the sign in it will here render the paragraph tag here that says authentication failed so let's get back to our login component and put some table and CSS classes to style the error tag here set the class name to the BG red 100 and also text color to the text red 600 and also set the text alignment to the center so I'm going to use text Center and then we should have some padding so I'm going to use the P2 for padding and let's get back to our browser and you can see the error message here which says that authentication failed so actually we have misspelled the authentication so let's fix that okay and now we have a correct message here so let's provide the correct password and click on the sign in and it will direct us to our home page because we didn't provide a callback URL so that's it for the custom sign-in page but in the next section of this video we're going to intercept the signing route here and load the sign in page inside a model component so in order to do that I go back to our vs code and here inside the app directory side by side our sign in page I'm going to create another route for intercepting the sign-in route here so since the intercept route for sign in page is in the same level of Designing route we can have a parenthesis here and then inside it we just have one dot which means that we are going to intercept a route in the same level of this directory and then we should pass the name of the route that we are going to intercept so it's sign in so we're going to use the exact spelling of the sign in route here and then inside it we're going to have the page.tsx okay so what does that mean it means that every time inside our application we are going going to go to the sign-in page through a link component we will intercept the sign-in page and call this intercept signing page instead of this actual sign-in page that simple so here we just render a functional component and let's set it to sign in page and no page 2 for example or intercept it okay and let's go back to our browser and sign out and if I click on the sign in you can see we still go to the actual sign-in page and that's because we are not going to the sign in page through a link component we actually redirect the user and reload the page and that's because we don't go to the sign in page through a link component so let's go back to our sign in button here okay and here instead of having a button it's called the sign in function which automatically redirects us to the sign-in page that here inside the route Handler we have specified it so the sign-in function knows exactly where is the signing page and it will redirect us to that sign-in page but here as you can see we use a button element for calling the sign in page actually we don't need to call the sign-in function we can just have a link here a link component from the next.js and we don't need the unclick event here and we can set the href of this link component to just slash sign in okay so let's get back to our browser and here as you can see we have a link here so let's give it some tail and CSS classes to look better we can have the text green for example 600 and I think that's okay so now if I click on the sign in it's a link component and it will redirect us to the sign in page intercepted as you can see the sign in page has been intercepted with this sign-in page intercepted page okay so now now let's go back to our intercepted sign-in page it's here and just put the login component here and let's import it from the components directory okay and let's go back to our actual sign-in page and here let's copy the props type and paste it here and we can have the props and set its type to the props type okay so as you can see the intercepted login page is exactly the same our actual signing page we can't see any differences here so let's turn into a model component I've already created a modal component inside the components directory you can use any UI library for this model component I have used the Tailwind CSS and headless UI for creating this model component but you can use whatever component you want also you can find it inside the GitHub repo of this project so I'm going to use the model here and let's wrap our login components with this model and let's import it from the components directory and we're good to go let's go back to our home page and now if I click on the sign in you can see the login form is inside a model component now so if I click on the sign in you can see it will authenticate the user and render the name of the user in the app bar so now let's sign out and again click on the sign in but if I refresh the page it will actually take us to the actual sign-in page not the intercepted sign-in page so this is the beauty of intercepting routes of the Nexus so let's get back to our home page again if I click on the link component here you can see we'll intercept the sign in route in the app directory okay that's it for this tutorial and in the upcoming section of this playlist I will teach you how I can register a new user in your database with Prisma and also drizzle RM also we are going to talk about how you can handle the back-end jwts and refreshing the backend jwts have a nice time and stay tuned for my next video bye bye

Channel: Sakura Dev

Views: 11,527

Keywords: next.js tutorial, next.js, authentication, next.js 13, nextjs authentication, 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, route intercepting, next auth, intercept route in nextjs

Id: g6S-XZxq9Ug

Length: 23min 8sec (1388 seconds)

Published: Thu Aug 17 2023