Authentication with Clerk

[00:00:00]
>> Well, so if you think about it, we can start working on the dashboard part that brings in all the journal entries and things like that. But because the journal entries and stuff that are gonna be scoped towards the user, that means we would either have to just make a bunch of mock data right now.

[00:00:18]
And then we have to delete it later to bring in the real data or we can just start using the real data right now, hook up a database. But if we do that, that means we need a user, and if we need a user, that means we need authentication.

[00:00:29]
So this is where I'm just gonna work on authentication. So let's just get authentication out the way. And typically, authentication is just so hard to do, it's honestly a drag if you try to build it yourself. But we're gonna use a really cool service that makes it super easy.

[00:00:43]
I'm now in the boat of never rolling your own authentication any more unless you have a really good reason or you have the best authentication engineers on the planet for some reason at your company, and that's just what they like to do. Other than that, I think you shouldn't roll your own auth going forward because who wants to be a security expert?

[00:01:01]
So, we're gonna use a service called Clerk, I don't know if anybody's ever heard of Clerk, but it's actually pretty dope. So let's go there. So if you go to clerk. .dev, it's by far probably one of the best services I've seen, and I've tried them all out in the last few years.

[00:01:24]
It kind of reminds me of Auth0 in the early days, but even still better than that, Auth0 still took like, I don't know, an hour to set up, this literally takes five minutes or less to set up, it's kind of crazy. So, what we wanna do here is you wanna go make an account on Clerk, it's free, you don't need a credit card.

[00:01:39]
You don't need anything to get started, you literally don't need anything, you just need an account to sign up. That's literally it. So I guess, let me see if I can make a new account to go through the whole flow. Yeah, that's what I do, so you can see I already have some stuff here.

[00:01:52]
So once you make an account, you'll see this right here that says Add application, just click that, click Add application, and it's just gonna walk you through this form. So let's do that. I'll just say Mood v2 since it's my second one and then here you can kind of pick what authentication strategies you want.

[00:02:11]
So, you want people to sign up with email, you want people to sign up with Google. You want people to sign up with their Xero [LAUGH] account or their HubSpot account, you can do that too, you can switch on whatever you want. The cool thing is, if you use one of these third-party or one of these SSL ones like Google, these social ones, you don't need to go configure your own app right now to get started.

[00:02:38]
You don't have to go on Google and configure your own OAuth app, you'll just use theirs for now. In production, you definitely probably wanna configure your own, so when someone gets the Oauth Moto, it shows your app and not whatever they're gonna show. But you don't have to do that right now, it's literally free.

[00:02:54]
So I'm gonna keep e-mail on, I'm gonna keep Google on, and then I'm just gonna click Create Application. And this is a preview of what the form will look like, if you use their form, this is what you'll see. So if you can see if I turn on the phone number, it says use phone either username Facebook ads, Facebook.

[00:03:12]
That's pretty cool. So I was gonna do Google and email, I'm gonna create, click Create Application. And then what you can see here just make sure you have next year selected which by default it already does. Because I don't know if he knows we're doing this or just as soon as everyone's gonna actually ask because it's probably the best react framework out there.

[00:03:29]
But make sure you have that and then copy these environment variables here. So copies environment variables here .env.local. And then what we'll do is go into our app, we'll make a new file. Called .env.local. And we'll just paste that stuff in. So the difference between env.local file and a regular env file, it's just really what Next.js's conventions are.

[00:03:58]
If it sees an env.local file, it'll automatically load those environment and variables into the environment for you. Whereas if the .env file, I don't know if it loads that up automatically for you, I think you would have to load that up yourself using something like the .env package that you have to install.

[00:04:14]
So that's the difference. We'll probably use both because one of the other tools that we use will automatically load up the .env file for the databases, so we'll use both of them most likely, but just know that that's why that's here, it's for that reason. Okay, so once we have that, I'm just gonna show you preview of what the docs are so you kinda know what it looks like and how to get started with it.

[00:04:36]
But we are using Next.js 13, so make sure when you're looking at this that you are aware. But the first thing we wanna do is just install the clerk/nextjs. So let's do that. So I'm gonna head back to my app, I'm gonna keep it running, I was gonna open up a new tab in my terminal.

[00:04:50]
I was gonna say npm, I'm just gonna actually paste what I copied, npm install @clerk/nextjs. Let that thing install. And really, there's only a few things we need to do, one, we need to set up the provider for our entire app, we'll do that in our route layout.

