Adding Authentication to LiveDocs with Clerk

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.