Next Auth Sign in With Credentials

let's create an app with this create next app and i'm using tab script and for the project name i'm going to use oz app once you have your app let's change the directory and open this project inside vs code now if you run this command npm run dave inside your project and if you visit localhost colon 3000 then you should see something like this now let's come to your project and inside this pages folder let's create this folder called auth and inside this folder we are going to create this new file called sign-in dot tsx and now we'll convert this file into simple next js page and inside here we are going to add our sign-in form you can add an input for email and input for password and this last input for your submit button and if you want to make them beautiful then you can add some classes and h1 and some style for this form and h1 and finally your form will look something like this and i know this looks ugly but this is not the tutorial about making your beauty perform this is about how we can use the next auth and use credential to sign in inside our app now visit next odds official website and if you go to the documentation and the providers and here are a lot of providers from which you can choose and we want to go with the credentials and if you try to follow the instruction here i'm pretty sure that you will get lost down the line but not in this tutorial let's tackle this one by one at first let's install next auth inside our project once we have this we have to go inside our api folder which is located inside your pages folder and we have to create this new folder called auth and we have to add this new and special file called next auth.ts with this spread array syntax this is dynamic route inside next years which we can use to catch all the query and if you want to know more about this you can visit this page and now once everything is ready we can simply import next auth from inside next auth and we are going to export this as the default function from inside here and if you try to invoke this you will get this error and that's because now we have to pass some next earth options for that i'm going to import this next auth options from inside next art and i will pass this auth options inside our next auth and we'll create this auth options with this type next auth options and once we do this we'll have this error and that is because now inside this object we have to pass some of the things which are required by this next auth the first option will be session strategy and we will say this as jwt which stands for json web token once we have our strategy set we are going to now set our providers and here we can pass all the providers that we saw inside the documentation but we are going to use our credential providers for that we have to import credential providers from inside next odd slash providers slash credentials after this we will use this credentials provider as one of our providers and here we have to pass some of the options and the first thing will be type which will be credentials and we have to pass the credentials itself and for now we'll just set this to empty object and i'll explain about this in just a moment and after this we have to pass this function called authorize where we will get these two things credentials and the request and this is the function which will fire whenever we will send a sign-in request to our backend api for example if we send sign-in request from inside the form that we made earlier we'll get that request right inside this function and currently inside this function if you notice here we have this error and that is because inside here we have to do either one of these things we can return this object or we can throw an error if we do one of these things the error will be gone and i'll explain about these things in just a moment inside this credentials we'll have all of the data coming from our front end to authorize our user and this request this is the same request object which we are already familiar inside express app now inside this credentials if we try to destructure these things email and password we will get this error and that is because inside this credential we will not have email and password and that is because currently this credentials here we have above this is just an empty object we'll get all of the things inside this credential from the credentials which currently just is an empty object so for that we can simply cast its type and i'm going to use this email as a string and password as a string and if you're not using typescript then you don't need to do all these things and suddenly all the errors will be gone and now here we can perform our other logics you can validate your user you can find your users from inside the database but here i'm just going to use the simple logic if the username or this email is equal to jonathan gmail.com and if we got this one two three four as the password then we are going to authenticate our user and because here i'm using these not operators if this is not the case then i'm simply going to return null and yes we can also return this null from inside this function and if we do this then it will consider this user as on authenticated means we are going to reject the sign-in request and if everything is fine then we can return this object where we can add this id name and the email which is the signal for this next auth that this user is now authenticated and after this let's come to our index.tsx insider pages and here i'm going to add this new button called login and inside here we are going to attach this on click listener where we will fire this function called a sign in which will come from inside our next that's auth slash react which was previously next auth client and now if we run our project again and if we visit the page and if we click inside this login button then you will see something like this and this is the default sign in page which you will get whenever you are using nextdot and inside your project you may not see something like this instead you will see something like this and i can see this form in front of me and that is because i'm using these credential options inside our credential provider so here you can see inside this credential object previously we were leaving this empty now we have all these things here we have this property called email and password where we have all these things label type and the placeholders and all of these things are the same exact thing which we can use inside our html elements and with all these informations this next author will create this default form for you but if you don't want this default form then what we can do we can override this we are going to make this a key in empty object and here we can pass another options called pages where we are going to define a sign in piece and we have to pass that out where i'm going to use this auth sign-in as the route and whenever you are using these routes make sure you have this exact folder and the file as the page which you can serve inside your pages folder currently we have our auth folder and inside this all folder we have a sign in page so we can use this and now again if you visit that page and click on this login button then you will see this new page as the default sign-in page also here you can pass your sign up piece and the error page as well but for this project we are only going to use our sign-in page and for now let's leave our backend api like this and let's come to our sign-in page where we are going to now handle this on submit event for this will create this new method called handle submit and here to submit this form we need user info for that i'll create this state called user info where we will have email and the password and now we have this email and password so we can add them as the value inside these inputs and also we can attach this on change handler where we are going to update the value of this user info and now after this you can simply validate your user info if you want to before submit this form otherwise we are going to simply use this event and we are going to prevent this default but here because we are using typescript we have to also satisfy the typescript and for this we are going to use this type form event handler where we have to pass this html form element you have to import this from inside a react once we have this we can use our e dot prevent default and then again we can use that sign in function from inside our next auth slash react and if we call this function directly like this we will again redirect to that same page but here if we use this option and if we pass the provider name which will be credentials and that is because we have this type as the credential inside our credential providers after this you can pass this object where you can define the things that you want to pass like email and the password and now because this is an asynchronous function you can wait for its result and if you're using away then don't forget to wrap this function inside async and let's store its value inside the service and log it to the console and now if i use this invalid credential and try to log in then you will see this little flash and if you notice here the url for your app it just changed but if you go to the console then you will see nothing so to fix this behavior what we will do simply we can add this a redirect option and we can make it to false the default behavior for this next auth is whenever we got any error or if we got success this next auth will try us to redirect in some different page which we can set them as defaults and now again if i try to log in with these invalid credentials then inside your console you will see this error and i think i'm done with this tutorial because here we are using these invalid credential and we are getting the success response and why is that and that is because we are using this condition and here we have to change this to r if we have this condition or this condition we just want to return null and now if we login then here we'll get this error but currently you can see the error is credential sign-in but if you want to customize this error then instead of returning null you can throw an error with your custom message like i'm using these invalid credentials and now if i try to login then i'll get that custom message right here but now if i use these valid credentials then i'll get error null okay true and the status 200 which means everything is fine now finally let's talk about the important thing how can we create protected routes for that you can simply open your underscore app then you can import your session provider from inside this next or slash react then you have to wrap your components inside the session provided at last we have to also pass the session to our session provider so for the session you can use your page props dot session everything else will be handled by the next auth editor you can simply save this file and create your brand new file called protected and now inside this page we are going to simply return this function component where we'll have this text this page is only for a special people once you have your page ready you can simply import your usage and hook from inside your next auth slash react and if you invoke this huge session hook like this then you will get the session let's log it to the console and now let's visit this page called protected and as you can see this is your protected piece and here is your session console logs and if you pay close attention to these things then here you can see you have these status loading data undefined and finally the status authenticated and you have these data and here you will have your email and the name which previously we returned from inside that authenticate function and because you have these multiple states like loading loading and the authenticated you can render different components if you want to and if the user is not authenticated then you will get on authenticated so for that if you go to your application tab and if you go inside your cookies section and if you remove all of the cookies and if you reload this page and widget the console log then you will see all these things are on authenticated so now you can check this status and redirect your user anywhere else if you want to which is the same exact thing i'm doing right here if this user is not authenticated then we are going to replace this router and we are going to send this user to the sign in piece otherwise we will render this component and whenever we are figuring all these things out i'm going to render this loading inside this component or inside this page now if we try to visit this protected then you will see this loading and you will be inside this page now let's try to log in and now because we are logged in let's try to visit that protected you will be inside this protected and here you can see you will have your name and the email but now again if i remove these cookies then you will be inside this logic so that's how you can create your login system with credential using next auth and inside this tutorial we are not covering how you can authenticate your user whenever user wants to visit some private thing inside your back end api and if you want to know all these things then i'm going to post that in the next video so make sure you hit that subscribe button to see all those videos and that's it for today if you think this video was helpful then make sure you hit that little thumbs up it motivates me to create such videos and i'll see you in the next one

Channel: Full Stack Niraj

Views: 119,230

Keywords: nextjs authentication, next js tutorial, nextauth 4, next auth, next auth credentials, next auth tutorial

Id: EFucgPdjeNg

Length: 14min 50sec (890 seconds)

Published: Mon Jul 25 2022