So now it's time for us to transfer these values which we've successfully put on the server side now and add them to our database. In order to do that we first have to set up Prisma which will be our ORM for this video. So let's go inside of Prisma and we can shut down the app. Sorry, let's go inside of the terminal and we can shut down the app. And first let's install Prisma.
So we have to install this inside of dev dependencies. So npm install-D Prisma, like this. After Prisma has installed, go ahead and install npm install at Prisma slash client like this and after this has installed we're gonna go ahead and we're gonna create our Prisma util so let's go ahead and do the following So make sure that you have both of this installed, the Prisma client in your package.json and Prisma in your dev dependencies here. Now let's go inside of the lib folder and create a new file called db.cs like this. And inside of here let's go ahead and import Prisma Client from Prisma slash client.
Let's go ahead and declare, actually let's not do this immediately because I want to show you why we are doing this. So first this is what we're gonna do. Export constant database to be global this dot prisma or new prisma client like this and you can see that we have this little error here we're gonna fix that with what I started writing here but I decided we're gonna do it later so I can explain why we're doing that And now let's write an if clause. If process.environment node environment is not production in that case let's go ahead and assign global this.prisma to be the database variable like this in one line. So we have to add types for Prisma in global this now.
So let's go ahead and do that. We can fix that by adding declare global var Prisma to be a type of Prisma client or undefined like this. And you can see that now we have no errors in global this dot Prisma and you can see how we have the type for it. So why are we doing this? Well it's because of Next.js hot reload.
So as you can see we could have easily just done this. So imagine I didn't write any of this and just wrote export const db to be new Prisma client. This is what's gonna happen in production. But in development mode we need a different thing. We need this to be working and the reason is because of Next.js hot reload.
Whenever we save a file Next.js will run a hot reload and what that would do is initialize a new Prisma client every time and then you would get some warnings in your terminal that you have too many active Prisma clients. So what we do is we add an if clause. If we are not in production, in that case, we're going to store the database variable inside of global this.prisma. And then when Hot Reload fires on the next iteration, it will check if it has Prisma already initialized in global this and then it's gonna use that. Otherwise, if we are running it for the first time, it's gonna just initialize a single Prisma client.
The reason we store it in global this is because global is not affected by hot reload. Like that. Great, so what I wanna do now is the following. I want to go ahead and I want to go inside of gitignore right here and go ahead and find .environment.local and below that just add .environment or just add it anywhere in this file. So just add pure dot environment file here.
Like that. Great. And what I'm going to do next is I'm going to go back inside of my terminal and I'm going to run npx prisma in it like this. There we go. And you should get this success message kind of.
And what that's gonna do is it's gonna create the Prisma file and also inside of your .environment file, you can see that it's going to fill it with a fake database URL. So you know, this is where we have to put our database URL. And we also have the Prisma folder where we have a schema Prisma set up for us. Like that. So make sure you have all of those files.
What we have to do next is we have to obtain an actual database URL. For that we're going to be using neon.tech which is a completely free Postgres database and you don't need a credit card for it. It's completely free no need to do anything here. So this is what we're gonna do. Let's go inside of neon.tech like this and go ahead and find the login button.
Once you're logged in you're gonna be prompted with a similar query like this to name your project. So let's call this AlphMasterclass or I'm gonna call it AlphTutorial like that. And database name can be exactly the same, it doesn't really matter. You can choose the region closest to you and click create a project here. And in here you're gonna get your connection string or you can go ahead and select Prisma here to see exactly what you have to put inside of schema prisma and what to put inside of the dot environment file.
So let's first do the schema.prisma. So I'm going to go ahead and copy this and I'm going to go inside of my prisma schema.prisma, select everything and paste it here And there we go. So we just need a data source DB with PostgreSQL and database URL and a direct URL. And now we have to add this inside of our environment file. So you can click on the little eye icon so it's going to show these keys or you can directly click copy here.
Like that. Then go inside of your .environment file and replace this database URL which what you've just copied and there we go we now have a database URL and a direct URL connecting to neon.tech using PostgreSQL or Postgres however you want to call it. Great. So now that we have this, you can go ahead and close this and let's go ahead and add a model here. So I'm going to write model user, for example, and give it an ID.
And inside of here, let's make it a type of string. Let's make it ID and a default value of C U I D like that. And I'm also gonna give it the name of string, for example. And then what you can do is go inside of the terminal here. So just make sure you save this model user inside of schema.prisma and then you can run npx prisma generate.
So what this is going to do... Oh, you don't have any generators defined so nothing will be generated. My apologies, I think that I forgot a generator. Yes, because I've just copied this for Prisma. Right, so do this.
Add a generator client provider to be Prisma client JS like this. So we also need this inside of our schema Prisma. My apologies, I removed that once I pasted from neon this code. Let's try this again. So make sure you have the generator client here and let's try again npx prisma generate and there we go.
So now this user model has been successfully generated and what we can do now is using this lib folder database, we can access the user model. For example, if I go inside of app layout here, So just for fun, I'm gonna add a user to BO8. I'm gonna turn this into an asynchronous function. I'm going to import the database from add-lib-database. And then you can see the auto-completion of user here.
So if you're getting an error here, that means that you didn't do npx prisma generate successfully. So make sure that you don't get any errors right here after you run npx prisma generate. So that's what that command does. So make sure you don't have any errors and that you have the autocomplete for find many or anything like that. So I'm going to revert this back to how it was and I'm going to remove this import from the database in my layout so just as it was before.
What we have to do now is we have to push our collections right here in the Neon database because if you click on the databases here, well basically you can't find anything, right? So let's go ahead and do this now. Let's go inside of our terminal again and just like we've run npx prisma generate we are now going to run npx prisma database push like this. Perhaps this already does NPX Prisma generate for us. I'm not exactly sure, but what it should definitely do is synchronize your Prisma schema.
If you get an error here that it could not reach this database, that can happen sometimes. So just go ahead and run it again. And if you ever see an error that your database could not be reached just try whatever command you're doing or just restart your project again. Alright, and I think that now we should be able to find this schema. So I'm going to refresh here and try and find this.
I think you can click on tables and there we go. We have a user table, of course, it's completely empty but we have the actual collection with the id and the name inside of it. Great! So we've successfully connected to PostgreSQL or Postgres using Prisma. Great.
So what we have to do now is we have to create a proper user model inside of our schema Prisma. And we can find the exact model we need from NextAuth themselves. So our next step is to go to the NextAuth documentation page. Now here's what you have to keep in mind. There are two NextAuth documentation pages.
One is called Auth.js which I will put the link in the description for which is the correct documentation. And there is an old documentation for NextAuth.js and you can see that it's an old documentation because here in the navbar you're gonna have a little banner which says that we are looking at NextAuth version 4. For the new documentation go to authjs.dev. So don't be on the one which says NextAuth, be on the one which says AuthJS and you will also have a banner here but it's just going to give you, well, you're basically on the correct page, right? So what I wanna do here is I wanna kind of explore this and I wanna find my Prisma database adapter and in there I can find my schema.
So let's see if that is perhaps in the getting started here and I'm gonna click, let me zoom in. So getting started, I'm gonna click on database providers, adapters, sorry. And in here we have a lot of adapters and here is Prisma so go ahead and select Prisma and here's what we have to add We have to add this Prisma adapter. So we already have Prisma client, we already have Prisma. So let's go ahead and add the Auth Prisma adapter because we're going to need it.
Not immediately but later. So let's just already ensure that we have it. So go ahead and run npm install at auth prisma adapter like this so just make sure you have this installed because we're gonna need it later when we set up next auth properly. There we go npm install auth prisma adapter and confirm in your package json that you have in your dependencies auth prisma adapter. Like that.
Great. So let's see what else we have to do. So of course we have the actual instructions for the setup but I'm going to skip this for now and I'm gonna go immediately and find this create the Prisma schema from scratch. So make sure you are on this page right here or you can pause the video and copy from my screen if that's easier. So the first thing I want to do is I want to find the user model and I want to copy it and paste it inside of my Prisma schema.
So we're not going to be using the exact model that they are. We're gonna modify it a little bit. But this is a good starting point. So let's replace this user here that we have with whatever they provided us in this documentation. So you should have the id, the name which is optional, email which is optional and unique, email verified which is an optional date time, image which is an optional string and two relations one for the account and one for the session.
And the one thing you can immediately remove is the sessions. We're not going to use that. We're not going to use the database session for this one. So now you want to go ahead and find the model account inside of this documentation and copy the model account like this. And what I want to do is paste it below the model user like that.
And there we go. Now this error should go away and let's take a look at this model account. So you should have the ID, the user id which works as a relation with the user that's why we no longer have these errors here you should have the type, the provider, the provider account id, refresh token, access token, expire zat, token type, scope, id token and session state and a unique rule for the combination of provider and provider account ID. And you can go ahead and save this file. And here's the thing, if you take a look further inside of this, you can see that we also have the session, you can see that we also have the verification token but we're not going to be using those models.
We're going to implement our own verification token because this can be kind of misleading because you might think that this can be used for credentials provider but it's actually intended to be used with the email provider, which is the direct or magic login link, which I'm pretty sure you've probably seen somewhere, but honestly, it's very easy to implement and I don't see it being used that much across the internet. Perhaps I could be wrong. And I just don't think it makes such an interesting tutorial to teach you how to do that. Instead, I'm teaching you how to do it with credential providers. So you can actually register with your name, email and password.
And then we're going to create our own model verification token which is going to confirm that user's email when they register. Great! So we've set up that and now what we have to do is we have to push that inside of our database. So that's what we should have next. So make sure that your model account exists and it's exactly the same as mine is and make sure that your user exists and it only has a relation with the accounts like this and then go back inside of your terminal here and run npx prisma generate like this so that's going to add it to your node modules and to your database util and then npx prisma database push so this is gonna push it to neon.tech so let's see if this succeeds or not I believe everything should be just fine and yeah it's telling us that we have a unique constraint on the email and it's because we already pushed that old user.
So if you get this warning, you can just ignore them by pressing the Y button like this. So just ignore it. It doesn't matter if it resets the database because we don't have any records after all. There we go and you should get a message your database is now in sync with your Prisma schema like that and let's try it out now. So I'm going to refresh this tables here on Neon and there we go and I have my account right here and I have my user right here.
Great! So we are now finally ready to create our register form but I believe something here is missing. You probably noticed that we don't have a password field. That's because NextOut by default does not exactly recommend using the credentials provider but it has full support for credentials provider if that's something that you want. They have their own reasons why they don't do credential providers.
I personally don't like them too much as well, but I do understand that it's something that each developer needs to know how to implement. So that's why I'm doing this tutorial. So in the user model, let's go ahead and after the image, let's add a password which is going to be an optional string as well. So why optional? Well it's going to be optional because if we use OAuth providers like Google and GitHub, well in that case we don't have a password.
So we need to allow the adapter which we will later connect to create this user model without requiring a password. So every time you add something new to your schema prisma like we just did with the password field, you have to go back inside of your terminal here and do npx prisma generate and after that you have to run npx prisma database not psuch but push like this npx prisma database push and that should add the password field to your tables collection So if I refresh here one more time Go inside of the user Expand it. There we go. We have password field, which is a type of text. Great So now we are actually ready to revisit our actions right here register and in here we're gonna take the values which user provided and actually fill that user model with our first record.
Great, great job!