Set up GitHub OAuth for a Next.js 13 Application

Instructor: [0:01] The next thing we need to focus on setting up is our GitHub OAuth environment variables. Two places to reference first is in this env.example. You'll see that we have all the placeholders for the environment variables that we will need.

[0:18] Then in our README, if we open this up a bit, so you can read it easier, you'll see that it'll walk you through all the environment variables we need. We're going to go first to GitHub since we have it open. We're going to click here for settings.

[0:41] Actually, we need to go back to our profile. Then, if we open this up a bit, if we click on our avatar and go to settings here, we get a different set of settings. We can come down to developer settings, OAuth apps, Register a New Application.

[1:05] We're actually going to create 2 because we're going deploy our app before we actually start migrating so that as we migrate and push commits, we can see it reflected in production. We're going to give this one our next migration invoices dev. We know that the home page URL is going to be our localhost:3000.

[1:32] The callback for NextAuth is api/auth/callback/github, because we're going to use GitHub OAuth, so register this application. We want to first go through and get our dev keys. We're going to get our Client ID, copy that, go to this env.example. You can actually just go ahead and remove the example, rename it. Let's remove the .example.

[2:05] Then let's place the Client ID value there, and then we want to generate a new Client Secret. We have our new Client Secret that we can copy and we'll paste it here, and we can save that. We're still going to get errors because we're using NextAuth in Prisma.

[2:26] We need to then, for this NextAuth secret, if we come into our README, we will see that we need to run this openssl rand -base64 32 command. All this is doing is giving you a string that's random and secure. If we copy this and let's open a new terminal window and paste it, click enter, we get this value.

[2:57] If we want to open this a bit, so we can see the full value as a single line, we copy that, come back to our env, paste it here for NEXTAUTH_SECRET, and then save that. The next thing that we'll need to do will be to set up PlanetScale, and we're going to do that in the next video. In review, in this lesson, we set up our OAuth with GitHub and then got our NEXTAUTH_SECRET.