Level Up Your Next.js Web Apps: Complete Clerk.js Authentication Tutorial for Next.js Developers!

okay guys so in this video we'll be talking about clerk it is an authentication provider and using clerks makes so easy to implement authentication inside the application it is simply like one two three and you are done with authentication it has a generous free trigger that is you can have about 5000 monthly active users without paying a single time so without wasting any time let's dive into code and let's see that how it is implemented the first thing you need to do is to sign up to Clerk and then you need to go to your dashboard so once you sign up to your dashboard or you sign into your dashboard you would see an empty applications tab here that is you can create applications so I've created a test application here but what I'll do I'll simply click on add new application so here I need to provide in the name of the application so let's say that it's a unicorn app so Unicorn app and now we can choose that what all providers do we need to handle sign in to our application so if we provide like the email address and the Google we have this layout that is the UI provided regular and we would be using this UI inside our next JS application if we also want Apple then we can enable apple and then we would be having a layout like this but for Simplicity let's simply give it to email address and Google let's click on create the application and that's all what you need to do inside the clerk dashboard so once you are here you see that you are provided with quick starts that is an xjs react remix and so on and so forth but since we are doing a next Us application so we would be using the next JS API keys that is we would be creating a DOT env.local file and we will be providing in these two uh these two values so let me copy these values for reference so what I've done here is this that I've created a very basic Nexus application using the app router and make sure that you're using Proctor here and not the pages router so I'm using the app router here and I am on next shares I suppose 13 point uh 13.4.5 so inside this app router what I have done is this that I've created a page that is the index page that we see here and these all buttons are these are navigational items are coming from the layout file that is this layout.tsx file which have a simple navigation bar with a couple of links and these two buttons at the variant that is the sign in button and sign out button so if you go to these links here we see that we are on the home page we have the dashboard page we have the profile page and currently I have not done in the sign in page and sign out page sign up page which we would be doing in this video so what I need to do the first thing which I need to do is to include the library for clerk so I would be stopping my application and let me increase the size here so let me clear out so I would simply do npm install at club next.js and it would take a couple of seconds to install and then what I need to do I need to go to my dashboard that is the application dashboard and I need to copy in these values here that is Dot env.local so let me copy these two environment keys and I would be pasting them inside my env.local file so let me paste it here so here we have the public publishable key and here we have the secret key and now what we need to do we need to wrap our application inside a client provider that is a clerk provider so inside the app router what we can what we can do we can go inside our layout.js TSX file and here what I can do I can wrap my application this application inside a clerk provider that is provided by the package that we install so import clerk Provider from at at work next.js and let me wrap my whole of the application inside this clutch provider and the beauty of this clerk package is is that we do not need to pass in any keys or something like that here though we can do do so but it automatically reads them from the environment variable that is these two environment variable it automatically reads them and now we are going to create in a couple of pages for the sign in route and for the sign up route so for that let me go to the app router here and here I would be creating in our new file called page.tsx and that should be inside a folder called sign up and inside this folder I am going to create in an optional catch-all route folder that would be like box box bracket open and then dot dot sign up closing in the box brackets and then inside this folder I am going to create a new file called page.tsx so this optional catch-all route means that even if you go to the index sign up route we would be rendering out this page.tsx file and anything beyond that also inside this page.tsx file let me create a functional component called sign up page like this and if you save this application and now if you go to the sign up route we see that we are on this sign up page here so if you go to home we have the sign up page and now in a similar way let me create in the sign in page so again in the app router let me create in a new file directory so let me call it sign in then we have a folder here that is Dot sign in it is again an optional catch-all route and then the page.a6 file like this and again we would be creating in the same type of functional component called sign in page so let me save the application so here we have the sign in page and sign up page both working so now to render out the UI that is provided by a clerk what I can do I can go into inside my sign up page and here what I can do I can import something from the package that we just installed so I can say import something from at the next JS and here I would be simply importing in the sign in component or the sign up component and I would be using the signup component somewhere here so sign up like this so let me save in the application and let me go to the sign up page and we should be like reloading the page here so let me click on sign up so we are on the sign up page and right away we see that we are rendering out this UI here to sign in the user so this is the this is like to create an account that is the sign up page and if you want to have any customization on this thing I would be letting you know in the moment but here also what we can do we can provide an H1 here and let's simply say sign in page or sign up page simply like this so here if you want you can have anything else also and now in a similar way I would be using a sign in component inside the sign in page so here I can simply write write sign in like this and it is automatically imported from next.js from clerk next to next yes and if I go to the sign in page we see that we should be rendering out in the sign in component so here we see that sign in to continue to Unicorn app that is the app we created and we have the sign up page so now to use an email address what I can do I can go to this template temporary mail and let me copy in this email address that is generated for this for this session and I would be simply providing in my email address here and let me provide another password here that is abc12345 and now let me simply click on continue so let me do this so let me save it and here we see that we uh that the clerk sent an email to this email address so that the email could be verified so let me simply check in my temp mail so we see that we get in this notification from the clerk that is this is the verification code so let me copy in the verification code and let me paste it here and it automatically verifies the email so that you do not have a bloated email addresses or a list of bloated email addresses whose email is not verified so now we see that we are like always signed up to the application and if you check in the users here inside this Unicorn app we see that here we have this user here that is last signed in so if we click on this user we see that his email address you can like view his phone number Social account and so on and so forth and now what I want to do I want to protect my application because like currently I can access all the pages that is a dashboard and profile so for that what we need to do we need to create in a new file inside the source folder and make sure you are creating a file inside the source folder and not the app folder and we would be creating in a middleware file here so let me create in a file called middleware dot PS and inside this file I need to import something that is import something that is auth middleware auth middleware from Clerk next.js and let me like increase the size here and now I would be simply exporting it as a default thing here so export default auth middleware and I would simply invoke it and then I would be needing to Simply export in a constant configuration here so const config would be equal to something and here we need to pass in the matcher would be an array consisting of the parts that we want to protect and we do not want to protect so here what I am going to do I am going to copy it from the clerk docs and I would be explaining it to you so here let me paste in this thing here so what it means that we are not going to match any public route but apart from that whole of the application is protected here so as soon as I save this file and if we try to access this dashboard here we see that we are able to access this dashboard thing here but let's try to sign out the user so before signing out the user let me show you one more thing that is how do we show in the user profile button here so for that let me go to the layout.tsx file and here inside the nav bar what I'm going to do at the very last let me show in the user button here so let me show in the user button and it is again provided by cler and it is present only if the user is signed in so this is imported here from clerknick shares that is this component and here we have this button here so if I click on this button we see that we have manage account we have sign out though we have this branding also that is secured by clerk but let it be like this because otherwise you have to pay some dollars so if I click on manage account we see that we have this profile right away here we can change the password we can see the active devices we can see the connected accounts and by connected accounts what we mean that we can sign in or we can connect our Google account also so let me connect in a Google account as well so let me select one of the accounts here to connect to this user so let me click on this thing and here we see that we have this connected account and again we have a list of email addresses and we have the security tab here that simply shows you the password so let me sign out and if I close this button and if I simply log out from this sign out from this application Watch What Happens so we should not be able to see that page here because it directly reverts back to this sign in page and right away what we see here that we are seeing this random URL here that is modern raccoon71.accounts.dev sign in because the application in a hole is protected by this middleware that we created and now to get over this that is this random URL what we need to do we need to create in a couple of more environment variables so for that what I'm going to do I am simply going to copy in and a snippet from the correct documentation that is for the environment variables so these are all like public routes which we need to provide as an environment variable that is the clerk sign in url clerk signup URL which we just created and then after sign in and after sign up so let me restart the application here so let me save this and let me minimize the terminal and let me open in a new tab here so let me do a look close both 3000 and I see that we should be redirected back to localhost forward slash sign in right so we see that we are related back to this localhost 3000 sign in and to prevent this index page that is this home page from sign in uh to show sign up sign in thing that is we want to make the index page or the home page as a public route what we can do we can go to this middleware.ts file and inside this art Middle where we can pass in some options here so here we can simply pass in an array of public routes so we want that our index route should be public so we can Define the public routes like this so if we save this and if you go to the dashboard page we are on the sign in but if we go to the home page we should be like seeing in the sign in page that is this we should not be seeing in the sign in uh sign in redirect but if you go to the dashboard page we see that to access the dashboard page we need to sign into the application so let's simply sign in using continue with Google because we connected one of the accounts here and this was this account that we connected and if I use this account we see that we are directed back to the dashboard page that is this page so now to show in the user profile what we can do we can use another component from clerk that is provided to us so we can go to the profile page and inside the page.tsx file what I can do after this H1 I can simply display in the user profile that comes in from clerk next.js so if I save this we see that inside this profile page everything which was present here that is inside this manage account we can display that information as well just in case if you want so let me try to sign out from this application once again we are on the sign in page again and here let me click on continue with Google again and let me create in one more account here and we see that we are back to our index page because inside this env.local file we provided in this URL that is after sign in url that is when the user signs in we need to rewrite them back to the Index P so therefore we are related back to the index page and now let's let's uh let's talk about these two buttons which are present here that is the sign in button and the sign out button so if I go to the layout.tsx file we see that we have these two buttons here that is the sign out button and sign in button let's say that you do not want to display in this profile uh thing here you simply want to click on a button let us sign out and the user should be signed out from your application so how how would you do that what you need to do you need to import one more component from Clerk and that is the sign out button so sign out button sign out button like this and what I need to do I need to use this sign out button to wrap this button that I created sign out button like this and I need to wrap my sign out button inside this sign out button so now we see that the user is logged in because we see this user profile image but as soon as I click on sign out we should not be seeing that image here because the user is logged out so this is how easy it was to sign out the user and let's say you want to also handle the sign in button but you do not want to redirect the user to the sign up page so for that we also have one more component here and that is called sign in button like this so let's use the sign in button and let's wrap in the sign in button inside that component so this should be like a sign in button like this that's all what you need to do so now once you click on the sign in we should be redirected to the sign in page but what if we wanted to open it as a model in on the index page itself so we do not want to redirect the user to the sign in page so what we can do we can simply pass in a mode here called and it should be model not the redirect so if I do this if I save this and if I click on sign in we see that now we have a model here we are on the index page but we are simply displaying in the module here and if I click on continue we see that we are on this page here and we are signed in here and now if you want to display in the user ID that is who is currently signed in so what we can do let's go to the index page that is this page.tsx file we can use a couple of things so since we are using server component so we can simply export this default function as an async function like this and here what we can do we can simply say cons to something equal to auth like this we are not using use auth or something like that because if you are doing use something then it should have been a client component but since it's a server component so we are simply directly accessing it as auth here and it it's provided by Clerk next.js and here you can get in the user ID like this and if you simply want to get in the user ID I would highly recommend that you simply use them the auth thing because there is one more function that is called current user so let me simply do that as well so count something equal to current user and here we need to avoid this await this current user and it returns us with a user here so this should be like user like this and this auth does not is not an is not a promise so we can directly use this user ID so what I can do after this H1 I can simply display in some free tags and inside these free tags I would be simply going to do Json dot stringify an object comma null comma two and firstly let me simply display in the user ID here that is coming in from the auth thing here so if I save this we should be seeing in the user ID here that is the current user ID that is present inside our clerk dashboard so if I go to my clerk dashboard so if I go to user users here so this user should be having an ID so view profile so this user ID is this user ID that we see here and if I simply render out the user here let us this user so if I do this we should be getting back the details of the user as well and since this user has two connected accounts that is one is the username and password account that is this email and password and this is a connected Google account so therefore we are going to see two email addresses here that is the email address this one as well as this email address also and we also have a primary email address ID that is this email address ID and this belongs to this email address that was like initially used to sign up though you can like simply change in the primary email ID as well but that would be a part of another video so this is how we can get the user and auth inside a server component what if we want to get in a get in these details that is this user inside uh client component but before that let me simply sign out from this application so let's create another client component here directly inside this thing so let me create in a new folder inside the app router not inside the app router but outside the app router so inside the source folder let me create in a components folder and inside this components folder let me create a new file called let's say test dot TSX so RFC so test component and this would be a client component that is we are using it as a client component so we have this thing here so let me render out it somewhere here inside the index page so let me go to the index page and just before json.stringify I'll just have to click off let me provide an uh div here and this should have a class name with a border thing here and let's also give it a padding here and let's simply provide an H2 here called client component just to make it sure that we are rendering out a client component and this would be a test component that we just created so if I save this we see that inside this box we are inside a test component so if I go to my components file here that is this test component if you want to use the auth thing we cannot use this thing here that is if I do this inside this test component we would be right away getting an error that is uh or let me import it first so right away we should be getting an error here inside the application all right so we right away see this error here that is we cannot use this inside a client component and this component cannot be also async because it's a client component so we cannot use these two functions here but instead what we can do we can do something like this that we can use in a hook here that is called use auth that is provided by clerk itself and here we should be having the user ID and inside the state component or what I can do I can simply render out an H2 here that simply displays in the user ID so user ID would be this user ID so user ID like this so let me save this and if I like simply reload the page oh we see that currently we do not have any any user ID here so if there is no user ID what you can do inside your client component so if not user ID you can simply either redirect or you can display in some else some different thing that is H2 not logged in something like this we need to return this thing turn so we see that we are not logged in but as soon as I sign in using the email address we see that we have in our user ID inside the client component as well all right so this is about the client components so in the similar way if you want to handle the routes inside the API folder you can do that very easily you can go inside your app rout app router and you can create a new file called route.tsx inside in the API folder so let me directly try to access the API route so let me call it route.ts like this and here what I'm going to do I'm going to export in default async function called get and here it takes in the request that would be of type of next request and let me increase the size and then we have the prems which would be of type of any and then what I want to return I want to return nextresponse dot Json and message let's say authenticated and hello world simply like this so this route is automatically protected so if I try to go to this route here so let me simply go to this route in another tab here that is localhost Port 3000 forward slash API so we should be seeing this thing here all it is not working maybe I've stopped the application sir detected a default export all right so this shouldn't be a default export it's an async function right away so let me reload the page so we get this message here that is authenticated hello world but as soon as I log out we would be like redirected or we would be getting a 404 error that is you're not able to access this route so let me simply click on sign out or this page is not loaded here let me click on sign out and we see that we cannot hit that end point and we are redirected back to the sign in page so let me click on continue here to sign in the application and now let me show you a couple of more things that is uh if you want to get in the user here what I can do I can again use these two variables or these two functions here that I used here inside the server component that is user ID inside this route file also so let me use them so let me import the auth thing and import the current user and I can simply log in the user ID and the user as well as user ID comma user dot let's say let's say email primary email address ID let's say so because if there is no user we can like throw an error but let's do it this way so if I try to hit this end point once again that is forward slash API we should be getting these two values here inside our terminal so we see that we have the user ID we have the primary email address ID as well so this is how easy it is and now let me show you one more thing and one last thing so let's see if you want to display something depending on whether the euro is logged in or not so what we can do we can Import in a couple of things so from this thing here that is from blur that is signed in and signed out so signed out like this or a better approach to use this would be inside the layout file where I display this sign in and sign out button because like currently the user is authenticated and still we see see these sign and sign up sign up sign out buttons so what I can do I can go to my layout.asx file and I can wrap these things that is show these buttons that assign and sign up sign in signate button only if the user is locked out so what I can do I can say sign sign signed out so signed out from Clerk so if I am signed out then only show sign in sign up and the sign in button that is these buttons so if I save this we should not be seeing these buttons here we are only seeing the sign out button but if I am not signed in or if I'm signed in only then show these two buttons see that these these buttons here that is dashboard profile and sign out so let me sign out the applications or sign out from the application and let me wrap this these buttons inside signed in that is if I'm signed in then only show the dashboard button the profile button and in a similar way only show the signed signed out button only if I'm signed in so signed in then only show in these two things that is the sign out button as well as the user button so let me save this so now I only see sign and sign up sign in so let me use in the model here so let me continue and now I only see the dashboard profile sign out and this user button here so I can access these routes here so now let me show you one last thing and that is how do you customize these things that is this customize this model here so if I go back inside this sign in button and if I use in this sign in thing here so let me go to the sign up thing here and let me go to this thing here so let's see that how do we how can we customize this thing so it is pretty simple to do we need to go inside the layout folder that is inside the layout folder so what I'm going to do I'm going to Simply wrap my HTML element here and here inside this clerk provider what we need to do we can provide in something like the appearance prop here so appearance would be an object here containing a couple of properties for Simplicity let me simply provide in the variables here as a as an object containing the color primary so here you can see that you can simply like choose different variation or different shades for different purposes so here I am going to provide in the color primary so let's say I'm providing in red here so as soon as I do this we see that everything is turned to Red here and you can provide in your custom x value here and let's see for the cart radius card water radius I do not want to have a rounded border radius I want to Simply have like a like a 90 degree edge here not the Border radius or the Border area should be zero so what I can do inside appearance apart from variables what I can do I can use elements here and here I can use in the card element and then here what I can do I can simply say border radius would be zero if I do this we see that our border radius has changed to zero and this not only applies to the sine of sign in but sign up sign in components but instead if I simply sign into the application and all right so I need to sign into the application if I go to this profile page we see that even this component does not have a border radius though we see a shadow here but we can also get rid of the Shadow also so like this component also does not have a border radius and we can like simply disable in the Box Shadow also for this card so we can say box Shadow would be none so if I save this we should not be having any box Shadow here so we can see that we do not have any box Shadows here in any of the components we can display our own border to these cards so we can simply say border would be let's say 1 pixel solid gray and this is like plain CSS here which I'm doing here so if I do this I see that I am having this border radius or like the Border here on individual components so guys that's all about this video so if you have liked the video do hit the like button and if you haven't subscribed to the channel do subscribe to the channel so thank you bye Tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 494

Keywords: mafiacodes, nextjs auth, next js authentication, next js clerk, next js clerk auth, clerk nextjs, user management, next auth, next auth google one tap

Id: rC9m-rVsyf8

Length: 30min 24sec (1824 seconds)

Published: Tue Jun 13 2023