So for the authentication we are going to be using Clark.
And there will be a link in the description that you can go ahead and sign up because we'll be creating
an application.
So Clark is the authentication provider that will be using that will allow us to implement it, implement
the authentication in two minutes.
Exactly.
Not more than two minutes.
We're going to get a bunch of different really cool components such as sign in pages, sign up pages,
user button, user profile which would look like this.
And let's try to see it immediately.
I'll visit my dashboard and try to create a new application.
I will call this code Sync.
And I think I'll just make them as a one word for the sign in options.
I'll go with email Google, and since this is related to developers, I'll go with the GitHub option
as well.
Let's say create the application.
We would like to go with Next.js.
So let's go ahead and visit each step one by one I'll open up my terminal.
Clear this up.
And like, we have two different terminals.
We got some warnings previously, but I think currently we're good to go.
Here, I'll just paste this in while it is installing.
We can go ahead and get our environment variables and put it into a file called dot env.
Right.
So actually dot env dot local.
Paste this in and save it.
We can shrink the terminal.
The next step is to create a middleware file.
They say if you're using the source directory it should be inside of it.
If you are not using it it should be under the root.
So we're using it.
We will create inside the source directory and paste this in.
This is some code that is needed for Clark to be able to implement the authentication clearly without
any issues.
Right.
So we don't need to worry about this for now.
We'll be customizing it later in the video, but for now just leave it as it is.
Then the next step is to basically use it.
We are going to wrap our entire application with the cloud provider.
And when we are talking about the entire application, we are talking about the root layout, right.
So let's go ahead and copy this.
And we can visit that file under the app layout where we have the root layout.
We'll just wrap our application with it.
And let's try to import it which is coming from Clarke Next.js.
So we have our entire application inside.
In our case we only have the home page and we can add a bunch of different components.
So for now I'll just delete everything that we had here.
I'll say class name.
Oops.
Let's say margin of ten from all directions.
And now we can get actually I'll visit the documentation.
I'll just grab what we have here.
I'll paste this in.
Let's try to import all of them and then I'll walk you through it.
And I don't need to really walk you through it because this feels like an English sentence, right?
We just say if user is signed out, show them a sign in button.
If user is signed in, show them a user button, right?
Let's try to see this in action.
We are signed out.
We can see a sign up button.
Let's click to it.
We will be taken into the sign in page.
This is what we have built, right?
We had the GitHub and Google sign in options.
And this is the name that we gave into our application.
Then we have the sign up page.
Sign up page.
Let's try to log in with our Google account.
So once you are signed in we should be able to see the user button.
This is what we have just set in our code.
If you are signed in, show them a user button where we can manage our account or we can log out.
And now that we have signed up, we can see this user in the dashboard.
From the clerk.
Okay.
So that's gonna be it for the authentication setup as well.
Next we would like to set up our database which is going to be convex.