Environment Variables & Connecting to Mongo

[00:00:00]
>> And then the last thing is pages. So one of the sweet features that NextAuth gives us is that it will generate the auth pages for us, so we don't have to make them. How many sign in/sign up pages have you made in your career? Probably a lot, and I'm of tired of them, seriously, why do we have to make them?

[00:00:20]
Well, NextAuth makes them for you. It will look at the providers that you have, and it will generate the page for you that will have all the buttons, already labeled, that are already connected, even email input, literally everything that you want is there. The only problem is it doesn't look that good.

[00:00:35]
It had those errors and everything. So we're not going to use it because we're trying to take this to the VC, and we can't walk in there like that. So we gotta customize it to make it look a little better. So we're going to say, all right, don't use your built in sign in page that you generate, use our sign in page which is going to be at /signin, which is actually over here.

[00:00:55]
So use this page instead. So that's what it's going to do. Because we're opting out of that page though, we are responsible for handling the errors that they put on the query string and stuff like that. So we're on the hook for that. But, it's a price to pay if you want something to look good.

[00:01:11]
And that's basically it as far as the setup goes, now we actually have to use it to protect things. So the first thing we're going to do is let's allow a person to sign up and sign in. So the way we can do that is basically, well, I guess the first thing we need to do is need to actually set these environment variables.

[00:01:28]
So let's do that first, otherwise we can't do any of this stuff? So what you need to do, if you're following along, is you need to go on the root of your repo here. There should be a file called env.local, okay? You can copy everything in that file.

[00:01:43]
You can make a new file and call it .env.local, that first dot is important. So I already have it. I would click on it, but then you'll see all my secrets. So I'm not going to click on it. You almost got me. But so what you wanna do is you wanna paste this inside of .env.local, and you want to fill this stuff out.

[00:02:06]
So I'm gonna walk you through how to fill this stuff out. GitHub ID and GitHub secret, that's pretty simple. If you've never done this before, you're about to learn how to make an OAuth app on GitHub. So I could just go to github.com/yourusername, you actually don't even need to go to yourusername because it's just on the right.

[00:02:25]
I'm gonna go there and I'm going to click on my face there. Or if you're here on GitHub, you can go here, you can go to settings, either one, it will take you to this page. So once you go to this page, you click on Developer settings. Click that and click on OAuth Apps, click that.

[00:02:49]
And then what you're gonna do is you're gonna make a new OAuth App. So I'll click new OAuth app. You can name it whatever you want. This is the name that's gonna pop up that says this app wants to authorize you to give them access to GitHub, right?

[00:03:00]
This is the name of that app. I put the name of our app, I put known. So you can put whatever you want. But this is what this is. Homepage URL, this means nothing for now, you can just literally put google.com this is just if someone wanted to, hey, the hell is this app asking me for information?

[00:03:15]
They'll show them a link, they can click on it to figure out more about this app. We don't have a homepage URL, it's not deployed. But when you deploy this later, you want to come back and add it, you wanna get crazy? Go ahead, go do it. But you just put google.com.

[00:03:26]
Don't worry about the description. This is just telling the user what this app is. The important part here is the authorization callback URL. So if I was gonna make one here, and this is my test app. Homepage URL is https://google.com. And then the authorization URL, so luckily for us, GitHub knows that people are using this on localhost.

[00:03:52]
So what we can do is because we're going to use this on localhost until we deploy, we can just put http://localhost, and we just put port 1234. And I understand your app is not on port 1234, it doesn't matter, this is still going to work. This is what GitHub recommends you put when you're on localhost.

[00:04:11]
The way the authorization callback actually works is when you're doing the OAuth flow, you can send up a authorization callback. If you send up a authorization callback, as long as that URL of that callback has the same host as the one registered here, that'll be fine. So we should be good.

[00:04:28]
If you're on localhost, they just don't even care. It's just like it'll always just work, and that's it. If you don't send up one, it'll default to the one that's here. So NextAuth sends it up, so we're good. So we're just gonna say register application. Once you do that, you're going to get a client ID.

[00:04:43]
So that client ID is going to be your GitHub ID. And then you're going to click generate new client secret and, I don't want flight log in right now. You're gonna generate that client secret and it's going to give you a secret, that secret is going to go here.

