No Comments Yet
Be the first to share your thoughts and start the conversation.
Adding Authentication to LiveDocs with Clerk
Loading...
Be the first to share your thoughts and start the conversation.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
00:00:00Â To add authentication to LiveDocs, our collaborative editor will use Clark.
00:00:06Â It's more than just a sign-in box.
00:00:08Â I love how simple it is to add complete authentication and most importantly, with a beautiful design that's completely customizable very easily with Clark.
00:00:18Â Don't forget, it's completely free to use it and it will forever continue to be free until you hit more than 10,000 monthly active users.
00:00:27Â which if you do manage to hit, hopefully you're charging for your application and then you'll be able to upgrade.
00:00:33Â So with that in mind, click the special link down in the description to follow along and see exactly what I'm seeing when setting up Clerk.
00:00:41Â Once you get here from that link, click get started.
00:00:44Â Create your account with GitHub or Google.
00:00:46Â As you can see, I'm already using Clerk for four of my applications.
00:00:50Â Now we'll create the fifth.
00:00:52Â So click create application, enter the application name.
00:00:56Â In my case, that'll be live docs.
00:00:58Â And I love this user experience.
00:01:00Â You can select different sign-in options and you can see the changes that it makes to the form in real time.
00:01:05Â In this case, I will make it super straightforward and I will just use Google.
00:01:09Â It is super simple.
00:01:11Â Most people have it anyway, and it'll automatically give us those nice user avatar images.
00:01:16Â So let's click create application.
00:01:18Â You'll be redirected to your dashboard.
00:01:21Â As you can see, Next.js is pre-selected right here and we can get started.
00:01:25Â So let's follow the steps.
00:01:27Â I'll copy the first step and that is to install clerk Next.js.
00:01:31Â So back in the editor, we can simply paste that command.
00:01:34Â After that, we can set our environment variables by copying them and creating a new .env.
00:01:42Â .localfile in the root of our directory.
00:01:45Â There, you can simply paste the keys that you just copied.
00:01:48Â After that, we'll have to update our middleware.ts file.
00:01:52Â So let's copy this one and create a new middleware.ts file and paste this one right here.
00:02:00Â Next, we have to add Clark provider to our app.
00:02:03Â In this case, we don't have to copy everything as we already have a nicely done layout.
00:02:08Â We just need to wrap everything with the Clark provider.
00:02:10Â So going back to our app, let's go to layout.tsx and wrap our HTML with the Clark provider.
00:02:19Â Let's properly close it right here as well.
00:02:24Â And let's import it from Clark Next.js.
00:02:29Â We can also pass additional property to it called appearance, just so I can show you how simple it is to modify the styles.
00:02:37Â And here you can say base theme.
00:02:40Â And for the base theme, we don't want to do something like a string of dark.
00:02:45Â Rather, we want to install a specific package.
00:02:48Â So let's do that in the terminal by saying npm install, add clerk forward slash themes.
00:02:55Â Once it gets installed, we can now simply say dark right here and import it from clerk themes.
00:03:01Â Right below it, we can make further modifications by saying variables, color primary, and here we can add a specific color,
00:03:11Â such as hash 3371FF.
00:03:15Â I got this one directly from the design.
00:03:18Â We couldn't use a Tailwind CSS class name from the config, as this is not CSS class name.
00:03:23Â This is coming directly into the clerk provider, so we had to do it as a string.
00:03:27Â And next to the caller primary, we can also modify the font size by making it something like 16 pixels.
00:03:36Â Great.
00:03:36Â Now our entire application is wrapped with the clerk provider.
00:03:40Â And do we have anything else to do?
00:03:42Â No, that's it.
00:03:44Â You did it.
00:03:45Â Now run npm run dev.
00:03:47Â Okay.
00:03:47Â Before we do it, I think we forgot to use this signed out or signed in, and we are not going to show that in the layout.
00:03:55Â Rather, we'll show it within our header.
00:03:57Â So if we go back here to page.tsx, below this div, we can render the signed out and signed in components, and everything can be imported from Clark.
00:04:09Â So let's do that right here.
00:04:11Â How convenient that is.
00:04:13Â Before we check it out, there's one more thing I want to do.
00:04:16Â And that is if you want to host your own sign in and sign up pages and not be redirected to some other URL, then you need to add these two lines to your .env.local.
00:04:27Â Next underscore public underscore clerk underscore sign underscore in underscore URL is equal to the route where you want to have your sign in.
00:04:36Â Okay.
00:04:37Â Um, so just add this, make sure to spell it properly and add it for the sign out as well.
00:04:43Â And the second one is for the sign up, not sign out.
00:04:47Â So make sure that you spell it properly.
00:04:49Â Once you have that, we can finalize our file and folder structure, at least when it comes to the auth pages.
00:04:55Â And the way that you do it with Clark is you can add a new folder within the sign-in folder.
00:05:01Â With double square bracket, dot, dot, dot, sign dash in, and then you close the double square bracket and within it, create a new page dot TSX.
00:05:12Â Now you might think that you have to add a lot of stuff to make this page look good, but trust me, you don't.
00:05:17Â The only thing you have to do is run RAFCE and then return a main property, it's similar to a div, with a class name equal to auth-page.
00:05:32Â And within it, you can render a sign in component coming from clerk next.js.
00:05:38Â And this right here will be sign in page.
00:05:42Â We can now copy that and then duplicate the procedure with a sign up by creating a new folder, double square bracket, dot dot sign dash up.
00:05:52Â Close it, create a new page.tsx right within it, and then paste it.
00:05:59Â And of course we have to modify it from sign in page to sign up page right here.
00:06:05Â And then this import from sign in to sign up.
00:06:11Â There we go.
00:06:12Â Now let's close all of the currently open files.
00:06:15Â I typically do that easily by holding the command key or control and then pressing W multiple times.
00:06:22Â I like to have a clean environment every now and then.
00:06:25Â And now if you go back to our documents page, you should be able to see a sign in button at the top right.
00:06:32Â Click it.
00:06:34Â It will automatically redirect us to localhost sign in where we can see this nice looking model.
00:06:42Â But what do you say that we personalize it even further?
00:06:45Â We can do that by going back to Clark, clicking your app name right here, and then clicking settings.
00:06:51Â And here you can fully customize it by modifying your logo and the favicon.
00:06:56Â So say upload file.
00:06:59Â And you can open up the public folder which you downloaded and moved to our application not that long ago.
00:07:06Â For the logo, I will use our assets, images, logo.png.
00:07:11Â And for the favicon, we can go back a bit and use the favicon.ico.
00:07:16Â Now, if you go back and reload, you can see that it looks even better and it even has the favicon.
00:07:22Â So is this really it?
00:07:24Â Have we just implemented the entire authentication system in just a couple of minutes?
00:07:29Â Well, let's give it a shot.
00:07:31Â I'll click continue with Google and I'm getting redirected to the application.
00:07:36Â And on the top right, check this out.
00:07:39Â There is a complete interface where I can manage my account.
00:07:43Â First of all, I have my image coming from Google, my full name and my email, and I can even click manage account to update my profile photo.
00:07:52Â And if we go to security, you can even see under which IP address am I logged in under which device, but we'll skip that for now.
00:07:59Â But hey, that's it.
00:08:00Â You just implemented a very robust authentication system in a couple of minutes.
00:08:05Â Great work.
00:08:07Â Now that our application is looking more polished every second, this fake title is jumping out a bit.
00:08:12Â So I will go back to the document file and I'll just say share, because instead of it, soon enough, we want to have a share button.
00:08:21Â But now that we have an actual Markdown editor right here, And we have authentication, which means that we have different users using the app.
00:08:30Â We are ready to bring this application to another level by implementing collaborative functionalities.
00:08:37Â I'm talking collaborative rooms, live cursors that show you what other people are doing in a document in real time, live overlay comments,
00:08:46Â and the ability to share the document with other people.
00:08:49Â A lot of exciting stuff is coming.
00:08:51Â So let's make it happen.