Integrate NextAuth with Next.js 13 | NextAuth Guide (2023)

so now we have discussed about the next thought that what is the next thought why do we need the next thought how it works and where it can be used and now inside the next step now let's see that how to implement the next auth so from this video onwards now let's see that how we can implement the next thought inside the next CS application so the first step is very simple we have the install next auth so we need to install the next stock inside our application so you need to move on into the documentation of the next thought we will be getting started and from there you can see we have the existing project of the next JS and from there we can just install the next dot with this command the npm install and the next auth so you can copy that command over there then you can move on and create a brand new next.js application so I have just created this application over there we don't have anything there if we open the app if you open the page you can say it is generated by the next year so I haven't added anything over there and now let's move on let's install the next dot overdo so we have the npm install and the next auth and the first step is completed now we want to move on to the second step which is register a catch all API Handler endpoint so now we want to register your endpoint we want to add an endpoint inside our application which is a catch-all API Handler endpoint so what does this catch or API Handler means so it means the next auth by default catches all of the incoming requests made to the next stop so it catches all of the incoming requests suppose we send the get request suppose the post request so it handles the incoming request automatically whether it's a get request for whether it's a post request so one function can accept any of the incoming request so that is not as the catch all API Handler so let's move on to the next JS document so let's move on to the next short documentation sorry we have the add API route and from there you can say we have this steps over there so this is showing us for the pages but now we are using the next year starting point two so let's move on let's see about that so you need to click on this guide to move on to the next CS 13.2 guide you can see now we have the app folder so inside the app we have the API then auth then after that we need to create a dynamic slug route and after that we need to get the route.ts which is the incoming route handle of file so we need to create a file inside the app API auth and insert the Dynamics log next stop and from there we want to declare a function of the Handler like we have discussed about this inside this we have the catch-all API Handler endpoint so we want to declare this function over there and then we want to export this function as a get and as a post so this function is a catch all Handler function so let's move on let's Implement that so first we need to import the next stop and from there let's move on we can import the next dot but before implementing the next auth you need to make sure that the next auth only works for the login so it only works for the login and for the sign in you want to create a separate API endpoint and as of now we don't have any database integrated with our application so what we can do so we can just critic constant users file in which we'll be having the user subject from which we can verify the credentials with the next cloth so let's move on so first let's move on inside the app folder we have the API slash we can have the auth and we have the dynamic select route we have the triple dot next dot which is a dynamic select file then we want to create the Handler file which is the route dot TS so here we have this file and after that we need to import the next auth over there and now the next step would be now we want to define the cache all hander function we can have the Handler over there and that is equals to the next auth so it is the next auth over there and there you can see now we want to provide some options as well for the next stock and after that now what do we need to do so we can just export the handle function so we can have the export we can have the Handler as get and we can have the Handler as post so next yes automatically sends those requests and it all so next dot automatically sends those requests and it automatically accepts and handles those requests so we don't need to do and we don't need to make any request to the next Dot and now what do we want to address the next step so inside there we need to provider the options so inside there we need to provide the options so let's move on let's define the options object as well so we can have the options like that auth options so that would be equals to an object and the type for this would be equals to begin up the next auth options so with the next auth options for the type and from there you can say if you again move on to the application if we again move on to the documentation you can see now the options contain some objects like first property that we have is the providers so the providers are the methods for this sign-in that's it so the providers are just the options for the sign in that can be username password which is the credentials that can be GitHub login as well so if you have the GitHub provider then we can have the Google provider as well for the Google login and we can have more like that you can also move on to the provided section over there you can see these are the providers that you can set up with the next PATH so we have the providers over there so as of now we'll be working with the credentials provider so we can move on so we can just search for the credentials over there so here we have the credentials and from there what we need to do so first we need to import the credentials provider like that then we have the credentials so what are the credentials which are required for the login in so as we discussed earlier that the next auth only handles the login Purpose with we don't have the sign in purpose there so what are the credentials that the next thought will handle that can be used in mnd password you can have email password as well then we have the authorize so what is the authorize function so with this authorized function we authenticate the user so if the user's password and the email are correct then we authorize the user and if the user's password or email is incorrect then we return the null so from the authorized function we return the user object and if the user object is false if the credentials are false then we return the null so that is the step for this so let's move on let's cut the credentials provided do so inside the auth options what I'm gonna do so I'm going to import the credentials provider first so we can move on so here we have the credentials provider and what do we need to do as the next step so here we want to provide the providers which is a required property View and it's always an array of the methods of the sign in then we want to provide the credentials provider over there so here we have the credentials and from there what do we want to do so we can have the name over there we can get the unique name to the credentials so we can add the threads like that then we can move on so as we discussed earlier we need to provide the credentials over there so the credentials are the options of the sign in so one more thing the next auth by default automatically generates a login page for you so whatever credentials that you provided it would automatically create the login page for you so you can see now with the credential for the username and the password so now we have the credentials for the username and the password for verifying the user's detail so let's move on so we'll be using the email over there we have the email and email would be an object so the next year is by default generates a file so we can give the label as well so the label we can have the email then we can move on we can send the placeholder as well so placeholder can be weaken at the enter email and now we want to add the password as well so we can copy that we can paste that over there so that should be equals to be another password like that so that should be labeled we can have the password over there then we can have the placeholder that can be we cannot be password like that and now after the credentials now the final thing which is required we want to add the authorize which authenticates the user so let's move on to the authorize and this can be an asynchronous function as well because it responds a promise so we can have the async over there which is async authorize and the credentials have all of the things like you can see you have provided the email and the password and the credentials have the email and the password over there and the request is the actual request object that you can get so after the authorize now we want to authenticate the user so once the user enters your credentials and once the user signs in so then the authorize function gets called and from there if the user's details are correct then we move on and if the user's detail are incorrect then we return the null from the authorize and the authentication would be stopped so that's the process so now let's move on so as we discussed earlier so we don't have the database as of now so we can move on into the application directory we can create a new file we can have the helpers and from the helpers we can have the constants file we have the constants.ts and from there we can just export the user object from there which can contain the email and the password so that can be an area of the objects as well so it's up to you so we can have the cons we can have the users like that so that's an array so each array can contain we can have the ID we can have that should be one and we can move on we can have a name as well name we can have suppose we can have the GMS over there then we can move on we can have the email as well then we can have the password as well so we can the password we're gonna one two three four five six so here we have the password we can create another user object as well we can copy that we can paste and we can move on so we have the second object over there we can have the merry and then we can move on we can have the Mary at the rate test.com we enter the password we can have zero zero zero one one one so we have this password over there so now we have two users so this is our database for now this is a simple database now we can move on and we can import the constants overview so what do we need to do so first inside the authorize you can move on you can verify if the credentials are there or not if the credentials are null then you don't need to move ahead so you can have the property so you can have the validation like if you don't have the credentials so if you don't have the credentials or if you don't have the credentials.email and if you don't have the credentials password then what you can do so you can move on you can just return the null so you can return the null over there that the details are incorrect so we have the null overview so now we have the credentials now we have the email and the password now we can move on and we can verify the details so let's move on so we can have the const we can have the user that should be equals to so we can have the users like that so we have the users inside the helper then we can have the find so we can use the find function from the array and from there we can have the user object like that or we can have the item like that dot we can have the email so that should be equals to the credentials dot email so we can find the user object by this so now we have the user object now what do we need to do as the next step so now we have the user and now we can verify the password of the user so we can move on so we can have the if check like if the user dot password equal equals to we have sorry we have the credentials dot password so if the password is correct then what we can do so we can just return the user property so we can return the whole user object and if it is not correct then we can move on we can return the null over there like this so that's how the authorize function works so you can see now we have the authorized function over there so inside the authorize first we are checking the validation then we are finding the user associated with that email then we are verifying the password then we are returning the user property if everything is fine else we are returning the null overview and now let's move on so here you can see now we don't have any errors inside the file we don't require the request as well so now we have the credentials provider which is working fine and now let's move on and let's just add the auth options here inside the next thought so here we have the auth options and everything should work perfectly fine so with this step now you have added now you have integrated the next thought inside your next GS application and our next thing would be you can see if we just move on into the PPT now we have to use any number of providers now we have used the credentials provider you can also use Google and take GitHub as well so we will see that inside our next couple of videos and now let's move on and let's just Square this sign in option so let's move on so we can move on we can start the application server so let's move on we can start the application on the local development server we can have the npm return div and let's move on inside this and from there we can move on to the localhost 3000 so let's see what happens so it is compiled so now it has compiled the page and it is working fine and now we want to move on to the API auth then we want to move on to the sign in so inside the next dot so inside the next stop there are a couple of pages which are provided to you so you can get all of the pages from it like you can move on to the documentation to find all of that pages so the main page that we have is this sign in page so you can move on so you can have the API slash auth then you can have this sign in so here you have this page over there and you can say it is working fine and as we discussed earlier that the next auth automatically creates the login page so you can see it has created that we have email and the password and then we have the sign in as well with the sign in with credits so the credits is the name of this name you can see you have providing the name if you change the name then it will change here so if you have the sign in with grids and there you can say now you can provide the details over there and now let's move on let's login so you can see we have the user objects over there we have the james.com and we have the password of the one two three four five six so let's move on let's copy that over there we have this over there we can paste that over there now we can move on we can copy the password we can paste that and now let's move on to the inspect panel as well to see if we find something inside the console window so let's move on if you open the network as well if we click on this sign in with grids if we click on the sign in with credits once again we have one two three four five six if we click on this sign in with credits you can see now we are into the home page but why if we move on to the network access once again if we move on to the network and if we again reload the home page so let's see what happens if we reload that you can see it now if you move on to the application tab over there if you move on to the application over there inside the cookies you got something like here you can see inside the cookies you got some data you got this session token you got the csrf token then you got the next dot callback URL so you can see everything seems to be fine now you have the session token over there so it means now the user is logged in if you have the session token it means the user is logged in so now we can move on and if we just try deleting the cookies if we just move on to the application if we just try deleting all of the cookies if we just refresh once again and if we just move on to the API auth sign in once again so let's see now if we provide the incorrect details like we have the james.com but we provide a different password if we just click on the sign in with credits now you can see now we have this sign in failed check the details you provided are correct and if we provide exact details one two three four five six if we click on the sign in with credits then you can see now we have this session token over there and everything seems to be working perfectly fine and there you can see you can move on to the credentials as well you provided these credentials so this CRF so this csrf token was generated and then you can see everything seems to be fine and now you can see now the next auth login has been successful you can see the sign in has been worked so you can see now the sign in has been worked and now let's see that how we can add the secret and the callbacks so we want to add this secret of the next sales you can say inside the terminal you can see you are seeing the warning of the next auth like no secret so this secret is required in the next auth because with the help of this secret it generates the jwp tokens so you can move on you can generate the secret as well so you can have the secret over there and you can generate the secret inside the process dot environment and inside the next of secret so we can have the next thought we can have this secret like that we have the next dot secret and after that you can create an environment file as well you can have dot tnv file and there you can have the next top secret as well so you can move on you can copy the secret over there now we have the secret and that should be any string which is very hard to remember so here I have this secret so you can see now we have the secret which is easy to remember but we can improve that we can have qwer we can use any numbers like that so now we have the next top secret now you can see now we have added that secret as well inside the route file if we move on to the route so here you can see now we have the process dot environment dot next auth secret now we can move on into the page file so you can see now it's a server component and now let's see that how we can get the session details inside the server component over there so let's move on so here you can see now the hell over there now we can move on so we have a function inside the next thought from where we can just get this server session so we can have the cons we can have the data so that should be equals to we can have the get server session so this function is there inside the next dot so we can import that as well so again at the import we can have something that should be equals to we can have the next thought slash we can have the next and the function name that we have is we can have the get server session and after that what do we need to do so if we get server session but inside the get server session because it's a server component so it is not inside the client so we need to provide the authentication options here as well so the options that we have defined over there like we have defined the options here so we need to export these options from here and if we need to use the get server session then we want to provide the options here so we can have the auth option like that over here and then we can move on we can use the update here as well so here we have the await to get the details of the get server session because it's an asynchronous component so we can get the details over there and now we can just check everything so you can see now we have the users and now everything should work fine now we have the authentication secret as well now you can see now we can move on we have the auth options over there we have the secret we have everything with that now let's move on into the page you can see it's a server component now we are getting the details and now let's see that how we can just get the details we can have the Json dot we can have the stringify that should be because the data itself so now let's see what happens so you can see initially we have the null but if we move on to we can have this slash kpi authentic sign in if we provide the email the James at the rate test.com if we put on the password if we just click on sign in with credentials so you can see now we are getting the user details you can see now we are getting the session details of the user with the user which app we have the name which is equals to James with the email as well which is the James at the redtest.com so you can see that's how it works you can see now we are getting the session details of the user you can see the page is also generated over there now getting the session details and everything seems to be working perfectly fine so now we have accessed the session details by the server component so now let's see that how we can do that with the client component so the client component as for the next thought so we need to use a provider so we need to use a provider which can be a context Provider from which we can get the session details so if we move on to the documentation of the next stock so here are the next thoughts so it is mentioned that we need to use the providers to get the session details if we want to use this session inside the client components you can see here with the client component you can see we need to use a session provided component which is available inside the next dots Dash react then we can move on we have this session over there so we already get this session inside that then we can send this session so let's see that how we can implement it here so let's comment it now and now we can move on we can just create a new folder and inside there we need to create a new component that you can have the auth provider like that so you can have the Earth we can add the provider like that dot we can have the TSX so it's a component and after that it's a client component so we need to use the use client at the top so we have the use client over there so as the next step we want to use a session provider so we can move on beginner the cons we can have the auth provider like that so that should be equals to a function and inside there now we want to return something so inside there we want to return the jsx code so we can have the return we can have the session provider so we can use this session provider directly from the next react so with the session provider and this component would automatically get written over there so we get the children and the children we want to define the type as well so we have the children over there and it is of type of we can have the react.node so we have the react dot we can have the react node we can have that we have the react.react now so now we want to render the children that we get from the auth provider and now let's move on so we can just export or provide as a default export so we can run the export default that should be because the auth provider like that so now we have the auth provider and now what do we want to do as the next step so now we can move on into the root layout so here we have the root layout of our application and from there now we want to wrap the whole children the whole children which are being generated by the pages now we want to move on we need to wrap the session provider over there so here we can Define the main type over there so we can have the main after the main we can use the provider and now we want to wrap the whole children with the auth provider like this and now we can move on into the page.tsx and now we can make this component as a client component so we can have the use we can have the client over there so if you want to get the session data inside decline component so we have a hook so we can have the cons we can have something that should be equals to we can have the use session hook so we can have the use we can have this session hook and it should be imported from the next thoughts once again so we can move on so we cannot import we can have something that should be equals to from we can have the next dot slash react and we need to import the use session hook and after that we'll be having the use session over there so here with the use session and something that we want to import we can import the data we can import the status we can use the update as well so let's import the data and let's just log the data over there so we have the data like that and we can stringify the date as well so we can move on so we can have the Json dot we can have the string if I like that so let's see what happens if we save and if we move on the async cover it is not I think we have so we forgot to remove the async over there so we can remove the async if we move on to the application you can see now we have this session details of the user and everything seems to be working perfectly fine and if I just slow down the network if I have this slow 3G then you can say initially the blank page would be generated then it will make a request to the next auth to get the session details you can see now it will make the request to get the session details and that's how it works you can see after a couple of seconds now we'll be seeing the details if we just move on we have a fast 3G then we would be getting the details inside there so now we should be seeing the session over there now we have the session and from there you can say now we have the user property user email and the name then we are seeing the details so it means everything seems to be working fine so now with this step you can see now the last step has also been completed so now we have successfully integrated the next Talk inside our next year's web application and it is working perfectly fine now we have installed the next stock we have registered the endpoint we have used the credentials provider we have the sign in we have the callbacks we have the secret so we don't have the callbacks yet but we can add the callbacks later then we have the secret then we can access it by the server and decline components and everything seems to be working perfectly fine so that's it for this video and inside the next video we will be focusing on integrating this application with the database so we can use the prism the mongodb database to integrate it with the next author so let's wrap up this letter so let's wrap up this lecture

Channel: Indian Coders

Views: 16,928

Keywords: next auth, nextjs auth, next auth app dir, next auth credentials, next auth tutorial, nextjs authentication, next auth credentials provider, next auth google, jwt auth nextjs, nextjs 13 auth, next auth next js 13, next auth credentials jwt, nextjs 13 authentication, next-auth tutorial, nextauth credentials, get session data in next-auth, nextauth.js tutorial, nextauth js, nextauth nextjs 13, next auth setup, next auth guide, next auth course, next auth callback

Id: 57099pou7iE

Length: 23min 30sec (1410 seconds)

Published: Mon Jul 31 2023