[00:05:01]
So once you got all that you should be good to go. Now for database URL, this is basically where if you have Mongo in your computer, go ahead and start. If you have Mongo 4 or later in your computer start that, get a URL, put it there, it's probably 27 or 107 or whatever the port is on Mongo.

[00:05:20]
I forgot what it is, something like that. If you don't have one, totally fine. We're gonna make one real quick. Go to Atlas. So you can type in MongoDB Atlas You can make an account. Let me just go to mine. And what you can do, you might be prompted with some onboarding flow or whatever, but eventually you just wanna create a new cluster.

[00:05:49]
A cluster is exactly what it sounds like, it's a cluster of databases. I don't know how to better say it than that. You're just gonna make a new cluster, call it whatever you want, let that provision. Once that cluster provisions, you'll know when it's done provisioning because you'll be able to click on these buttons.

[00:06:07]
What you want to do is first you want to create a new database user. So I go in here, make a new database user, click on password, give them a name, type in a password if you want, or have them generate one for you. And it just makes sure it is on, where is it, read and write to any database, that's it.

[00:06:31]
You don't need admin, you just need to read and write. So you can do that, you can add a user. And then, the last thing you would wanna do is, you just need to make sure you allow all IP addresses for your database. Otherwise the connection will just hang forever, you won't be able to connect to it because it doesn't allow your IP address.

[00:06:50]
So you can do that by just clicking Add IP address. And for me, there's not a button here, cuz I already did it, but there should be a button here on the right, that says allow any IP address, click that button. If not, then you can just type in 0.0.0.0/0.

[00:07:11]
And that will pretty much say any IP address. So you got to do that. That also needs to be provisioned, so it'll take some time. Once all that is done, You can click Connect. And you can click Connect to your application. And we'll just copy that code right there.

[00:07:30]
That's our URL. So then you'll have that URL. And the last thing you got to do is just replace password with the password of the user that's here that you created before. And give yourself a database name, which is literally any thing you want here, but you should put known.

[00:07:48]
So I'm just going to show you what my database looks like. Actually, I'll just use this one, right? So for instance, this is my database verso and my password was, puppyChow, whatever it is, I don't know, something like that. And then DB name will just be, make sure you put known, just put known for the DB name.

[00:08:15]
And that's it, that would be your DB URL. You can leave all this other stuff here, that's it. For JWT_SECRET, you could put whatever you want, doesn't matter. Just slam on the keyboard, do whatever you want there. And then for NEXT_PUBLIC_API_HOST, just put the full URL to what you're actually using, which in this case is localhost, I'm port 3000 because that's the default for next.js.

[00:08:39]
If you're have a different port, put that. So once you got all that figured out, and you got your env set up, you're good to go, you got a database. That was a lot. For anyone who doesn't do a lot of backend work, I can understand why some of the stuff I just showed might be intimidating.

[00:08:55]
For me, I think a lot of stuff can be intimidating mostly just because when you go to something like Atlas, I mean just look at it, just look at this. This does not look inviting. What's a cluster? What's a data lake? What's that? [LAUGH] I don't even know what that is.

[00:09:13]
So I can understand that. So I tried to just abstract all that away from you and just walk you through the things you need to do to connect, and that's basically it. After that you don't have to do it anymore. You should be good to go. If you don't wanna do this, but you don't have it locally, you can use something called RunRS, Runes, okay, RunRS.

[00:09:39]
So RunRS basically, you just NPM install it globally. You just type in RunRS with a version 04, and it'll just download a version 4 MongoDB for you right there and you can just start it. All right, it'll download it for you, you can just start it. Again, you'll still have to use Atlas when we deploy if you want to fall off for deployment.

[00:09:57]
But for local development, you could just do RunRS that will download Mongo for you for the first time, and you'll be good to go. So just try that, it's pretty dope. And then to start it you just type in RunRS, and it'll give you a very very long URL because it uses a replica set.

[00:10:13]
That's what RS stands for, replica set is basically a trio or at least two Mongo databases talking to each other. So you can do transactions because Mongo is not a transactional database until just recently. In order to do that, you have to have multiple databases. So that's what replica set is.

[00:10:32]
This thing does it for you. So you'll get a URL that looks like this, where it's like a whole bunch of URLs separated by a comma. And then just make sure you replace your database name here with known, that needs to be known. As long as that's known, you're good to go.

[00:10:48]
You can do whatever you want. You can literally change the name of the database of Mongo to whatever you want because you're setting the name of the database, so you can put whatever you want there.