Complete Next-auth tutorial, including global authenticated page component.

in this video we will see that how do we do authentication in the next JS application using next auth and in the process we will be seeing that how do we use Google sign in how do we use email and password sign-in how do we protect Pages using the use session hook we would be also doing server side authentication using the git server session and then finally we would be making a wrapper to protect any page with only a single line of code so for the purposes of this video what I've done is this that I've created a very basic Nexus project using the create next package and now the first thing we need to do is to install next dot in our application so we'll simply do npmi next auth so let me clear out the screen and let me simply do npm run dip so that the application is running in the background and let me minimize the terminal and here we have the next application that we see here and this is coming from the index.js page another first thing we need to do is to go to our API folder and we need to create a new folder called auth and inside this auth folder we are going to create a new file called next auth dot JS and it should be like starting with a box bracket that is dot dot next auth and then close the Box bracket ended dot JS simply like this because it would be a catch-all route for any request going to API forward slash auth forward slash any route inside this file we need to import next Dot from next dot so next door from next dot next and finally we need to export the default next dot with some auth options so it would come like this that is here we need to provide in some auth options so firstly we need to provide some providers here that is which all authentication methods we are implementing in our application so as you know that we want to implement Google sign in so we need to provide some kind of a Google provider here so firstly we need to provide a Google provider and for that what I I need to do I need to import Google Provider from this thing here that is from the next Row package that is Google provider from a next auth providers Google and then here we need to provide a Google provider and then again this takes in some options firstly we need to provide in the client ID and we'll fill in that in a moment and then we also need to provide in the client secret so if you already know how to generate a client ID and client secret then you can skip to the next part of the video but I would highly recommend you following along with me because we also need to provide in one option in generating the client ID and client secret and that is the Callback URL so let's go to this thing here that is Google Cloud and we need to create a project here if you already have a project then you are good to go and we simply click on create here and now we need to go to this project here that is the project that I've just created and now we selected this project and now here we are inside this project and now we need to go to the API and services and we need to go to this oauth consent screen first so we need to go to this oauth constant screen and here we simply choose an external here and then we simply click on create so here we need to provide in the app name that would be shown to the user so let's say that tutorial on next auth and here we need to provide in the user support email address so let it let let's keep it like this and for the app logo I would suggest that you do not provide in the app logo because if you provide a new app logo then you need to go with a verification which would take a couple of days so I would highly recommend them not to provide in the app logo and then you can leave on each of the Fields empty and then you simply need to provide in your developer contact information because that is the required field here and make sure you provide in your own email address here let me click on Save and continue and then for the Scopes we can simply choose email profile and open ID and then we can simply click on update here and now we can simply click on Save and continue and then we can add in some test users so that we can see how Google sign-in works so let me add in a couple of test users here let's simply click on ADD and now let's click on Save and continue and now there's a summary and you'll simply need to go to back to dashboard and now our oauth consent screen is ready and now we need to go to the credentials tab here and here we need to click on create credentials to create an oauth client ID here we choose the application type to be web application and the name can be anything here because it is not client facing and let me simply call it next uh tutorial and here make sure that you enter the authorized redirect Uris here so here we need to add in the URI that is HTTP forward slash forward slash localhost and if you go to the next author options here or this Google options here inside the providers we see that they will say that for production we need to provide in the authorized redirect URL like this that is your domain forward slash API auth callback Google and for the localhost development that is currently we are doing that so we can simply copy this URL from here and we can go back to our this page here that is this client ID and we can simply paste in the redirect URI here and now we simply need to click on create NF client is created and now we have the client ID and client secret so for the purposes of this video I am simply hard coding the client ID and client Secret in my Google provider here but definitely this should come from the environment variable so let me copy it let me paste it here and now that's all what you need to do to create your Google provider and now I would highly recommend that you pass in a secret here though it is not required for development but for production it is always necessary to provide in your own secret because this secret is used to Hash your tokens sign and encrypt cookies and generate cryptographic keys so I would highly recommend you doing so so to generate a signing secret or to generate a seek simple secret what you can do you can simply use this command that is openssl brand base64 so let me open my terminal here and let me stop the application and let me clear out and let me paste in this command here and we can simply copy in this secret that is the secret and we can simply paste it here and again this secret should be coming in from our environment variable but I'm hard coding it here so let me simply do npm run Dev and now what we can do we we need to go to our app.js file and here we need to import session Provider from next auth react so here we'll say import something from next dot react and then we can simply extract out the session Provider from here and here what we can do we can wrap our component inside the session provider so session provider like this and we can grab this component like this and this session provider takes in one drop and that is the session prop and this session prop we can extract it from the page props so we can simply say session comma dot dot page props simply like this so here we can simply pass in this session here because this session would be utilized by the use session hook which we are going to do in a moment so now what we need to do we need to go to our index page and here we need to Simply detect the status whether the user is authenticated or not and so for that we are going to use the use session Hook from next auth react package so we'll simply say use session and it is imported from this next dots react and this provides us with an object containing two things that is the data containing the session and then the status whether the status or whether the session has been fetched or not or whether the session is in loading state so here we can simply spit out the status so let me spit it out inside in H3 that is status would be this status so if we save this application we see that currently we see that our status is unauthenticated So currently we are unauthenticated now to go to the default page that is provided by next door to sign into the users is forward slash API forward slash auth forward slash sign in so what we can do we can create a link here so let me import link from next link and then we can simply say go to sign in page and here we need to pass in the href so each riff would be forward slash API forward slash auth forward slash sign in so if we save this we can simply click on this button here that is go to sign in page to go to the default sign in page and this is the default UI provided in by next auth though this page can be customized but that would be a part of next video and now if I click on sign in with Google so let me click on sign in with Google so we see that we are having this thing here that is tutorial the next row that is the oauth consent screen title of the application so let me select one of my accounts here so now once this is done we see that now we get the status as authenticated here so now let's see that what is contained inside the current user object or what is consent is contained inside this data object here so what we can do we can simply do a free tags here to Simply json.stringify the data here so json.stringify data comma null comma two so let me save this and now we see here that we are getting this thing here that is that is this is the session object here that is this data here and it contains in the user the name the email address of the user and the image of the user so if you go to this user image here so if we go to this user image we see that this is the default Google image or the profile image provided by Google so this is what it is and now let's see that instead of going to the login page that is instead of going to the sign in page what we can do to Simply uh directly log in the users with the Google account in case you want that so before doing so let me click up create a button here just to make sure that the user signs out so sign out button sign out and here we have an on click event on this button and here we are simply going to call in sign out and again this sign out is imported from this next auth react so if we save this we have this button here somewhere so we have this button here so we can click here sign out and we see that again we are unauthenticated and the data is not because there is no session inside the session provider so let's see that how do we directly sign into Google without going into the sign in page so that is pretty simple to do we again click create a new button here button here and we can simply click say sign in with Google and here instead of sign out what we are going to do we are going to use Arrow functions here and we are going to use in a function provided by next auth react that is sign in and here we can provide in the name of the provider so as we all know that next JS or next auth has a couple of providers more than anyone has so we have we are only using Google so we can simply provide in the Google provider here that is Google simply like this so if we save this and if we click on this button here that is the sign in with Google and let me say that we want to display this sign out button only when this user is signed in so what we can do we can simply say if if we have data then only we want to show this sign out button so we have this thing here and again for this sign in with Google button what we can do we can say if there is no data then we want to show this uh sign in with Google button so now we can click on sign in with Google and automatically we are related to this Google page so we can click here and we would be going back to this this page here that is the index page here so we have this thing here so this is how easy it was to implement the Google provider inside your application so now let me show you one more thing and that is how to use the credentials provider that is the email and password provider so let's say that we do not have data here so that is we do not have data here and then we simply want to display a sign in form so sign in form and this component we are going to create in a moment so let me simply go here and here I am going to directly create in this component here that is sign in form like this and inside this sign in form let me return in a form here that is return form and we do not need an action here because you are in react and here inside this form we want to have an input field that would be of type of text and let's simply give it a value of email and on change we want to Simply change the state variable so let me create in the state variables first so use a state from react and here the initial value would be empty for email and then we have this thing here that is email comma set email equal to this and the similar thing would be for the password here so password would be set password and to begin with the password and email would be an empty string so now here what we can do we can simply say on change we can we have the event then we can simply say set email would be e dot Target dot value simply like this and now in a similar way we want to have an input field for the password here so this would be like password and this would be like set password so set password and then we want to have a button here uh with a type of submit submit and here we can simply say login so that's all what our form is all about so we can put in some break statements in between so let me save it and let me click on sign notes just to see that our sign out is form a sign in form is rendered correctly so we see that we have this form here so now what we need to do we need to handle the email and password in our next author next author provider here somehow so what we need to do we need to import a credentials Provider from this package here that is from next talk providers so import credential provider so credential provider from next auth providers simply like this or we can simply say credentials like this and this would be something like this and now inside this providers after the Google provider we can pass in our own credentials provider so we can simply say credential provider and here it takes in some options here so the name of this provider can be anything as in what you like I am simply going to call it credentials though you can have multiple credentials provider that is you can sign in with the email and OTP and here we are signing in with email and password so therefore I am simply calling it credentials here but make sure that if you have two credentials provider then these name should be different in each of the credential providers but for now to make it simple let's simply call it credentials here and then we need to pass in some credentials here that is the type of credentials we want our default next auth form to show that is if we go to this page here that is sign in page we want the default form to show here as well so here what we can do we can simply pass an email that is we want to create an input field on this sign in page although we already have the input field on our index page but we also want to create a an input field on the sign in page so therefore I am going to provide in this credentials object here so email label would be email and it should be in codes and then the type would be email simply like this and then we also want to have a second input field on the sign in page and that would be password and again the label would be password and the type would be password simply like this and now inside this credential provider let me save it first and let me reload the page so we see that we have this thing here that is this thing here so we have this email and password so if I change it to something else that is enter email so if you save this and if you reload the page we see that this label is changing here so this is what is meant by this label here nothing fancy in here so now what we need to do in Google provider we already have the way to authorize the Callback by providing in the authorized redirect URI but in the credential provider we need to handle the authorization ourselves that is we need to make sure that whatever email is entered here and password entered here is X does exist somewhere inside our database and we validate that password so for that what we need to do we need to implement an authorize function here that is async function because it would be an async function all the way so we would say authorize and here we have the credentials and then we also have an access to the request object and inside this authorized callback firstly let me simply console log the credentials here so let me save it and let me open the terminal here so once I click on this sign in with credentials watch out in the console here so let me save it here so let me sign in with credentials so we see that those the sign in field but we see that we are spitted out with this credentials object here that is the CSS csrf token the email and the password so now what we can do we can use this email and password somehow or we can extract this email and password from this credentials it's called something equal to credentials and we can get the email and we can get the password from credentials and now somehow we need to validate the user so validate the user with email and password what I'm not doing here in this tutorial is to create a user but somehow you would use this email and this password to validate this email and password from your database somehow if the validation succeeds not the authentication but if the validation succeeds for these credentials then you can simply return in the user object in a format which I am going to tell you in a moment so let's say once we have this email and password we are returned with this kind of a user object here that is let me copy and paste the user object so somehow so let's say finally we get back this kind of a user here from our database that has a name of this thing here email of this thing here and this email should be the email coming in from the credentials of course but this is a demo user object here and finally what you need to do you need to Simply return this user object from this authorized callback here or authorize function here so if I save this and if I simply sign in with credentials so Watch What Happens so I am signed in and if I go back here and let me let this is overflowing here so what I'll do I'll simply remove some of the styles from this index.js file so simply let me remove this style sort main thing from here so now we see that we have this kind of a user object here that is name Jane do gmail.com and images this image and if we have a look at this next door thingy here so this is the exact user that we return from our authorized callback here or this authorize function here and now let's see that if the user is not validated then what you need to do to throw an error so first let me simply sign out from this thing here and let me go to the sign in page and now let's say that we do not have a user here and we found in a false user here that is this user does not exit so let's say const is validated is validation failed somehow equal to true that is the validation field that is this email and password does not exist in your database so we have this thing here that is if is validation field then what we can do we can simply throw the error here that is throw new error and here we can simply say email password invalid something like this so that's all what we need to do so now if we click on sign in with credentials we would be simply going through this through thing here that is throw new error so what I have done here so let me save this and now if I click on sign in with credentials we see that we are getting this error here and if you want to have a look at what went wrong we are simply redirected to this API auth error page and we can see this error here at the very top here let us email and password invalid so this is what you can do to handle the error by yourself so now let me simply comment it out to Simply return in the user here so let's save this and let's go back and let's try to sign in with credentials so we are on this page here so now let me show you one more thing that is how do we create our own sign-in page because in the index.js file we created this sign in form and we wanted to handle the sign in forms uh like on our own page so let me click on sign out so we have this form on our own sign in page so you want to handle the sign in form so what we can do we can go here and here we can have this function here that is function handle sign in of which gets triggered when the form is submitted so we can say on submit we have this handle sign in thing here and the first thing we need to do we need to prevent the default Behavior so we can say e dot prevent default and now what we can do we can again use and use this sign in function provided by next dot react so we can say so sign in here we are going to use the credential provider credentials and then we need to pass in something here and that would be the email and password simply like this so this email and password would be passed into your next auth authorize thing here and the credentials will be extracted from that email and password thing here and make sure that this uh this thing here that is email password matches the name or the values of these objects here that is the keys of these objects that is email and password so if I save this and if I put in this let me open the terminal once again so if I put in an email here so let me this time floating J into so J Indo gmail.com password one two three four five six so let me click on login so we see that we have this thing here that is we have passed with this email and password and we have this callback URL also that is this callback URL if the user sign signs in and you want to redirect him to a different page so let's see we create a new page inside the pages folder that is test dot JS that is this is a new test page so RFC to create in a functional component so test page simply like this and what if the when the user signs in you want to redirect him to the test page so what we can do we can go to this index.js file and inside this sign in thing here we can also provide in the uh in the this thing here that is the Callback URL so the Callback URL would be forward slash test simply like this so if I save this and if I sign out and if I sign in with this uh Jane at gmail.com because everything would be validated because we are not doing validation if I click on login we are redirected back to this test page here as you can see here so now let's see one more thing that is how do we get this session or the current signed in user inside get server side props so that is pretty simple to do so what we need to do we need to export an async function here so export async function get server side drops so so site props and this has an object a context here and then we need to return some props here that is props would be something so for now it it be a Let It Be An Empty object and for the Simplicity purposes what I'm going to do I am simply providing an NJ stock here that is to provide in the type of context here and this would be get server side props context here that is the type of this context variable so it would be easier for me to work with this context object here so here what we need to do we need to import something from this thing here that is from Next Top so import something from next auth react and here we need to import get server session here so get session and get server site session and not from react but instead though we could have used this thing here that is get session get a session but this is like deprecated we should not be using get session but instead we should be using get server session from this next dot next package so instead of get session we should be using get server session here and here inside This Server session what we can do we can say cons session would be equal to await get server session and this takes in some options here or some parameters first would be the request response and auth options so context dot request context Dot response and then we need to pass in the auth options Here and Now from where do we get these auth options so these auth options are the same auth options that we provided here inside this default export that is next auth so what we can do we can create another variable here that is const auth options would be equal to this whole thing so let me cut it out from here and let me paste it here that is these auth options here and we can pass in the auth options here simply like this and then what we can do we can simply export this as a constant here that is export cost auth options and now inside the test.js file we can import these auth options so that is auth options from this file that is our own file here what we can do we can simply check whether the user is or we have the session or not so we can check if session or if there is no session then we want to redirect the user to the login page so we can simply return and here we can simply say redirect to API auth sign in and we can say permanent to be false simply like this and this would be the case if there is no session otherwise what we can do we can simply return in the user object from this session as a prop so we can simply say session dot user because if we have a session we also have a user so then we can get this user as a prop inside this test page so we can get in the user here and then what we can do we can simply spit it out the Json object or the json.stringify of this user object here user command comma two simply like this so if we save this and if we try to rewrote the page we see that we have this user object here but now let's see that we somehow log out from the application so if we simply sign out from the application and we go to the test page here manually like this we see that all right so I'm getting an error here and that is because I have not redirected it properly so instead here what we need to do we need to do it like this that is the redirect should be an object here and the destination should be so should be this thing here so let me save this and now we see that we are redirected back to this login page or otherwise we could have already also rewrite it back to our own sign-in page so if I save this and if I reload the page let me go to the test page here manually so forward slash test we see that we are to this login page so let me simply click on login by entering in gene at gmail.com one two three four five six and let me click on login we are on this test page here so now this is all good but there is one catch here so wherever you need to use the get server session you need to also always provide in the auth options so what you can do you can go to your next.js file and instead of exporting this as a constant here let it be like this that is do not export this options but instead create your own function here so export first create your own server session so get server auth session like this is a handy function here and this should take in context and this should return something and this should simply return in the get server session from next dot that is next get server session and here you can pass in the context dot request comma context dot response and then auth options like this and now you can use this get server auth session inside your test.js file so instead of using get server session you can simply pass use this get server or session and here you can simply pass in the context here so you don't have to import the auth options from this file so let's save this and if I go to this test page that is forward slash test we see we are not authenticated so let me pass in Jane at gmail.com and let me minimize the terminal one two three login and we see that this is all working properly so now let's handle the API route that is how to protect this API route and it is pretty simple to secure this API route that is currently we simply want to protect this hello.js route and we see that we have our access to the request and response object and in the similar way if we go to this odd thing here next auth we see that inside this get server session thing we have the request we have the response and we have the auth options so instead of passing in the context what we can do we can simply pass in the request and response like this so that we can also use this get server auth session inside an API route and we can save this and inside this test.js file we can pass in the context dot request and context Dot context dot response like this we are good to go for the test page and now in a similar way we can go to this API route and here we can check that is const session equal to 08 and this function can be an async function so export default async function Handler await get server auth session and here we can pass in the request and response simply like this so if we have the session and this should be session and not sessions or if you do not have the session we can simply throw the error so that is through new error and we can simply say unauthorized otherwise we can simply uh respond with this message here so let's see if this file and let me try going to this uh to this URL that is localhost Port 8000 not 8000 but 3000 forward slash API forward slash hello so since we are signed in we are seeing this name here that is this response here but let's say we logged out from the application so let me simply sign out from the application and if I now go to this route here we see that we are getting this error message here that is server error unauthorized or otherwise you can instead of throwing in the error you can simply say race dot status would be 403 or 401 maybe and then we can simply Json the error here that is message would be unauthorized so unauthorized authorized so let's save this and let's go to this route and we see that we are getting this message here unauthorized this is how easy it is to implement authentication in an API route and now let me show you one more thing that is Let's see we are not using it server side probes we are only doing client-side thing here that is we want to validate the user first that is by use by using the use session hook that is called something equal to this thing so data and we can extract in the user from here and then we have the status so let's say we want to check whether the user is authenticated or not so we need to do this on every page so let's go to this test page first here so we have this test page here so we have this thing here and what we can do instead of extracting the data from here what we can do we can simply check if status equal equal to loading then we can simply return in H3 here that says loading that is the session is being fetched otherwise if status equal equal to unauthenticated then we can simply return H3 again that simply shows the status like this otherwise we have the user object that we can get from the data so we can say data dot user simply like this so currently we see that we are unauthenticated but now for each and every page we need to do all this stuff that is we need to check the status we need to check whether the start is authenticated or not but what if we have something very one liner here that is we can simply write something like this that is test page dot auth equal to true that is this speech requires authentication so that is pretty easy to do inside next.js so what we can do we can go to our app.js file and here what I want to do I want to Simply check the auth thing here that is firstly let me simply login this thing here that is console.log component.auth thank you so if I save it and if I open my terminal here and if I go scroll at the very bottom so if I reload the page we see that we are getting this true here which means that we are able to pass in this auth property here for this component that is for this test page component so what we can do we can create a wrapper element for this component so let's say we create this function that is auth simply like this and here we can simply return in children so whatever children is passed here so we can simply return out those children so or we can simply render out the children so what we can do here we can simply check if the component has that odd property to be true that is if component that auth then what we need to do we need to Simply spit out the children inside this auth element jsx element and here we can simply say simply pass in this component here like this otherwise we can again simply pass in the component without the authentication thing that is whatever page has this property auth dot auth to be true would be wrapped inside this jsx element that is this function a functional component here that is this auth component otherwise we are simply spreading out it directly so if I save this we see that we have this thing here so to verify this whether this auth is working or not since this test page does does have this auth to be true so what I can do I can go to my app.js file and let me put in a div here like this and here we can simply say authenticated component or authenticated page simply like this so if I save this we see that we are getting this thing here but this is not what we want to do we want to check whether the user is authenticated or not so for that what I am going to do I am simply going to use router from next router so router equal to use router simply like this and then we also need to have the session here so use session from the next auth package equal to use session and we have this use router from next router and your session from next dots react and let me minimize into terminal and here what we have we have the data and we have the status so firstly we need to check whether we have a user or not so we can say const is user would be equal to not naught session dot user because if we have the user it would be it would be inside this session here and this session is data here so let me simply rename this to session simply like this and then we need to check in the loading state that is whether the session is Switched or not so we can simply say const loading equal to status equal equal to loading and it should be like this so this can be either true or this can be either false if the status is loading then this would be like true otherwise it would be false and now what we need to do we need to use the user Vector so whenever the loading status and is user changes we need to have this effect run so we can say use effects something like this and then on which dependencies we want to run this use effect we want to run this use effect on is user and this loading state and now inside this use effect hook what we need to check let me format it so firstly we will check that if we are not in loading state which means that either we are authenticated or unauthenticated and if there is no user if not is user that is we do not have a user here then we simply need to push to the login page so router dot push so either you can provide an API auth sign in like this or in our case we can simply provide in the index page because that is also our sign-in page but for now let me simply put it leave it like this so that's all what you need to do there and now if we check here that is if we are loading here that is if we are in loading State we can simply return uh in H3 here we can simply display loading and if we are not loading and we have a user that is if user then we can simply return the children here without the without the diff tags like this otherwise we simply return null from here so that's all what you need to do here so if I save this application and if I reload the page we see that we are redirected back to this login page so if I sign in with credentials here we can go here and now if I go to the test page here we see that since we are authenticated we can see this data here and this is immediately faced because in this case that is in this case this use session that is this data would always contain this user here so even if I remove this all all this stuff this data dot user would never be null so if I save this and if I reload the page we see that we always have the data inside this user thing here because this session is immediately fetched and in a similar way if I create one more page here that is new file another protected page so or let me call it another page Dot JS let me create in a functional component so another page so like this and here we need to Simply say another page dot auth would be equal to True which means that this page another page would be only loaded if the other if the user is authenticated so if I go to this auth page another page we see that we are to this another page and if I simply go back to our index page and if I simply click on sign out and we try to go to that another page we would be related back to the sign in page so this is how easy it was to all the authentication here and now one last thing that is how to implement database because currently nothing is like stored inside anywhere in your application so what we can do we can use one of the couple of database adapters that we can use inside our next JS application with different databases so we are going to use the Prisma database here so once you go to the documentation here and click on adapters we have this these kind of adapters here but we are going to use this Prisma database so let's click on Prisma and we need to install a couple of dependencies here so let me copy in the dependencies from here and you can directly copy the dependencies from here so let me copy it and let me go back to the application let me stop the application and let me paste in the dependencies and let me simply remove this next raw thing from here because that is already what we have installed so let me install in the client and the Prisma adapter and we also need to install this Prisma as Dev so let me save this and let me paste it here in a moment and we are going to use Prisma over the one of the sqlite databases I suppose because that is the easiest way to go so let's go back the packages have been installed so let me paste in the database that is install Prisma as Dev and now what we need to do we need to create an index file or the schema inside the Prisma folder so let me create this file that is inside the Prisma folder called schema.prisma and what I can do I can simply click on new file and I can simply paste in the file name here and that creates the schema.prisma file and let me minimize the terminal for now so what I can do I can simply copy in this all the code from this file here and I would be coming into the contents of that in a moment firstly let me simply do that here and since we are on Prisma 3x or higher we do not need this referential actions so let me remove that from here and for the shadow database URL we are not going to use that as well let's see we are going to use the sqlite database so sqlite simply like this and we are going to remove this DB text from everywhere because we are using uh sql8 and like this because that is not supported here DB text is not supported inside this sqlite database and the database URL can be coming from this EnV file so let me create in an EnV file so dot env.local so it's local like this and let me paste in the database URL and here would be equal to file colon dot forward slash Dev dot DB simply like this so let me save this again with file and now what I'll do I'll simply use this command here that is NP expressed by migrate Dev to create the tables that are these tables representative of this account session user and verification token so let me do that all right so if you get this issue that is Prisma schema validation field then what you need to do you need to copy the contents of this env.local file into n dot EnV file uh not in the dot local file because Prisma finds it from the dot EnV file so now we have this and we can clear out the local local file from here so let me remove it and let me open a terminal once again and here what we can do we can again click clear out so clear npx program migrated and I guess that yep so the environment variables are loaded so let's call it the init migration and we have this dev.db file here so now our database is in sync so let me clear out and now typically whenever you create a present whenever you use Prisma inside your application you need to create a Prisma client somehow so what you can do you can create a new folder here or a new file here inside the lip forward slash Prisma client dot JS like this and here what we need to do we need to import something from at Prisma client and that would be like Prisma client like this so now instead of me writing all the code what I can do I can go to this URL here that is the first Mario docs and this has the best practice practices for instantiating a Prisma client in an XTS project so what you can do we can simply copy this Prisma client thing from here so that is copy this thing from here and let me go paste it here inside this file so let me paste it here and now we have this thing here that is global as unknown so we can simply remove this thing from here because that is a typescript thing I suppose so if I save this we have this Prisma client ready and now what we can do we can go to our next order.js file and here what we can do we can import something from at next word Prisma adapter and this would be Prisma adapter and we can say const adapter equal to Prisma adapter and here we can pass in the Prisma client from our fresma client package that is from our Prisma client that we created that is this file though we could have directly instantiated Prisma inside the next author.js file but that is not the recommended way and here just before the provider we can pass in our own adapter and that adapter would be this adapter that we just created so that's all what we need to do so now if I do npm run div we have something here and now let me also open one more terminal here and let me simply do npx Prisma Studio just to open the studio here and now we see that we have these tables here that is account currently empty and if you open the user here we again we see that this is empty here so now we what we can do we can go back to our application and let's see that let's say that we sign in with this Google thing here so once we sign in with Google we choose our account here one of the accounts we see that we are logged in here and if you have a look at at our database here so currently we see that we have this one user here and this is persisted inside our database and we have one account related to that user so now you might be wondering that what is user and then what is account so that is pretty simple to understand so now what we can do we can go to the screamer.prised much file and let me let us try to understand that what this means here so basically if you use database sessions then those sessions would be stored inside the session model and you do not need to do anything about this session just you can leave it as it is again for the verification token you can leave it as it is because it is for email only authentication because we have email and password authentication but there is one more thing that is Magic link magic links sent to your email and this is used for that so you can again ignore that stuff what matters to you is this account thing here and this user thing here a user can have several accounts that is one user can be signed in over the Google account and the same user can use his credentials that is his email and password to sign in to the same account so the user can have multiple accounts but an account can belong to a singer user so that's all what the linking between a user and account is if you are building your own application you can simply extend this user model as per your convenience or as per your requirements but these fields should be present here because it is used by the Prisma adapter to work with these fields here so guys that's all about this video I hope that that's a pretty long video and if you have liked the video do hit the like button and if you haven't subscribed to the channel do subscribe to our channel so thank you bye Twitter take care and have a good day

Channel: Mafia Codes

Views: 7,042

Keywords: mafiacodes, nextjs authentication, protecting pages in nextjs, next auth google, next auth callbacks, next auth tutorial, next auth credentials provider, email password sign in, next auth custom login page, next auth google provider, next js authentication, nextjs auth

Id: 4BJMq1yxCOs

Length: 49min 44sec (2984 seconds)

Published: Mon Mar 27 2023