[00:05:12]
The other thing we need to do is we need to set up the sign-up and sign in pages. And then the last thing we need to do is protect any route that we want to protect. And then we're done. That's it, everything else from there is just using any helper functions you wanna use to check to see if a user's logged in programmatically, like when you're making an API call, or you're doing a server action, or some server site data fetch.

[00:05:35]
So it's actually quite simple. So, let's just do the setup for the provider. You only have to import the Clerk provider here and wrap it around your route, it's actually quite simple. So if we go to our route layout, which should be in app layout, you can import from @clerk/nextjs, and you can get the Clerk provider like so.

[00:06:00]
And just wrap it around the HTML here, you don't need to pass any props to it, it's pretty simple. The reason you don't have to pass any props because it's just gonna read those environment variables that we added, so you don't need to pass it anything. Okay. The next thing we wanna do is just.

[00:06:26]
What did you say?
>> Could you share that import statement again?
>> This one? Yeah, here you go. Yeah, question?
>> Are you using a VS Code plug in for that tailwind autocomplete?
>> Yeah, I forgot I had that. Yeah, I have a VS Code plug in for that.

[00:06:41]
Let me see. What was it called? It is called tailwind and Tailwind CSS IntelliSense. Yeah, it gives you autocomplete for Tailwind. I also think when you hit Save, it will shift the order of the classes, cuz some classes in Tailwind, if you put them after another class, work differently, so it will put them in the right order to get the expected behavior.

[00:07:10]
But yeah, it's mostly just for the auto complete, you get some linting too. So yeah, I am using that. It doesn't work all the time though, sometimes you have to do weird stuff too. Like instance, if I start adding a class name here or something, it won't work all the time.

[00:07:24]
So if I say text, you can see right there it's not working. But then you kind of start over and do it again, then it will, so it kind of just depends.
>> If you didn't select Typescript, can you just make the files JSX?
>> Yeah, if you didn't select Typescript, you can do JSX, and that's totally fine.

[00:07:40]
You don't have to use Typescript for any of this stuff, I'm just using TypeScript so people who want to use TypeScript can see an example of what it's like to use TypeScript.
>> Does wrapping the route layout with a provider make it a client component?
>> That's a great question.

[00:07:58]
If you were to take a provider that was made before server components were created, that provider would not work by default because it would be using client side, things like Hooks use provider or use context and stuff like that. But Clerk is on top of things and they've been literally updating their SDKs since Next.js 13 came out and they have made sure their provider works for server components.

[00:08:27]
They follow the guide on the Next.js documentation on how to use providers, which is here. Let's see, somewhere in here, here we go, providers. So they basically follow this guy to make sure that their providers work in layouts and things like that. Whereas by default, you're right, they wouldn't work.

[00:08:54]
But to answer your question more broadly, nothing is gonna transform your component to a client component other than putting the word use client at the top. This is not automatically gonna turn into a client component, you literally have to put that at the top, otherwise you'll just get an error saying this should be a client component.

[00:09:11]
Please put this at the top, please put use client at the top. But yeah, it will never just automatically change your component to be client from server. Cool, any other questions?
>> There's some debate around Tailwind CSS in the chat.
>> I'm happy to enter that debate because I just came around to Tailwind less than a year ago, I had this conversation in the last course.

[00:09:43]
I think when it comes down to just like if you're already gonna write your own CSS from scratch, you might as well use Tailwind. If you don't plan on writing your own CSS from scratch, there's probably better alternatives out there. Find a component library that's already styled, and then use the props on that to change those styles.

[00:10:01]
That's probably a lot better. But I'm now in this point where I'm so opinionated with how I like things to look. I would rather use a component library that's headless that has no style affiliated with it whatsoever, only functionality and then use Tailwind to style it. And then the only thing I'm fighting with is configuring Tailwind which I've read a fight with that than write my own CSS from scratch, so.

[00:10:25]
>> There are some pretty exciting component libraries coming out that leverage Tailwind as well, so.
>> Yeah, it is getting better now. There are some component libs that use Tailwind, so I just think, yeah, Tailwind as a utility. If you think of Tailwind as like a recipe to some meal, like this component library use tailwind, I think is great.

