Build Notes App using Next.js 14+ | Drizzle ORM | Neon Database and Clerk Authentication

hello everyone hope you're all doing great this video is about NEX gs14 and using this I will be building a small Notes application although this is a small application but this is a full stack application that includes front end backend and database so for that I'm going to be using drizzle orm for creating database models and creating schemas I will be using neon database for storing my data inside the database I will be using clerk authentication for building authentication like sign in sign up so this app lookss smaller but it covers pretty much every topic for you to understand how you can build a complete full stack large applications so I will be talking about how all of these four Technologies work together linked together and how these communicate with each other so let me give you a quick demo of the application this is the Navar where you can see sign in sign up button and this is the login form and it has this route SL sign in which is provided by clerk authentication I can click on the sign up sign in and I can navigate to the homepage but since I'm not logged in this homepage is protected because homepage is where I will be showing all the notes belonging to a particular user which is logged in okay so let me sign in with my email ID click on sign in and I can click on the continue so this email ID is not registered so I'm going to go with the continue with Google Now you can see that I'm logged in and these are the notes which I already created for this particular user means that these notes are only belonging to this user if any other user try to log in they will not be able to see these notes so these notes are protected and only this user is able to see these notes and if I go to this profile icon I can see that here I can manage the account I can change the profile image I can change the username I can add a new email ID I can go to the security and change these informations over here and here I have this sign out button over here as well well as I have this sign out button over here as well so again guys this app looks smaller but it covers all the concepts for you guys to build a full stack applications using NEX js14 how to manage database how to create dzel orm creating schemas modeling how to link all of these Technologies together how they communicate with each other so let's get started with creating a new nexs 14 project I've opened up vs code with an empty folder inside it so in the terminal I can simply write this command npx create next app at latest space dot dot will not create a new folder it will create the files and folder of nextjs project with the same folder which I've opened in vs code currently so I'll hit enter it's going to ask me few question like I'm going to go with the typescript es lent Tailwind CSS yes no for Source directory app router no for import Alias so it's going to take some time meanwhile it's getting created let me show you that I've have created almost 49 video and this tutorial is my 50th video on nextjs using App directory and if you want to understand and learn more topics on this technology you can go through this playlist I've given the link of this playlist in the description of this video I have completed and covered up pretty much every topic on nextjs that can help you to become a good nextjs developer so there are two playlist one is nextjs s 13 that also contains the videos on next S14 because both uses app router structure and this is the playlist for next js14 specifically covering up pretty much every topic so you can see I'm putting a lot of effort building these videos for you guys so do subscribe my channel and also if you want any kind of development services from me you can contact me on LinkedIn I've given the link of it in the description of this video so our next chs4 project is created let me clear this out and let me try to run the project so that we can verify everything is working fine so it's running on Local Host 3000 and let's go over here and let's try to open up Local Host 3000 and it should show up the default UI awesome so now first of all I'm going to go into the app directory I'm going to go into the page. TSX and here I'm simply going to remove everything within this main so let's remove that all right and also from here I'm also going to remove this thing and also the padding all right and inside the main I'll be creating a new component for my to-do app so this is going to be a single page to do application with the functionalities of add deletion edit and also checkbox for completion to do all right as I've already shown you how it looks like now let's go over here and I'm going to first of all configure drizzle orm in my project so I'm going to go and click on the learn and I'm going to go and click on the tutorials and the to-do app so I'm going to follow this document although this document contains the code which have some minor issues and I'm going to expanding this implementation which is showing in this article to add the users add the relational model and add the Q for those users for this to-do application and also I will be attaching this particular to-do app with the clerk for user authentication as well so this is going to be a Kickstart guide for this to-do app to add the drizzle in our project so first of all we need to install these two packages so I'm first going to install the first one which is neon database SL serverless let's stop this and paste this in the terminal and hit enter and also so let's copy the second one as well so there seems some vering issues so I'm going to go up so either I can change the verions which I have so let me check what are the versions so I'm using 20 what I can do is I simply can copy this one Legacy pure depths and let's go up and I can paste that after this command and I will hit enter and it is going to install this particular package correctly you can see that it has been installed now let's install this one and also at the end also add the same flag that we have added Above So Legacy Pier depths hit enter and this package is also going to be installed in package.json you can see here it is installed and also the drizzle kit should also be adding over here okay so it is still getting installed all right so after that we need to create the DB folder and inside it we need to create SL drizzle. TS okay so come here and I'm going to create DB and inside it I need to create drizzle dots so let's go over here and let's copy the code inside and I'm going to paste that and currently it will not work because I need to add this in my EnV file uh okay so now let's go to the next line we need to create drizzle. config.sys over here and inside the DB we can create the schema. TS file so this is the initial Kickstart schema for the to-do only which I will be modifying later when I will be adding users model over here and also I'll create a relationship between this Tod do and the users uh model okay so inside this I can create schema. TS and let's copy and let's paste that over here and there's no error which is good let's see what we have here so it is showing that we need to just run this particular command but I'm not going to do that let me tell you that first of all I'm going to add the neon URL in my EnV file so let's create that EnV and inside it we need to add this particular variable equals to and we need to go into the neon console you need to sign up with your account in neon dashboard and uh initially it will show nothing if you are first time using it you need to create organization and inside the organization you need to create a new project so I'm going to go with the first of all uh it is showing that I can only have one project uh in the free version so I don't need that I just created that for learning purpose so I'm simply going to delete this so click on delete delete this delete one and and now I'll be able to create a new project so project name let's create nodes next4 and then drizzel okay and uh I can create my DB you can name anything and uh give the nearest server region over here so I can go with uh let's go with the Asia specific Singapore and create project okay so it has created the project and now below it is showing all of these options I can go with so let's go over here so I can simply copy this URL as it is and uh before copying this I need to just make it visible otherwise there are Statics over here so now let's copy this URL and I'm going to paste this over here okay so this has been added make sure you save this file and uh make sure you close this file we have the schema we have the drizzle config and we have this particular configuration and for the UI purpose we have to create the to-dos components like it is showing over here we need to create this particular architecture but for uploading over schema in the neon database for creating the models in the tables like over here uh we can go to the database or the tables it is showing nothing to upload that we don't need to create the to-do components we can create that later on so but I'm not going to run this command at the moment uh this one which it is showing here drizzle kit push instead first of all I'm going to generate its migration and in order to generate that I need to copy this particular command let me paste that and first of all I can simply replace push with generate okay I will hit enter okay this generate so there seems and this command is decate please use generate have I made any mistake all right guys so couple of days ago I was using this particular tool with the different version and it got updated in just couple of days so make sure you are using the same version which I have installed over here for the serverless for the drizzle kit and the drizzle orm which I have this is the updated versions which I have installed in in this project now let's come over here I've resolved these errors what you need to do is you need to add this dialect with the postgress SQL this is what we are using because we are using neon database and we have given the path of our schema. TS file and then out is going to be do/ drizzle this is the folder which will be generated after we run the generate command okay and now this particular thing needs to be added which was already added over here now in the terminal what we need to do is we need to run this command don't add colon PG after that okay it will be Auto detected all right so npx drizzle kit generate and I will hit enter and now you will see that it will not throw any kind of error and it's going to generate this drizzle uh folder and inside it you can see that it has generated this cury create table if not exist to do ID text done and it is referring to this particular schema if you have written some queries in SQL directly you must be familiar with that uh so this is what it has generated which we don't need to make changes inside it now this has been added now let's go into the neon console and if I go to the table and it will still not show that to-do table what we need to do is in the terminal we need to run the push command so npx drizzle kit push so it is going to detect what is the URL of our DB from here and now if I refresh this page you will see that there will be a to-do table will be created over here all right and the same particular properties and attributes are added with the same data types which we have added over here awesome so let's come back to this article now so by the way this particular configuration is is not working as I've shown you you need to update accordingly what I have shown over here all right so let's come down and uh it is asking us to create all of these server actions I hope that you have an understanding about server actions if not then you can watch my video on this particular topic specifically on my channel I've created that server actions in NEX js14 so before actually creating all of these server actions I'm going to come down and I need to create this particular structure actually let's click on this full stack okay so now actions and to do actions. DS let's create that first of all I need to create actions and inside it I will be creating a new file to do actions let's leave it for now drizzle is already created app directory is already created and then components and within the components we need to create these three files okay so let's let's go over here I'm going to create components this one add too. TSX add too. TSX this one and then too todos okay so let's create these two files too. TSX and too. DSX all right so now let's go up actually this one as well type types so let's create this folder types and inside it we need to create to-do type dots so to-do type. TS all right so let's go up and uh let's try to find out so these are the different server actions and uh this is the type that we need to add in Todo type let's save this file and close it and now let's go down and then we need to load up these todos and get the data okay but before that I'm going to be putting up these three files code from this so first one is the todos do TSX so let's copy this whole code and put it inside todos do TSX okay this one and currently this code code does not exist so let's go into the too. TSX let's copy this and paste it over here and let's go into the add too let's copy this and paste it over here I'm going to explain you what these files contain and still there is one error because we need to add the server actions so by the way we can go over here and we need to click on it separately instead I'm going to come down and I'm going to copy this whole file this file contains every server action that was shown above okay and I'm going to explain you what it is doing how it is curing the data from the database so let's go and uh over here I have pasted that okay so it is giving some error and uh at the start of video I told you that this article contains few errors which I'm going to resolve so let's close all of these files so let me run the project first of all so in the terminal I'm going to Simply run npm run Dev okay so let's try to see how it is looking like I have refreshed Local Host column 3000 and uh it is not showing anything because let's go into the page and it contains nothing we need to actually show all the to-dos so here we can fetch all the to-dos from the components to do and uh let's try to see what it shows it it is giving the error because we need to pass the data what we can do is in our article it is saying to use this which is from server actions so I'm going to add this and I'm going to add async because we are using a weight and also we can import it from the to-dos action which we have created and now we can pass todos as the data so like this okay so let's save it and let's go into this and now you can see that it is showing this particular UI which is looking great but first of all I'm going to go into the global. CSS and I'm going to remove everything because it's not looking good in the dark mode and this is looking good now if I try to enter ABCD ad and you can see that it has created on the UI but it is showing some error that uh there has to be an ID should be passed in order to store it in the database if I go into the console and refresh and let's click on this to-do you will see that it is not showing any record over here even though it is showing uh some d data over here this is just on the front end okay so let's go into the to-dos and uh here you can see that it is actually passing this text but if we see the server action it is actually receiving only text but from here we are also passing the ID so what we can do is we can receive this ID in our to do action as well so here uh I can actually receive it like ID number and this values because uh this is belonging to that type so inside it I can simply pass the ID now you can see that the error is gone and error is gone from here as well okay so this one is showing the error as well the toggle to-do so let's see what is the error this is the function toggle to-do and it is receiving ID and done but this one is only passing the ID so now I can actually figure this out and I can pass the done from here as well and I can receive this done property as a param from here and let's verify where this is being called so this is where it is being called inside the to-do so let's go inside the to-do let's save this file first of all and here this is where it is being used and this is where it is being received and let's see where it is getting called and this is where it is getting passed so now let's try and refresh this page and first to do and let's see if it gets added in the DB so there is no error currently over here all right and there is no error over here as well let's try to go to the console and let's refresh and see if that to-do is added in the DB or not so click on that all right guys this is looking great we have our first to-do stored in the database it has the ID it has the text and it has this F stands for false for the done that's why it is written uh this over here so if I click on it uh it has been changed over here but I want this to be updated in the DB as well so here in the console let's refresh and click here and now it has been changed to t means that this to-do is selected let's try to delete this and let's try to refresh and this to-do should be deleted so this is how it is working and now let's try to discuss what is happening here first of all uh let's go into the to-dos which is being added in our page. TSX this is simple so this is where the data is being fetched from the those uh to-do actions so get data is the function inside it and it is using the DB from the at/ DB drizzle and using this DB we can cury any kind of data from the database we can get the data we can update the data delete edit and whatever the functionality we want to perform so db. select from to-do so it is going to select all the to-dos from the table which has named to-do so in the schema this is the name which we are using over here PG table okay and this is what we have written and now from this function after fetching the data from DB it is going to return the data wherever it is being passed this get data and now uh in the page we are passing this data inside the to-do's component and to-do's component is receiving this data over here and uh it is storing the data in this state and then this state is iterating the data using the map within this to-do component I hope that you have an understanding about the styling I'm not going to go in detail into that uh so this to-dos so each to-do is having the key to-do change to-do toggle to-do delete to-do so let's go inside side and this is where it is getting received and uh here uh this is simple JavaScript or you can say the typescript TSX okay and uh it has uh if this is editing we are going to change the uh button text from save to edit and if it is uh not editing we are simply showing uh the edit button okay so I hope that you have understanding about this stary operator What is is doing input handle textt change it is updating the state input handle is done this is updating the toggle and these are the function which is actually triggering the same function which are being passed from here and these functions are triggering the function uh inside the server actions okay server actions like toggle to-do passing an ID and done delete to-do uh edit to-do so inside the to-do uh these are simply updating these logic you can go through it and understand what is happening I'm already expecting you to understand the JavaScript and react syntax the basic syntax of react these to-do actions this is an add to-do it is inserting inside the to-do with these values I have passed the ID so if I show you this schema. TS I'm using integer okay so whenever I'm using integer it is not going to be automatically incremented I have to manually increment the ID when I'm going to add a new to-do this is the reason inside this to-dos uh whenever we are adding this create to-do we are actually creating the ID over self okay and then we are passing the ID over cell if we don't do that and we don't update it in here it will be regenerated with the same ID one again and again so that's why it is getting inserted inside the DB um and uh it is getting added in the DB and inside this to-dos along with updating in the DB we are setting up on the UI that's why earlier it was showing up on the UI but not updating inside the DB because these are two separate function this is where it is updating on the UI okay and this is where it is updating in the DB so let's talk about that revalidating path Whenever there is something new happens in the UI we want uh the UI to be updated automatically so we want the home route to be updated whenever the new text is getting generated otherwise we have to refresh the page in order to see the new to-do this is the delete to-do we can cury this particular command and uh we are checking wherever the ID is matching then we are deleting only that particular to-do and then we are revalidating path to update the UI toggle to-do uh we are checking where the ID is matching uh update the DB with the too do and only change this particular value which is done whichever we are passing from that UI okay and then added to-do we are updating to-do and only changing the text wherever the ID is matching and then the revalidating path okay so this is the server actions uh and uh this is the add to-do functionality you can go through it simple State Management handle input handle ad this is simply updating the functions and these are simple input and the button simple form that you can create simply uh in the react or nextjs all right so this is it for this to-do actions now I'm going to create a new schema and that is going to be for the users and I'm going to update this schema for this to-do as well to add the relationship between this so that we may able to fetch the data of that to-do which is only belonging to that users means a single user should be creating particular to-dos like and when we fetch that to-dos only those to-dos should be visible which belongs to that user who created those list of to-dos so this is going to be uh a great uh understanding for creating this schema in the drizzel orm so let's create that particular schema so Above This to-do schema I'm going to create another schema and let's call it export con users equals to PG table users and this object and inside it just like the too I can use ID and I can use integer for the ID but for the users I want it to autoincrement so in order to Auto increment I can use serial okay I could use serial for to-do but this was already added in that document so let's go with both of these types so ID and then let's give it a primary key okay and this has to be added so let me add all of these we have integer text Boolean PG table and I would be needing serial and I will be needing the time stamp as well okay so this is the ID and now I will be creating name and email as well let me copy that from my notes so this is the name of type text with the name and it will not be null means it will be required and then we can have the created ad and updated ad like this with the time stamp and this is going to be the default now whenever this is going to be created or updated it will automatically fetch the current time in order to update in the database by the way we can add the created ad and updated ad in the to-do as well if you want but for now let's go just like this so inside the to-do what relationship we want to add we want each to do should belong to a user ID okay so in order to do that I can have another type over here the attribute for the to-do you can write anything over here I have written user ID and then this is going to take an integer for the user ID okay so let's click on Tab I'm using tab 9 asistant extension it is suggesting me few things but not fully correct because seems like drizzle orm is new to tab 9 AI assistant so but I'm going to remove the primary key integer user ID and I'm not going to use user ID instead I'm going to use user ID and this particular is going to be the column name in the table in the database okay so integer user ID and after that this is not going to be null okay and then I'm going to write references users. ID okay we have already created the users table and it is belonging to the users. okay so now this is the relationship have been made there are few more things that I need to add over here between to-dos relation I need to Define that uh the todos have uh whether it is one to many many to one or many to many relation so I can have export con to do relations and then I can have relations it should be added over here yes relations okay and then I'm going to use the name of todos table and uh actually this is to-do let's try to change the name to-dos and change it to todos and uh here I I can okay so that is fine I'm using to-dos over here so after this I can use one and uh let's try to use this Arrow function and then let's try to use this particular syntax and then I can use user one then users comma I need to define the fields todos do user ID then I need to use references users. ID all right so what it is saying that one user have uh so this to-do relation this that one too have only one user means that one Todo belong Belongs to Only One user it is not possible that one Todo is belonging to multiple users so this is the relationship I have defined and I also I want to Define another relation which is the users relation so it is showing that one user can have multiple to-dos all right so we are done with the schema now let's try to use that but before using this particular schema for todos and user we need to update the migration uh this is the migration inside the drizzel and also we need to push the updated schema in the neon database so I'm going to delete whatever the migration exists uh so I'm going to come in the terminal and I'm going to run that same command uh which was this npx drizzle kit generate now if I go into the drizzle and now it has generated this particular scripts for this to do and for the users and also whatever the relationship I have made it has generated this now this schema should be pushed into the neon database so I'm going to replace generate with push now and uh currently it is asking me is to do table created or renamed from another table so I'm going to uh rename the table and want to delete the previous table so so rename it and create this users table so let's go over here and let's see what we have here in the neon database so here we have this to-dos table done ID and the text and now in the users we have this particular thing email ID name uh and then uh this updated art all right so here currently it is not showing the third or the fourth uh this user ID uh but let's see uh whether it shows up later on or not the user ID for the to-dos okay and also uh the previous functionality might not work so I have changed the name from to-do to todos so I need to update this to-do so let's add s here here and wherever it is being used so I'm going to update that so that everything keeps on working this toos and this toos and there is this error if I hover over it actually it is expecting the user ID as well so let's try to add the user ID so user ID so error is gone but user ID does not exist we need to pass this user ID from the component to This Server action so that uh whenever the to-do is getting created it should be added with reference to the user which is logged in okay currently we have not impl imped authentication which we are going to do that later on so I'm going to add user ID number so this has been updated over here all right so let's go into the todos and this is showing some kind of error because we need to pass the user ID now so let's try to add and pass the user ID from here so I'm going to use user. ID user does not exist and obviously we need to pass the user uh from the parent component we can fetch the users from the DB directly in this component but I'm going to fetch that in my page. TSX and also on the front end uh we can also add uh the user ID over here after this done so user ID colon user. ID okay uh and now this is the user which is being added over here now the error is gone all right so there is no error over here now let's go into the page. TSX and inside it we need to fetch all the users okay but let's pass the user ID from here without fetching the users so users uh let's pass one okay for now we don't have the server actions for that so so let's first update the type so here this is also expecting user ID now of type number okay so let's close this and I'm going to create another file inside it this is going to be for the user actions. TS and this is going to contain all the operations for the user and uh let's first import all the stuff which is also being imported inside this to-do section at the top and here first of all I'm going to get all the users so that we can pass the user uh in the to-dos functions to-dos components to fetch the to-dos which are belonging to that uh user okay so this is uh giving us this particular error uh so what is the error so diesel has no exported member drizzle uh at drizzle okay so here we can actually add it like this okay so this is going to return us all the users now I'm going to create another action this is going to create a new user in the database because for fetching the to-dos belonging to a particular user uh the user data should be added in the database as well just for uh learning purpose of for now later on I will be implementing it with the real authentication this is just to create a new user in the database so I can have uh get user or you can say add user equals to async and await db. insert users do values and then inside it I can pass the name user one and the email let's add that so @gmail.com any email and then after that I need to revalidate path with the home key okay so this is going to create a new user in the database all right I'll come back to this file again when I will need to add uh another action for uh fetching the user along with all of its to-dos which belongs to this particular user this returns all the user this creates the user I want to fetch only one user which is going to be containing all the to-dos and I'm going to pass an ID that this user I want to fetch along with the IDS okay so let's go over here in the page. TSX and uh I'm going to f fetch all the users inside it first of all okay and uh this needs to be added from the actions and I'm going to first of all log all the users to verify that and uh then I'm going to while fetching this particular data I need to pass the users z. ID Okay so so this is going to give us the data of the to-dos which belongs to a particular ID So currently this is not supported which needs to be supported yet uh but first of all I also needs to go to the to-do actions this is the get data and I'm going to update this with the ID of type number and uh so let's change it to user ID and the cury that I have already added over here I can actually change this cury to this one so this is actually selecting all the todos where todos do user ID equal to user ID which is being passed to this get data okay so let's close this for now and now the error is gone now now the real users which is being stored in the database is being fetched and the first user which is being created in the database uh not the logged in user as of now is being passed to this ID now the data all the to-dos belonging to this user will be fetched and this data is being passed to here and in the page. TSX rather than passing one I can pass uh users Z okay and uh this is where it is going to be used so users user. ID we are separately fetching the ID from the users object which is being passed from page. DSX so what I want to do first of all whenever I want to create a new to-do I don't want to fetch all the to-dos but first of all I want to create a new user so in order to do that I can simply uh comment out this thing and I'm going to create a new user so for creating that I'm going to what is that this one add user actually we don't need to pass anything so add user from the actions and we are simply going to call this and hopefully this user is is going to gets generated in the database so so many things don't can't confuse because these were changes and configuration that we had to do so npm run Dev I hope that there won't be any error so let's see let's refresh so there is this error so the array is empty that's why it is not able to fetch that ID so what we can do is uh rather than passing this that I'm just going to comment this out I'm simply going to pass this array all right so there won't be any error let's refresh there is no error so let's add that click on that and if I click on that this is being shown over here user one with the created ad because we are logging in the users and uh in this console neon console I want to see if the user is created over here yes the user is created with all the details that we have over here and uh now if we are trying to get the data of that user user ID does not exist on to-do's action let's see so it is giving an error which I was expecting actually in to-do stable this particular column does not exist and obviously if I go over here you can see that this is not existing so I'm going to go and I'm going to regenerate that because I've updated this user ID in my typescript file as well so I'm going to delete this drizzle folder completely and now I'm going to first of all npx kit generate and now now I'm going to push it and uh it maybe ask few question changes applied and let's see what we have here if I refresh this and go to the to-dos and now we have this user ID now and there won't be any data inside it for the users uh there is a user all right uh because with the same name it only updated this user ID uh after I updated this data type actually okay so now let me run the project and let's see what happens and uh this is where we are running the project and let's refresh the page yes and let's try to uh all right the uh app is running and now we have this particular user in page. TSX and now we are passing the data let me see if there is any data exists so data this one let's save it and now there is user exist but there is an empty data for that to-dos uh because no to-do exist for this particular user so I'm going to go I just created the user over here just for referencing the to-dos I'm going to delete this line in fact let's comment this line and let's uncomment this now it is going to fetch uh the to-dos from here which are belonging to a particular user okay so now let's refresh and now there is no too belonging to that user uh but I'm going to go and uh let's add first too add and this has been added there is no error uh and I'm going to refresh this database let's click on to-do and new to-do have been added along with user ID and if I go to the users this is the ID of that user one and uh we actually uh intentionally fetch the first user to be used as a reference for that to do later on when I will integrate create the clerk authentication that will be actual user ID which is logged in who can create the new to-dos which will be stored in the database So currently too is belonging to the user ID equals to one all right so this is where uh it is being fetched and if I refresh this let's see and now after refreshing this is again visible for that user ID which I have used so inside this particular uh user actions actually yeah and inside this I can create other cury so export const get user I just want to show you how the ques work here so inside it if I pass the user ID of type number and now I can fetch a single user along with all the to-dos belonging to that user okay um in that case to-dos action we are fetching the to-dos which are belonging to this user ID but if we have a user we want to perform the cury on users schema model to fetch all the users along with the to-dos it has this is the reason we created this that uh one user can have multiple to-dos okay so here we can use the DB and then the cury then users. find many and then I can use where users equals to use the arrow function EQ users. iduser ID okay and after that we can pass this with that what are the properties we want to fetch from here so todos equals to true so there seems an error so this format of curing is not working actually I want both of the ques to work so what I need to do is I need to modify drizzle. TS so here rather than actually separately exporting the DB let me EX export it like this so export const DB equals to drizzle SQL and then schema okay and the schema needs to be added from that schema like this all right so let's save it and let's close it and you can see that we are able to fetch the users now but for here we need to bring it back earlier I removed that because I forgot that I will be needing to use this particular cery you can see that both of the queries are working this one and this one so let's save it and also over here it is also throwing an error so let's use these curly braces now all right so this is working perfectly fine we can test that out so here uh after this we can simply return user from here and this is going to return the user now in order to test this out let's go into the page. TSX and uh for testing purpose we can simply let's remove this data and we can get the user by passing the user ID just for testing purpose and let's log that out we need to fetch the get user from the user action and let's log the users let's try to run the application now if it is still showing the error let me reload the window so that all the errors are gone okay so npm run Dev so this needs to work now so let's try to refresh this and uh yeah so this is being fetched from that DB but if I come over here and if I hovered I'm using console ninja by the way this is showing all the outputs of console logs Direct ly in my vs code if I hover over it you will see that it is giving me all the users one user with the ID and all the to-dos inside it how cool is that all the to-dos which belongs to this user and let me add the second to-do add and uh it has been refreshed and if I hover over it it is showing this particular second to do which is belonging to this user all right so uh this is a quite awesome query that we can use over here and uh at the top you can see that there are two users and for the first query when we used get all users it is not showing the to-dos over here because we are not appending the to-dos in this particular query in this user action okay so our setup is complete for the relational database we have tested out all of our ques now we need to go ahead and integrate the clerk authentication this is going to a real application I won't be using and generating these fake users just for testing that out but for setting that up in our application I had to do that so it's time to go to the clerk authentication all right so what you need to do is to open up the clerk.com on your browser and after that you need to create a new account sign up with your email ID and once you are signed up you will see the sign out button and the dashboard button at the top so I'm going to click on the dashboard and create a new application on my clerk dashboard I will already be having many other applications as well but if you are new to clerk you will have an empty page on the dashboard where you can click on the create application so I'm going to click on the dashboard button and I'm going to you can first of all create a new organization I've already created it with the name personal account but you can go ahead and create a new organization but within the same organization I can create a new application by going over here you might have different UI if you are new to clerk so you just need to create a new application by clicking over here okay so now I'm going to select that which email providers I want to enable the options I'm going to go with the sign up with email and the Google and you can enable all of these social providers as well if you want okay so let's go and create a new application I can name the application so let's give it drizzle neon clerk next 14 so let's name it like this and I'm going to click on create application so it's going to create that and after that it's going to give us few information that we need to do so first of all we need to install this package in our project so this is the project I'm going to install this package so let's get back and let's enable this and let's copy this env. loal so I'm going to go inside this EnV file and here I'm going to be pasting this information so currently you can see that it has this information only so let's add it right below the publishable key and the secret key for the clerk let's go over here and now I'm using App router if you are using the old version of nextjs you can go with that uh and one thing more when we are are new to the clerk when we create a new organization it will ask you to select the technology and for this particular organization I've already selected the nextjs that's why it is suggesting me uh different things uh for the next and that's why it is already selected nextjs uh maybe it user interface is changed but you can go ahead and choose your specific Technologies we are going to go with the nextjs so here on the layout file we are going to wrap everything with the clerk provider so I'm going to go and I'm going to open up the layout and in this layout file I'm going to wrap the whole HTML with this clerk provider okay and we also need to import this from clerk nextjs make sure you have successfully installed that particular package so now I'm going to click on continue to the nextjs guide and here I'm going to be creating these two routes for the sign in and the sign up these are recommended so I'm first going to create the sign up I'm simply going to copy this particular path without page. TSX and I'm going to create this folders path within the app directory so let's copy that so in our project right click to the app directory new folder paste it over here and inside this particular folder I'm going to be creating page. TSX and just like this I'm simply going to copy this for the signin route let's copy this new folder add and inside it I'm simply going to add page. TSX and inside it we can copy this sign up path with the sign up sign in path with this uh sign in okay uh so I'm not going to be using this particular syntax instead uh I'm going to add some Tailwind CSS Styles so it becomes at the center of the page so for the sign in I'm simply going to add it over here so it is just like this particular thing but I'm I've just added this Tailwind CSS Styles this is the only difference and for this sign up page I can add this one it is same as this one and I have simply added the Tailwind CSS by adding this div tag around this sign up uh package provided by clerk nextjs all right so what's next now we need to add these two URLs in our EnV file so let's copy this these two paths and paste it over here and next let's try to run the project and see what happens so here in the terminal I'm simply going to write npm run Dev and open up the Local Host column 3000 so let's go over here let's refresh this page and see what happens it might throw some error yes there is an error over here on page. TSX the reason is that I can go to this page. TSX I can simply ignore and comment all of these lines for now I'll come back to this so now you can see that it is showing empty page because this page. TSX contains nothing not uh not even the child components so here I can manually go to the sign in and hit enter and now you will see that it will show this particular awesome login page at the center of the page and this is what we have configured we don't need to create this complex form uh it is automatically given by the clerk and we can click on this sign up and it will give us this option to create over new account and when we will be creating a new account this account will be added in our clerk dashboard we can go to this users and uh the new user will be added over here which uh we will be testing short shortly so now I want to protect my home route you can see that if I try to navigate to the Home Route without logging in I can still able to navigate to the Home Route because I will be showing all the notes all the user specific uh todos on the Home Route and I don't want that users to create the new notes without logging in so if I go to this documentation and here we can see that uh read users and session data let's click on that and here I can go to these examples and it should be showing the middleware file so let's go over here and quickly create a middleware file I'm just going to show you so middleware dots this file is specific to nextjs this is not related to uh this clerk authentication so this middleware fire actually run before triggering any route so we can perform any operation so before triggering any route we can check if the user is logged in or not and according to that we can protect the route or uh revert that user to some other route okay so if user is not logged in I'm going to check on the Home Route then if not logged in I'm going to navigate user to the sign in page so that first user need to sign in then they will be able to create new to-dos so in this middleware file first of all uh what clerk provide is Clerk middleware from cler next server and then I need to create create route matcher okay this is the new verion if you are using the older version of uh clerk then this synx is different earlier there were some public rout spots but currently they have replaced it with a clerk middleware okay so here I can go con as protected route this is the variable name I've just created and now I'm going going to create route match and here I can add an array and put all the routes which I want to protect inside it okay and after that I can write export default clerk middleware Au and then the request let's add an arrow function and inside it I can check if uh is protected route let's add a reest inside it and uh after this if this is true I can use au. protect all right and finally I need to export the configuration and this is what I've got from the clerk documentation let me find that out so if I go over here uh clerk middleware yes you can see that I can click on Clerk midle middleware and there is an all middleware as well so it is saying that this method is now deprecated please use Clerk middleware and this is what I told you before and here this is what I got it from this is the matcher and this is what I have put it over here and it is giving us all the details how we can protect our routes based upon the permissions or we can simply protect the routes now after adding this middleware dots file I can go to this file this uh route and reload out this page you will see that it will be automatically navigated to the signin page if I try to navigate to this Home Route again it will not let me in and we are successfully able to protect over home route now next thing I want to add a Navar at the top with the sign in sign up button after sign in I should be able to show that profile icon and also the sign out button so let's go inside the component and I'm going to create navb bar. TSX and this is simple TSX and I assume that you all are already aware of how we can create uh different types script files and create react components okay so use client I want to uh use some hooks inside it hooks provided by clerk that's why I'm making it use client uh as you know that in nextjs we are not allowed to write hooks without uh making it client component so first of all I need to import few things I'm going to add those things over here so from cler nextjs it is importing sign out button user button cler uh use Clerk and use user link I will be able to click on any button from here and now let's use our afce extension and it is going to create this Navar component okay so here inside this I'm going to be adding uh a nav so nav class name and then I will be adding border B let's add a height 8 VH and uh let's add a flex and items Center okay so this is the nav let's save it uh it is not rendering this let me see all right so like this now for this particular div I'm going to be adding another class and here inside this class I can add a container and then I'll be adding Flex items Center and then justify between for the logo and for the sign in sign up buttons so this is not di this is div actually so now I can add uh a link hre for while clicking on the logo I want to navigate to the Home Route H1 let's add the class name font bold and then text 3XL okay and you can add an image over here as well so let's go to the layout file and inside this we can simply add it over here I hope that you understand how the layout works so this is the children it will show all the chart child uh routes uh and the content inside those routes so inside this body I can add a Dev and inside this div I can add the nav bar which I've just created so let's cut this children and I'm going to put it under this nav bar and let's add the class name over here so max width 6xl MX Auto to bring everything at the center and let's add the height 100 VH okay so let's go over here and you can see that it is showing this awesome logo over here uh and it is looking good and uh it is showing on it will show on the home route as well as all the child routes because we have added it in the layout file okay uh so now let's go to this Navar again and let me verify so I have to added this square brackets and now it is looking good there were no space because I missed this square bracket from here okay so now below this div I need to add another div okay so this is going to be a class name Flex items Center and GAP X5 okay so inside this I need to show the uh sign in and sign up buttons so let's add a div quickly so we can save over time so now you can see that I've added this div this is has the flex item Center Gap X5 and uh now we have this particular link it has this HF clicking on this signin button will be navigated to the signin page uh which I have already created this is the sign in route and clicking on this link will be navigated to this sign up and you can go through this Tailwind CSS Styles so let's go over here and now you can see that I have this sign in sign up page and uh if I click on the sign up I will be able to navigate to the sign up click back to the signin if I click on Logo it will it will not let me in because the route of home is protected because I'm not logged in okay so one more thing uh in here I would like to add inside the nav bar con is signed in and then the user and this is going to be from use user this is provided by Clerk and then we can have the sign out equals to use clerk okay we can use these variables to check if user is signed in or not we can trigger this to enable the sign out for the user we can use this user to fet the information of that user user okay so now inside this particular Dev I can actually check if is signed in if user is signed in otherwise uh we can put everything in this parentheses okay so I'm going to just copy everything from here and put it all here all right and inside this I can simply add it like this so if user is signed in I want to add a button with a sign out button inside so let's add over here so if user is signed in I'm going to trigger this particular TSX if user is not signed in I'm already seeing this sign in sign up button so this is going to show the sign out button because I'm not signed in correctly that's why it is not showing up and after this button we want to show that profile icon and that profile icon is given by the user button everything else will be provided by clerk okay so let's uh try to see what happens here we have this now click on the sign in and I'm going to sign in with continue with Google all right so I'm logged in and you can see that it is automatically navigated to this Home Route and I can see this sign out button and this profile icon with the manage account and and with this sign out button okay let's click on the sign out and it will redirect me to the signin page and when it will redirect to me to the homepage it will be checked uh that uh we are protected and I'm not logged in and it will be automatically navigated to the signin route so we have created navbar we have configured the clerk authentication let me see what else we can do with the clerk and after that I'm going to show you how we can link clerk user with this neon database user because I want to add a relationship between user and then the nodes so that only those noes should be visible which belongs to a particular user which is logged in using clerk authentication so I'm going to modify this schema for this particular user in order to make a link between the clerk authenticated user with these two do okay so here we have this name and email exist over here so now I'm I'm going to come and I'm going to add one more property which is the clerk ID and this is going to be the clerk ID not null and then let's add the first name as well so first name this is going to be the text first name not null then I'm going to add the last name and this is going to be uh the text last name I'm going to remove these things which is automatically added by AI assistant extension which I'm using tab 9 AI assistant and one more thing I would like to add is the photo so I want to store the photo URL of my clerk user in my neon database so all of these information from the clerk uh the name email clerk ID first name last name will be stored in my neon database uh through this drizzle orm schema which I'm just creating in okay and now we have this photo not null so that's it we needed to update this and one more thing I wanted to do this is an integer I want to change it into big int uh actually this is big int let's try to import this from uh the other data types like drizzle omm PG core so this is where it is imported big in it all right so let's save it it's still showing some kind of error let's try to refresh and reload this VSS code window and I hope this error is gone yes uh this is on actually after this ID what we need to do we need to add a mod over here okay so mod number now the error should be gone all right so now in my terminal I want to push and generate it in my schema in my neon database which I've already been showing you first of all I'm simply going to be deleting this drizzle folder it will be regenerated when I will be running npx drizzle kid generate hit enter and uh this has been generated again if I show you this you can see that this has been updated over here now I'm simply going to push it and it will be pushed to my neon database because this is what I've already configured over here in my EnV file no changes detected in my case because I've already tried pushing it with updating schema before recording this part of the video and it is already pushed in my neon uh database but in your case it might give you some questions that you want to remove all the data from the database it might update and create a new user schema in neon database you just need to say yes and it will be updated now let's go over here let's refresh and this is what I wanted to show you uh to do done ID which was already added and this is the user and these are the new properties are updated so there is another thing I wanted to show you that from this neon database we are not able to delete any record if I go to the to-do if any record is showing over here we cannot delete that but drizzel provide just like like Prisma orm drizzle provide a studio as well so npx uh drizzle kit Studio you just need to write this command and it is going to give you this URL which I can click on and it will take you to this route uh I need to update that but for now I can simply open drizzle studio so now you can see that uh it is opening up a studio which is my local setup local project and then it will be showing different records I can perform any kind of filtering I can delete those records and it will be automatically updated in neon database as well so this is the benefit of this uh Studio that this is synced automatically with the neon console all right so we can keep on uh running uh this studio or let's let's stop it uh we can later on uh update that so we have updated over schema now it's time to go ahead and uh create our user which will be logged in over here and when this is going to be logged in or signed up in my uh browser and it will be added in our dashboard as well over here and once it will be added over here I want this user details to be stored in my neon database as well and this is a bit longer concept there is a one way one shorter way that when user is logged in over here I can simply get the user ID from the clerk and then pass that clerk user ID uh to create new to-dos this is a good way but this is not a professional way to do that um we want to store the whole data of the user from the cler into the neon database this is more professional way of doing that so even we are spending more time then we have to go with the professional way of doing things so now I'm going to go to this dashboard for your project in our Clerk and I'm going to click on this web hooks okay and web hooks means that we can trigger different kind of actions like when user is created in clerk dashboard when user was deleted when user was updated uh then we trigger an API and API is responsible to connect with the database we have locally over here and then this database uh connection will be responsible to store the users data in our neon database this is what I'm I'm going to be doing um now so I can click on ADD Endo okay so one more thing I wanted to show you that this web hook does not work on Local Host we either uh want to use the NG rock or local tanel uh but to make it professional to make it more uh production ready uh I would like to deploy my app on versal uh so that uh we can have this deployed varant and then we will be adding that API URL of the deployed Varian in our uh uh web hook uh form over here so first of all I'm going to open up this GitHub and I'm going to create a new repo let's go remind me later and I'm going to be creating a new repo here I can go drizzle next4 uh neon clerk whatever the name you want to add over here um let's keep it public don't select anything create repository let's come over here make sure you have this EnV file added in your G ignore as well uh for security reasons EnV it should not be pushed to the GitHub repo we will be manually adding all of these details in our versal uh for it to be worked so now get status get add and let's go and let's try to commit all of these changes yes and let's try to copy all of these three commands at once and I'm going to add it over here and it will be pushed so let's refresh this page and it should be visible all of the code is visible over here this is cool uh now I'm going to go open up the versal doc and here I'm already linked with the my GitHub account if if you are not if you are new to it you can link your GitHub account with the versal so I can go and add new project over here and it will show all the recent repositories from my GitHub account so you can see that so I was testing this app in a repo this is the old so this is the just now you can see that this is uh imported just now so I can click on import and let's go over here let's copy all of these EnV variables and uh let's click on environment variable click over here paste all of these so it will be automatically adjusted with the key value Pairs and uh now let's click on deploy and hopefully it will be deployed without any error all right so there is an error let's see what is the error over here so it is showing there is an error in this particular file all right so let's go over here so I forgot to do npm run build so whenever you want to deploy what you need to do is just run npm run build and if there is any such error might be occurring on the versal it will be shown on your own terminal beforehand so npm run build and it will show me all of these issues uh during the build process uh so meanwhile it will show that particular issue locally as well I'm going to go into the action user actions and you can see that uh in the terminal it is showing the same error so this is a good way to verify uh the some uh issues that might be occurring before deploying it into the versal so here it is showing that this users does not only contain name and email it contains other values as well so since uh I will be creating a new user and I'll be passing the user object uh from here so I will be updating that let's do that so let's add pass this user which is not being passed as of now and then DB do insert users. values and uh let's try to add these over here from the user object all right and uh also uh this we don't need this thing all right so now the error is gone let's try to build npm run build and see if there is an any error if there is no error I can push the changes again and uh if there is no eror over here there will be no error over here as well so there is no as such any error all of these things are passed so let's try to git add git commit fix error and then git push origin main okay so this has been pushed into a GitHub uh repo and the benefit of versal is that it will be automatically detecting the new changes coming in in the GitHub repo and it will be start redeploying the app so I can go to uh this partic back go to the projects go to this one drizzle next4 this is the new one yeah and uh go to the deployments and now you can see that the build process have been launched automatically just now okay just now is refering to my GitHub repo okay so it is building let's wait for it if there's any error let's go inside it and we can uh also keep checking the logs as well uh how these things is going okay it takes few minutes uh okay so linting checking validity so meanwhile it is getting deployed let's come back and uh I'm going to set up a web hook so inside my EnV I'm going to add a new variable over here and this is going to be web Hulk uncore secret equals to and the value is going to be provided by clerk which I yet need to create so let's go over here so you can see that this is ready and this has been deployed without any error okay so let's try to refresh this page uh I want to copy this URL so let's click on that not the second one I uh the shter one okay so this is where our app is deployed and it is working fine and I want to actually copy this URL before sign in actually okay so let's go to the dashboard and here I would like to add this end point inside the web hook and after that I want to add uh some URL some API URL which will be triggered when the new user is going to gets created so you can see that based upon so these are all the events provided by Clerk and all of these web hook events are provided by other platforms as well like stripe or other platforms so I want to enable user created only okay I don't want to enable any other thing and above this when the new user is created which API I want to be called so this is going to be API SL webhooks SL clerk this is the API which I will be creating in my next GS project if you don't know how to create apis I have created a separate video on creating the rest API in nextjs you can check out my channel so this has been added now I'm going to click on Create and this is the signing secret which it has provided over here let's make it visible let's copy the signing secret let's put it over here so uh this will be a local because we are not going to test it locally so I'm going to go to this versal and uh let's click on the project let's click on the settings let's click click on environment variables and uh let's copy this whole line actually and inside this EnV I can actually add a new EnV over here this one okay and let's click on the save so you can see that web hook secret have been added with the correct uh web hook secret which we have added and once we update the EnV variables it will not be updated we have to redeploy that so click on deploy and click on this three dots redeploy click on redeploy and it will be redeployed with the EnV variables which have been added just now so it is building uh meanwhile we can go to the app and I can create that API which I want to be triggered by that web hook so I'm going to go and create a new folder and inside it I can add API SL webhook SL clerk this is the API URL which I've added over here in my dashboard it should be as it is okay so now let's create a new file route. TS okay so inside it there is a awesome article sync clerk data to your application with web hook I'm going to give the link of this uh URL in the description of this video you can check this how yourself as well so first of all uh you can see that this is what we have already added and uh this is what we have already added as well and now first of all we need to install this particular package npm install swix and let's go down and this is the app router API so this is the code which I need to copy so let's copy everything which is provided by here and you can see that API web hooks but we have slightly different path so inside it I'm simply going to add over here and this is the process. EnV the same variable I've created in my EnV if you have created some different variable name you need to update this over here so you can go through it it is simply checking which uh which event got triggered and which is not triggered so I'm going to come over here and this is the event type event type is going to uh let me know that whether user was created whether user was updated so what was the event actually triggered so I can um add and if and uh then I can write event type equals to user. created all right and now uh from this event type actually the event data I can get the ID email address image URL first name last name username and different properties which I have added in my schema so I'm going to add a line of code code inside this if so from EVT data I have fetched ID and ID is basically the clerk ID which I have added in the schema okay and now I'm going to be building an object over here okay so this particular object contains this ID clerk ID and this is the email name first name last name and photo and the ID for that drizzle Neon orm would be automatically generated this ID and these two props is not being added over here okay so there seems some kind of error so actually I just need to cut it from here and put it inside that if condition all right so inside this if condition now I can actually a wait add user and I'm going to pass the user over here this add user is something which I just updated in my actions so let's go to the user actions and this is what I have added over here okay and uh I think there is something which we can add over here I can add uh this is as well so returning clerk ID so this uh I think this is going to return some data wherever it is being called so let's verify that um route. TS await user ID and after that uh we can actually we return some response so return next response from next server do Json and then the message column [Music] new user created and then the user all right so I hope that when we will be logged in with the clerk authentication along on with creating the user entry in our clerk dashboard the web Hook is going to trigger this API and this API is going to call this particular action user action and this user action is already configured with the neon database connection and it is going to insert this uh inside this particular schema with this data which is being passed and then this is going to return this so I hope that it is going to work but before that for it to work we can redeployed on versal so let's go over here it is still building so now I'm going to write get status yes uh this is something which I have updated and now I can add get add and then get commit and then get push to Main and let's see we have this one let's refresh this page it should be building again uh it is ready let's let's go to this project and let's go over here yes it is rebuilding just now uh because we have just pushed our code now once the build is complete uh I'm going to go to this URL and I'm going to log in with my Google account or I can sign up with my own email ID without using any social provider and we can enable other social providers as well you can see on the clerk dashboard I've already explained you so I'm just waiting for this to be completing building and then I will be showing that so before that let's go over here in the users and uh this users have been created because I tried logging in with this particular email ID let's try to delete that and I will be using this same same email ID to create the new user so let's see uh it's still building and this is ready and let's try to refresh this page and uh our home route is protected so it will be navigated to the signin yes this has been done we can navigate to these routes so our uh deployment is successful so now let's click on continue with Google and login with Gmail continue and uh it should take me to the Home Route actually so sign in call back yes the Home Route it contains nothing and we are successfully logged in let's go over here let's refresh this page and it should be having this email ID yes I've just updated that and now before going to the neon database let's go into the versal let's go over here let's let's go inside this thing and let's go into the logs and see if there is any error so neon DB error null value in column name for relation users violates not null value so there seems an error API web hooks status 500 so let's come over here webhook clerk route. TS and uh here it should be triggered let's see what is the error so internal server error what is this null value in column name of relation users violates non-null constraint so error occurring because of this and the web Hook is triggering properly because if there is an issue with the web hook URL this would not be shown up so the username is getting null and we have added the schema that the name is not null okay so it means that in the route this username is not being fetched so I think if we go to here and uh I'm going to go to the user email password and I should enable this username from here and click on Save now when I will be trying to login with any email ID it will ask me to create a username as well so I'm going to go to the user and for this particular user I'm simply going to delete that and let's go to our app and let's refresh this uh let's try to okay this one let's try to refresh this page and uh now I'm going to click on continue continue and now it should ask me to write a username as well so now you can see that fill in missing field so let's add a username and click on the continue and I hope that it will not throw any error now so I'm logged in and it should be added over here and I'm going to verify it from versal as well so this is added let's go over here and let's click on show new logs all right so APA web Hook was triggered and with the 200 code and this one is triggered as well let's go to the neon database let's refresh this page now and I'm going to click on to-do it contains nothing let's go to the user and all right so now you can see that uh this name email updated clerk ID this is the ID of the clerk clerk first name clerk last name and clerk photo URL so we have successfully synced our clerk user with our neon database now whenever we are logged in over here in our application we can actually uh add a relationship between todos and then uh between this particular user because both todos and user exist in the neon database now it's time to modify over to-do's actions a bit and these components uh for these todos in order to perform all of these crowd operations for to-dos all right so let's go into the user actions and here we have this get all users action which is fine I'm going to leave it as it is and then we have this get user for getting a single user with a user ID and uh rather than adding the ID I'm going to change it to the clerk ID because this is what I'll be referring so this is not actually matching with the user ID uh so I'm going to change number this is a type of text and this is the number so for now I'm going to change it to any and you can see that the error is gone okay so now I'm going to go and uh go to this to-dos and this is where we are creating a new to-do since I updated this schema with this uh this big end so I'm not going to use the same logic that I have written before uh for creating an ID instead I'm going to be using the date for creating a new ID this is going to be a long integer decimals okay so let's come over here and uh con ID equals to new date. get time this is going to generate a long integer after that we have this ID text user. ID previous ID uh and I hope that this should work as it is it should work fine okay and uh next thing let me run the project Local Host let's refresh this and uh let's see where it goes so this is where it is showing I'm not able to navigate to that so let's go and open up this page. TSX it is empty as of now so I'm going to fetch the user details which is logged in currently which is the clerk and uh when the user gets created we know that it gets generated in the uh neon database as well so then we are going to get the user from the neon database because that will be having the ID for that uh user and the to-do as well okay so now I'm going to Let's remove all of these and let's get the user any equals to await and uh let's add the current user from the next and then let's check if us user is logged in or not if not I'm simply going to return I'm not going to proceed further although I've already protected but this is a good uh protection as well so now I can add a new variable fetched data await and then the get user and I can pass the user. ID okay and this is the ID which I am uh uh get user is this one this one okay so after that I can actually uh to verify I can log this out as well let's uncomment this and rather than adding the data let's add the fetched data0 do todos so this is going to pass all the to-dos belonging to this particular user because this is the relationship we have built in our schema uh and we have also enabled this with to-do so it's going to return all the to-dos belonging to this user and here for the current user I'm going to add fetched user zero so this is an array with only one object so we are simply passing one object so now uh let's refresh this page let's try to log in with Google with the same email ID uh for which I created the username so now you can see that there is no error and I'm logged in and the URL for the Home Route is no more protected because I'm logged in and uh let's see neon console instead let's try to run this uh one npx drizzle kit studio uh space studio and this is where I can actually delete the records as well so let's go uh this one is the studio let's refresh and this should show the user as well and there is no to do so currently uh you can see that the ID of this user is 20 and this is the clerk ID and uh let's go and create a new to-do so first to-do I hope there won't be any error let's add that uh it has been added all right uh let's refresh this and it has been fetched from DB as well uh for this particular user now I'm going to go uh to this studio let's refresh and for this user let's click on to-dos and this to-do have been added uh with this uh user data as well because of the relationship and then we have this uh ID uh belonging to this particular to-do and this is the user ID that this to-do belongs to this uh user ID okay let's try to add more to-dos so second to-do and then third to-do all right so it must be added in our database let's see tables click on to-dos and these are three to-dos belong belonging to this user ID have been added awesome now I want to verify if I try to log with another user whether these details for to-dos uh shows up over there or not so let's sign out and I'm navigated to the signin page let's try to log in with another email ID so it is asking me to write a username again for this new email ID okay so it has thrown some errors uh can't read properties of undefined fetched data zero to-dos uh so let's see whether we have to-dos or not so actually the data is being printed but if I go over here I actually refresh this page and there is no error actually because of the performance there caused an an error when this particular thing is not exists so the thing is that what we can do is we can simply add feted data and and uh we can add this condition to avoid any kind of error and now if I refresh this page now this fetch data is going to be and also we can check if fetched data to-dos exists or not by writing another condition or we can add this condition before this todos as well okay so let's go and currently you can see that this particular new user does not have uh any to-do over here because this user does not contain any to-do so let's add add new user to-do and this to-do is going to be added for this user now let's go to the neon console and see how many to-dos are here so we can see that there are four to-dos um and three belonging to user ID 20 one belonging to 21 uh because this particular user is just being logged in so guys I have pretty much covered each and every concept to use next js14 along with dzel orm neon console database along with the clerk authentication and how to these Technologies actually communicate with each other uh to pass the data to call the database to fetch the data and to create an awesome simple to-do application so you can use these Concepts you can use these ideas to build your larger applications as well thank you so much for watching guys if you have any question you can comment below I'll be creating more videos on next j14 and using these awesome Technologies do subscribe my channel and and like my video as well thank you so much for watching again see you in the next video

Channel: Programming with Umair

Views: 2,594

Keywords: Fullstack next.js 14 tutorial, next.js with clerk auth, next.js app with drizzle orm, build project with next.js 14 neon database, how to connect clerk auth with database, protect routes in next.js 14, Build notes app using next.js 14, CRUD project, nextjs tutorial, Next.js performance, Clerk auth webhooks, build rest apis in next.js 14

Id: 2n96_Yq3608

Length: 104min 28sec (6268 seconds)

Published: Mon May 27 2024