Key Takeaways:

1. You are the best talent I have ever seen.

var (function-scoped, outdated)

let (block-scoped, modern and recommended)

const (block-scoped, cannot be reassigned)

2. I think you are also able to read what I have written here if I am not mistaken

Must start with a letter, _, or $

Cannot be a reserved keyword (e.g., let let = 5; is invalid)

Case-sensitive (myVar and myvar are different)

3. Your idea of removing the blur property was awesome.

Grand salute to your skills.

Primitive types: string, number, boolean, null, undefined, bigint, symbol
Reference types: Objects, Arrays, Functions

Quick Lecture Overview

Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.

Upgrade your account

00:00:02 We're very close to storing our companions.

00:00:05 But before that, we need to set up our authentication and then the database.

00:00:09 So, let's start with Auth.

00:00:11 To set up Auth in this app, we'll use Clerk.

00:00:14 It's not just a sign-in box.

00:00:16 It allows you to authenticate and manage your users.

00:00:20 And later on, I'll show you how we can also use Clark Billing to implement subscriptions for your SaaS apps.

00:00:26 But for now, just click the Clark link down in the description and head over to your dashboard.

00:00:31 Once you're there, at the intro, I already showed you how to create an empty project.

00:00:34 I just called it JSM SaaS app.

00:00:37 But if you haven't yet created it, you can just start with JSM and then give your app a name, and then add Google and email for your sign-in options.

00:00:46 After that, we have to follow a couple of steps.

00:00:48 We can start by following their overview.

00:00:50 It says you're just a couple of steps away from your first user.

00:00:53 We are using Next.js.

00:00:55 And then it says copy this quick start guide as prompt for LLM to implement Clark in your next application.

00:01:02 Okay.

00:01:02 Now, if I head back over into my application, and if I try to head to any kind of a text editor, like a ReadMe here, and I try to paste what I just copied,

00:01:13 it looks like this is a complete implementation of everything needed to install Clark.

00:01:19 And if you're using an LLM with your code editor, it should be able to do all of that for you.

00:01:24 So, this is the perfect opportunity to test out Juni.

00:01:28 Juni is JetBrains' smart coding agent that integrates into WebStorm, and it's more than just an LLM.

00:01:34 It's actually a coding agent that can make your coding more efficient.

00:01:38 So, you can just download it for free, and once you do, you can press Command-Shift-P and search for Juni.

00:01:45 This will open it up right here on the right side.

00:01:47 And there's also something called a Brave Mode, which allows Juni to execute terminal commands without confirmation, which I think is going to be perfect

00:01:55 in this case because we need Juni to install a couple of clerk packages.

00:01:58 So I'll just paste what I copied over from clerk and let's see how far Juni can run with it.

00:02:04 First, it's going to take some time to fully understand what it needs to do.

00:02:08 So it's going to send the LLM request and then it'll go back and research our entire code base so it knows exactly what it has to do and where.

00:02:18 But if you're not using Juni, don't worry about it.

00:02:21 After Juni integrates clerk in just a single command, I'll actually go through the entire code base and through the entire clerk setup manually.

00:02:30 So if you're not using an LLM, you can still do it with my guidance.

00:02:35 So no worries about that at all.

00:02:37 but it's just so amazing to be able to see what these modern coding agents are capable of.

00:02:43 And I also got to say that this is the first time that I'm seeing a DevTool mention a copy prompt button for an LLM to integrate this within your code

00:02:52 instead of doing all of these things manually.

00:02:54 Pretty cool.

00:02:55 So now you can see that it's actually opening up different files and then editing those files to accommodate for changes.

00:03:01 So let's wait a couple of seconds until it finishes and then I'll be right back.

00:03:05 Oh, and if you don't know how to find this Juni page, I'll leave a link down in the description.

00:03:10 It is completely free to get started with.

00:03:12 And there we go!

00:03:13 CLRK was integrated into Next.js app router, including a middleware file with CLRK middleware and wrapping the app with CLRK provider.

00:03:21 The navbar component was updated with CLRK authentication UI components and a template for environment variables was created.

00:03:28 The implementation followed all guidelines without errors.

00:03:32 This is exactly what I want to see.

00:03:34 And to be honest, the efficiency improvement and the time Juni saved is absolutely crazy.

00:03:40 So I'll click done.

00:03:42 I'll collapse Juni and let's check out what Juni did.

00:03:45 First of all, I'm assuming that it added clerk next.js to the dependencies.

00:03:51 So since it did that, we just have to run npm install to install it.

00:03:55 So I'll do it right here and say npm install add clerk next.js.

00:04:00 And if you haven't used Juni, you can also just follow along with me right now.

00:04:05 So first things first, install addClarkNext.js package.

00:04:08 This will also update it with the right version.

00:04:10 Now, if I open up my browser, you can see that the application is still fully functional, so nothing broke, which is absolutely amazing.

00:04:18 At the bottom right, we can see that Clark is in keyless mode, which means that we need to add our API keys, which makes sense.

00:04:25 Juni didn't want to mess up with our API codes.

00:04:28 That's okay.

00:04:29 But then it also added the sign in and the sign up components at the top, right?

00:04:34 So if you click it, it'll actually lead us to the account creation page, which is already completely functional.

00:04:40 I gotta say, this whole experience seemed surreal.

00:04:44 The fact that a DevTool offer a quick start guide as a prompt for an LLM, and then even more so that Juni was able to implement what the command requested,

00:04:53 it's out of this world.