[00:10:46]
But yeah, I think using tailwind just raw by itself, it can feel like, why am I doing this? I don't wanna do this, but it's not that bad specifically because they make the class names sound very similar to the functionality and what you're using, so you can kinda learn it really quick.

[00:11:02]
And even then you don't really need to learn everything. I keep this tab open, that's the component one, but I keep the other Tailwind tab open, actually open it right now. Because I don't remember all this stuff, but it's so easy to look up, I know what I'm trying to do.

[00:11:17]
If I'm like, I need a border, I know that if I go here, it's gonna show me how to do it. I just go straight down to this one example I look at every single time, and I grab it, and I'm done, cuz it's very simple. It's not something you need to be great at, the documentation is good, you just need to know what you need to do, and then you're probably good to go.

[00:11:34]
This is really cool because it's gonna leverage the catch-all routing system that Next.js has. So just a refresher on how catch all works. So what that means is, let's say I go into the sign-up folder, I make a new folder in here, right? And let's say this new folder says this is just me writing scratch code, you don't have to follow along right now if you don't want to show an example.

[00:11:58]
This right here is basically saying it's a dynamic route, so when someone goes to /signup/ anything, I'm gonna call it ID, activate this route. What I could do though is if I don't know how many routes are gonna be after /signup, I could put dot, dot, dot in there.

[00:12:17]
And now it's a catch all route, which means if anyone goes to /signup/anything/anything/anything/anything/anything, show this page. Then I can take it a step further and then I can just put another square bracket around it, and it does the exact same thing of what I just said, but it also includes if anyone goes to /sign up.

[00:12:36]
So that's what a catch-all route is. It's just basically any route that, in this case, will come after sign up, show this page. So we're gonna do that for authentication, that way if anybody tries to go to /signup anything, it's gonna show our signup form, there's just no way around it.

[00:12:52]
Do you have to do that? No, but I guess it's just making sure people don't get messed up. You could also just build your own logic and show a 404 if they don't go to the page that you want, and then have them redirect back to signup. So I think it's just a little easier than setting up that redirect logic, and setting up a 404, and doing all that stuff.

[00:13:11]
Just like, hey, if you go to /signup anything, we're gonna send you to the signup page. So that's exactly what we're gonna do. We're just gonna follow the instructions of what they expect us here to do. So if you look at the sign-up page here, if you're looking at these docs, make sure you're clicking on the one that says app and not pages.

[00:13:29]
We're not using pages, that's Next.js 12, we're using app. So all we have to do is just make a signup folder, and we're gonna do the catch all inclusive, which means double brackets with the signup. So let's just do that. So I'm gonna change my from ID to sign-up like that.

[00:13:50]
Thats a single. [LAUGH] Funny story, I took singing classes before, and I'm not good at it, so [LAUGH] I stopped doing it. And now if you go into this file, you do page.tsx, because again, if you don't add a page, it's not a route. So we have to add a page at the root of a folder in which we want our route to be.

[00:14:13]
So we're gonna add a page here, And all we're gonna do is just import the sign in component from @clerk/nextjs, I'm sorry, the sign-up function, not the sign in like that. We're just gonna make a component here, we'll call it the SignUpPage, like so. Oops. And we're just gonna return the signup.

[00:14:50]
Like that, and it's gonna export default this. I mean, as we don't even need this wrapper, we could probably just return the sign-up component, but you probably want this wrapper, that way you can style this page to make it look like what you want it to look like.

[00:15:01]
If you wanted to style the component itself, there's two ways to do that in Clerk. You can do that on their website where you can style it, but you can also just make your own sign-up component. You don't have to use theirs, you can just make your own and use like their inputs and things like that or call their APIs, so it gets really flexible.

[00:15:21]
We're not gonna do that, we're just gonna use the one that they gave us cuz why not? They already thought about it. So we have that there, so to export default that SignUpPage. So now we have sign up and we're just gonna do the same thing for sign in.

[00:15:35]
So for sign in, make a new folder inside of that folder, got our [[...sign-in]] like that. I'm just gonna just copy this code here cuz it's literally the same code, just instead of SignUp, it's SignIn. And I'm gonna go into there, make a page.tsx. And I'm just gonna paste.

[00:16:05]
I'm just gonna grab everything that says signup. On Mac, you can just do a keyboard shortcut of CMD+Shift+L, and it'll copy everything there. And you can just say SignIn.