So before we wrap up our Outh Masterclass, I want to talk about this video's sponsor, Qlrk. You've probably seen me use Qlrk in a lot of tutorials that I have, primarily because it's so easy and so fast to implement. So before we wrap up, I want to show you how quickly we can do with Clerk what took us seven hours to do with NextAuth. So I'm gonna give my application a name Auth Masterclass or Auth Tutorial. I'm gonna select email address, Google and I'm gonna select GitHub as the options to log in.
I'm going to click create application and I'm going to copy my environment keys. So I'm going to go ahead in this new project that I created and I'm going to go ahead and create a new .environment file like this .environment and I will paste those keys here. Then I'm going to go ahead and continue in documentation where I have to install this package. So I'm going to go inside of my terminal here and I'm going to install the package. We already set the environment keys so we don't have to do that.
All I have to do is add the clerk provider inside of my app layout. So let's go ahead and do that here. I'm going to go inside of app layout right here. I'm going to import the clerk provider and I'm simply going to wrap the entire app inside of clerk provider like this. Let's go ahead and see what I have to do next.
I'm going to go ahead and add a middleware. So I'm going to create a new file inside of my project called the middleware. And I'm going to paste the snippet from the documentation right here. Now I'm gonna go ahead and skip to the bottom to create custom sign-in and sign-up pages. So I'm gonna go ahead and create the following folder structure here.
Inside of my app folder, I'm going to create a new route called sign up and then I'm going to create another catch all route, sign up. And inside, I'm going to create page.vsx. And in here, I'm going to paste this code snippet like that. I'm gonna copy and paste this and rename it to sign in and I'm gonna rename the inside route to sign in as well and then I'm gonna go ahead and copy the other snippet for the sign in like this And then I have to update my environment variables with those new routes which we've just created. So let me paste that here.
And now let's go ahead and let's run our app. So make sure that I have npm run dev. I believe I already have that right here. I'll refresh my page right here. And I will be redirected to the login right here.
There we go. I can use GitHub, I can use Google, or I can sign up using the email address and the password. And this will come with validation, with two-factor authentication, email verification, absolutely everything. So let me go ahead and create a new GitHub account here. And now let me show you how easy it is to fetch the current user session.
So I'm going to go inside of my app folder, I'm going to go inside of page.esx here, I'm going to remove absolutely everything from here and the only thing I'm going to render is my user button component. So let's go ahead and import user button from at clerk slash next JS. And let's save this right here. And as you can see, there we go. I have a user button and from here I can manage my entire account by changing my email I can even connect a new linked account I can add a password I can check my active devices I can delete my account and inside of my dashboard here I can control how many users I have and I can also ban the users, impersonate users, visit their profile and also delete the users.
And let me show you how we can easily create a public route. For example, I'm going to create a new folder public right here and page.vsx and I'm simply gonna call this a public page with a div. This route is public to everyone. All I have to do is go inside of my middleware and I simply have to add public routes slash public. That's it.
So now what I can do is I can log out from my account here and demonstrate to you that I can go directly to localhost 3000 slash public, and there we go. This route is public to everyone, but if I go to any other route, I have to log in again. So as you can see, it took us 5 minutes to implement with Qlrk what took us 7 hours to implement with NextOut. So that's why I love to use Qlerk inside of my tutorials. It's extremely simple to implement, it is extremely secure and it is an absolutely great deal and I'm very thankful that they've been sponsoring my channel from the earliest videos and allowing me to create so much free content.
And now let's go back to wrapping up our tutorial.