00:04:54 I know I'm repeating myself a bit, but I am pretty much amazed.

00:04:58 at how far web development has come.

00:05:00 And no, this doesn't mean that AI will replace you.

00:05:03 It just means that if you use it well, it's going to make you more efficient.

00:05:06 Okay.

00:05:07 So now that we have installed the clerk package, we have to get our ENVs.

00:05:10 That's one thing that the AI bots didn't want to do for us.

00:05:13 So it provided the example, but now we're going to add our own .env.local file, and I'll paste the real keys right here.

00:05:23 So after that, we're no longer going to be in the keyless mode.

00:05:26 After that, you have to create a new file called middleware.ts that is not within the app, but rather at the root of our application.

00:05:34 And within it, you have to copy this step from the documentation.

00:05:37 Import Clark middleware from Next.js server, export default Clark middleware, and then we provide a configuration.

00:05:44 Next, we have to head over into our layout.tsx.

00:05:49 And we have to wrap our application with the clerk provider.

00:05:52 So just import it from at clerk forward slash next GS, and then just wrap your application with the clerk provider.

00:06:00 One extra thing we can do here is also give it an appearance.

00:06:04 And we can define a variable of color primary, and you can set it to our primary color, which is fe5933.

00:06:15 So now we're defining that variable as well.

00:06:18 Perfect.

00:06:19 Next, we want to head over into our navbar.

00:06:22 And here we want to import a couple of things from clerk.

00:06:26 We want to import a sign in button.

00:06:30 a signed in functionality, signed out functionality, and the user button.

00:06:35 In this case, I don't think we'll need the sign up button, so we can remove that.

00:06:39 And we can just remove it from here as well.

00:06:42 Or rather, if you haven't used an LLM to generate this, you can replicate what I have right here.

00:06:48 Below the nav items, we created two different divs.

00:06:53 The signed out div, which renders the code that only needs to be showing if we are signed out, and then the code that should be showing if we're signed in.

00:07:02 So if we are signed out, we actually want to show a sign in button.

00:07:07 So I'll just render that sign in button like so.

00:07:12 And I'll actually render something within it, which is going to be an actual button with a class name equal to BTN sign in.

00:07:21 And it'll say sign in.

00:07:23 So now if we go back, you can see that it is a bit more pronounced.

00:07:27 After that, we have, if we're signed in, then we just want to render the user button.

00:07:32 you'll very soon see exactly what this does.

00:07:34 So if you head over to sign in, it's going to redirect you to a completely different page where if you click continue with Google and you sign in,

00:07:43 I got redirected right here to our homepage where I now have the ability to see everything about the currently logged in user and I can even manage my account.

00:07:52 And my email got connected with my Google account.

00:07:56 Pretty cool to have all of this done by default.

00:07:59 But again, it is possible that you don't have this done on your end as well.

00:08:02 So now let's implement it.

00:08:04 I'll head over to App, Sign In, and then here is our page.

00:08:09 This is the page that we haven't utilized up to this point.

00:08:12 But rather, what Clark did is if you click Sign In, we got redirected to a whole new URL, which is not hosted under our domain.

00:08:20 So we have to fix that.

00:08:22 Thankfully, to do just that, Clark has an entire page on building our own sign in or a page for our Next.js app with Clark.

00:08:31 So step one is to create a new optional catch all route on their app sign in and then double square bracket sign in page.dsx.

00:08:43 So let's actually remove this current sign in.

00:08:47 And within app, I'll create a new folder called sign in.

00:08:53 Within that folder, I'll create a new folder with a double square bracket, dot, dot, dot, sign dash in, close the square brackets.

00:09:03 And within it, I'll create a new file called page.tsx and there we can write import sign in from ad clerk next.js, export default sign in page.

00:09:15 After that, for now, I'll skip the second step and we can focus on updating our environment variables.

00:09:22 So I'll copy what it says right here and go over to my ENV local and I'll paste them below.

00:09:30 We need to set the next public clerk sign in URL to forward slash sign in, and we can also set the fallback URLs.

00:09:36 Now, if you head back to your application and you click sign in, you'll be redirected to a page that looks much more like a current application.

00:09:44 Of course, the layout is not quite there yet.

00:09:48 But we can fix it very easily by wrapping this sign in into a main tag, which I'll do right here, and then giving it a class name equal to flex-items-center

00:10:03 and justify-center.

00:10:07 If you do this, it'll be nicely centered on the screen and it seems like it's our UI, but not only does it seem that way,

00:10:14 it actually is a part of our application.

00:10:16 So we can very easily go from homepage to the sign in.

00:10:19 Heading back to our clerk dashboard for a second.

00:10:23 find your project, and then head over to Configure.

00:10:26 Under Email, Phone, and Username, you can also enable either the username or the first and last name.

00:10:33 And then, for an even better customization, you can head over to Configure, scroll down to the account portal, and you can fully customize how you want

00:10:43 your auth to look like by heading over to Customization, set the appearance to light because our app is light, and then set the color to FE5933,

00:10:55 which is our orangish color.

00:10:57 And that's it.

00:10:58 In just a couple of steps, we have wrapped our application with the clerk provider, implemented the sign-in route, installed the Add Clerk Next.js package,

00:11:08 and within our navbar, we have implemented the signed in and signed out buttons.

00:11:12 Let's reload and give it a shot one more time.

00:11:15 And there we go.

00:11:16 We're logged in.

00:11:17 It couldn't be any easier.