Now let's add basic auth to our project. For that we're gonna be using auth.js. So Google auth.js and ensure that you're looking at the new documentation. It should look something like this. Let's click on get started and let's select the next JS option.
Let's run the command to install NextOutBeta. Make sure you choose a proper package manager which you are using. So I'm using bun, so I'm gonna run bun add NextOutBeta. As you can see, at the time of recording that is 5.0.0. And now let's go ahead and let's set up the environment.
Basically what that means is adding a new environment variable inside of .environment.local. So if you want to you can manually add the out secret here. It doesn't really matter for development purposes, right? But if you wanna get ready for production, you can run the npx out secret or bonnex out secret. And there we go.
You can see how it's now been added to my dot environment file right here. If for any reason your command doesn't work, just manually add literally anything inside. Now that we have that we have to configure NextOut. So let's go ahead and create the root file inside of source, create a new auth.ts file and inside of here you can simply copy everything they have inside of the documentation here. So we are importing nextauth from nextauth and we are opening an empty configuration here with empty providers for now But what's important is that we are exporting back handlers sign in, sign out and out.
So later when we import this out we're gonna be able to use these methods. The first important one is the handlers. So let's go inside of the app folder API, let's create a new folder called out and then another new folder next out and then route.ts. So inside of source app API create a new folder out, then inside create a catch-all next out but in single brackets so exactly as I did here and then finally route.ts and you can again copy what they have in the documentation or you can simply copy from my screen. We are importing the out which we've just created and we are using the handlers to hijack get and post requests for everything that goes inside of slash api slash out and then anything after that.
So we are hijacking every get and post request in that route segment. So similar to what we did for example with upload thing, you can see that we are doing the same thing. We are hijacking the get and post requests here and the same thing that we did inside of route for our Hono we are hijacking get post patch and delete so a pattern we've pretty much gotten used to by now. Now that we have that Let's go ahead and follow the instructions further. So now we have to set up the middleware to keep the session alive.
So I'm going to copy this. I'm gonna go inside of the source folder and I'm gonna create a new file middleware.ts. And let's paste that here. So again we are simply importing auth from our auth.ts file like this and that's it. Great!
So now here's what I want you to do. I want you to confirm that this is working by visiting the following. Let's go inside of the terminal here and let's run bun run dev. Let's go inside of localhost 3000 here and I want you to first of all refresh your page and then go to slash API slash out slash providers. And inside of here, as you can see, we get a request, right?
So this is different than getting a 404. So if I just go to slash you know something that doesn't exist we get 404 but as you can see our auth routes are doing something right but you can see that the providers is empty and if I go to slash out slash sign in this is empty as well right so something is happening but we are definitely not done yet. So let's go ahead and see what we need to do next. So next step is filling the providers array. So inside of here we are going to be using the database but not in this chapter.
We're going to do that next. First I just want to show you that you can set up Outh.js quite easily without a database using an OAuth provider. So let's click on the next step and I'm gonna choose GitHub because it's by far the easiest one to set up. So first things first, let's go ahead inside of our settings on GitHub and so make sure that you click on your icon here and click on settings here and go ahead and scroll down all the way to developer settings. Go ahead and click on OAuth apps and create a new OAuth app.
I'm gonna call this image AI. The homepage URL, let me zoom in, will be HTTP localhost 3000. And the authorization callback URL will begin with that. So that is our origin, right? Because my bun run dev is running here so just ensure that you have the exact that you have the exact URL that's written here in your terminal.
The next step we have to do is create the callback URL and they provide you the instructions for that. So after the origin we go to slash API out callback and then GitHub. There we go. Slash API out callback GitHub. And let's click register application.
Now inside of here we have the client ID but we need to generate a client secret. But let's hold on just a moment. So now I want you to actually set up the variables needed. So let's revisit our .environment.local again and above AuthSecret add the AuthGitHubID and AuthGitHubSecret. So if you want to, you can custom name these variables, but I recommend that you name them exactly as I've named them here or whatever is written in the documentation.
So right now it's the prefix out and then provider ID provider secret. So these environment variables will be automatically read by NextOut. If you change this to GitHub secret 2, you're gonna have to manually tell NextOut that that is the secret you want to use. So now let's go back inside of the OAuth here and copy the client ID and paste it in the Out GitHub ID and click on generate a new client secret. Go ahead and copy the new client secret and paste it here.
There we go. Now let's go back instead of the OAuth providers and let's actually set up this provider. Make sure you've saved this file and both the github id and the github secret are filled and go back to out.ts. Inside of here we have the empty providers so I'm going to go ahead and import github from next out slash providers slash github And then you can just easily add GitHub here. Like that.
So this will automatically read for out GitHub ID and GitHub secret. But let's say you've named this, you know, GitHub ID two and out secret two for whatever reason. All you have to do is execute this and add the client ID to be process.environment and then you know you would copy this to be out github id2 and client secret will be process.environment out github secret2. So that's how you would solve that problem. But I'm not going to do that.
So I'm just going to leave this to be the default one and then I have a much simpler implementation on my hands. There we go. Now they double check for you that you've added these handlers here we already have that right so inside of the app folder API out we have the next out route.ts here there we go so now let's go ahead and check out the providers API again. So let me refresh this API and there we go. We now have the GitHub provider.
So now I'm gonna go ahead and go to slash API slash auth sign in or you can just try and go to slash auth and it will redirect you to sign in and you can now finally sign in with github. So let me authorize my user and I'm redirected back to my root page. So let's repurpose this page. I'm gonna go ahead inside of source app page.tsx. I'm gonna remove the button and I'm gonna remove the button from here and I'm going to import out from add slash out.
I'm going to turn this into an asynchronous method and I'm going to get my session using await and execute the out method. Inside of the div I'm going to stringify my session. And there we go! Since I'm logged in you can see my session here. If I want to log out I can go to slash API slash out slash sign out and I can confirm.
And there we go! Now my session is null. Great! So the next step is to actually add the database and actually save the user every time a new account is created so that we can further store things inside of our database in relation to that user. Great, great job!