1 00:00:01,080 --> 00:00:04,240 So for the authentication we are going to be using Clark. 2 00:00:04,240 --> 00:00:09,680 And there will be a link in the description that you can go ahead and sign up because we'll be creating 3 00:00:09,680 --> 00:00:10,680 an application. 4 00:00:11,000 --> 00:00:17,960 So Clark is the authentication provider that will be using that will allow us to implement it, implement 5 00:00:17,960 --> 00:00:20,280 the authentication in two minutes. 6 00:00:20,440 --> 00:00:21,080 Exactly. 7 00:00:21,080 --> 00:00:22,480 Not more than two minutes. 8 00:00:22,480 --> 00:00:28,360 We're going to get a bunch of different really cool components such as sign in pages, sign up pages, 9 00:00:28,560 --> 00:00:32,000 user button, user profile which would look like this. 10 00:00:32,160 --> 00:00:34,800 And let's try to see it immediately. 11 00:00:35,200 --> 00:00:39,400 I'll visit my dashboard and try to create a new application. 12 00:00:39,640 --> 00:00:42,680 I will call this code Sync. 13 00:00:42,880 --> 00:00:47,480 And I think I'll just make them as a one word for the sign in options. 14 00:00:47,480 --> 00:00:53,440 I'll go with email Google, and since this is related to developers, I'll go with the GitHub option 15 00:00:53,440 --> 00:00:53,920 as well. 16 00:00:54,200 --> 00:00:56,200 Let's say create the application. 17 00:00:59,240 --> 00:01:01,000 We would like to go with Next.js. 18 00:01:01,000 --> 00:01:06,570 So let's go ahead and visit each step one by one I'll open up my terminal. 19 00:01:06,930 --> 00:01:07,970 Clear this up. 20 00:01:08,330 --> 00:01:13,250 And like, we have two different terminals. 21 00:01:13,690 --> 00:01:17,930 We got some warnings previously, but I think currently we're good to go. 22 00:01:18,570 --> 00:01:21,850 Here, I'll just paste this in while it is installing. 23 00:01:21,850 --> 00:01:27,650 We can go ahead and get our environment variables and put it into a file called dot env. 24 00:01:27,930 --> 00:01:28,370 Right. 25 00:01:28,810 --> 00:01:31,050 So actually dot env dot local. 26 00:01:32,730 --> 00:01:34,410 Paste this in and save it. 27 00:01:34,450 --> 00:01:36,010 We can shrink the terminal. 28 00:01:36,370 --> 00:01:39,810 The next step is to create a middleware file. 29 00:01:40,250 --> 00:01:44,010 They say if you're using the source directory it should be inside of it. 30 00:01:44,050 --> 00:01:46,810 If you are not using it it should be under the root. 31 00:01:47,010 --> 00:01:48,090 So we're using it. 32 00:01:48,490 --> 00:01:53,410 We will create inside the source directory and paste this in. 33 00:01:53,450 --> 00:01:59,530 This is some code that is needed for Clark to be able to implement the authentication clearly without 34 00:01:59,530 --> 00:02:00,210 any issues. 35 00:02:00,210 --> 00:02:00,650 Right. 36 00:02:00,690 --> 00:02:03,090 So we don't need to worry about this for now. 37 00:02:03,330 --> 00:02:07,530 We'll be customizing it later in the video, but for now just leave it as it is. 38 00:02:08,050 --> 00:02:11,180 Then the next step is to basically use it. 39 00:02:11,220 --> 00:02:15,260 We are going to wrap our entire application with the cloud provider. 40 00:02:15,380 --> 00:02:20,380 And when we are talking about the entire application, we are talking about the root layout, right. 41 00:02:20,500 --> 00:02:22,140 So let's go ahead and copy this. 42 00:02:22,740 --> 00:02:28,420 And we can visit that file under the app layout where we have the root layout. 43 00:02:29,300 --> 00:02:31,620 We'll just wrap our application with it. 44 00:02:33,700 --> 00:02:37,260 And let's try to import it which is coming from Clarke Next.js. 45 00:02:37,900 --> 00:02:40,700 So we have our entire application inside. 46 00:02:40,980 --> 00:02:45,420 In our case we only have the home page and we can add a bunch of different components. 47 00:02:45,580 --> 00:02:48,300 So for now I'll just delete everything that we had here. 48 00:02:48,340 --> 00:02:49,620 I'll say class name. 49 00:02:49,660 --> 00:02:50,060 Oops. 50 00:02:50,700 --> 00:02:53,740 Let's say margin of ten from all directions. 51 00:02:53,740 --> 00:02:57,540 And now we can get actually I'll visit the documentation. 52 00:02:57,540 --> 00:02:59,540 I'll just grab what we have here. 53 00:03:02,100 --> 00:03:03,180 I'll paste this in. 54 00:03:03,180 --> 00:03:06,380 Let's try to import all of them and then I'll walk you through it. 55 00:03:07,220 --> 00:03:12,580 And I don't need to really walk you through it because this feels like an English sentence, right? 56 00:03:12,620 --> 00:03:16,670 We just say if user is signed out, show them a sign in button. 57 00:03:16,790 --> 00:03:20,190 If user is signed in, show them a user button, right? 58 00:03:21,070 --> 00:03:22,710 Let's try to see this in action. 59 00:03:23,510 --> 00:03:24,390 We are signed out. 60 00:03:24,430 --> 00:03:26,150 We can see a sign up button. 61 00:03:26,190 --> 00:03:27,190 Let's click to it. 62 00:03:27,790 --> 00:03:30,030 We will be taken into the sign in page. 63 00:03:30,070 --> 00:03:31,830 This is what we have built, right? 64 00:03:31,870 --> 00:03:35,070 We had the GitHub and Google sign in options. 65 00:03:35,070 --> 00:03:38,150 And this is the name that we gave into our application. 66 00:03:38,670 --> 00:03:40,870 Then we have the sign up page. 67 00:03:41,350 --> 00:03:42,270 Sign up page. 68 00:03:42,510 --> 00:03:45,550 Let's try to log in with our Google account. 69 00:03:49,190 --> 00:03:54,230 So once you are signed in we should be able to see the user button. 70 00:03:54,270 --> 00:03:56,310 This is what we have just set in our code. 71 00:03:56,350 --> 00:04:03,310 If you are signed in, show them a user button where we can manage our account or we can log out. 72 00:04:04,310 --> 00:04:09,190 And now that we have signed up, we can see this user in the dashboard. 73 00:04:09,230 --> 00:04:10,310 From the clerk. 74 00:04:11,110 --> 00:04:11,510 Okay. 75 00:04:11,550 --> 00:04:14,590 So that's gonna be it for the authentication setup as well. 76 00:04:14,630 --> 00:04:18,990 Next we would like to set up our database which is going to be convex.