Adding Authentication

[00:00:00]
>> So the last thing that we wanna do here is we want to add access control. I wanna make it so that you can only add a new movie if you are logged in and not only if you're logged in, but if you're an admin main user. So we wanna make sure that only admins in our system are able to log in or anybody can log in, but only admins can create new movies.

[00:00:22]
At this point, what we've done is we've moved away from the need to have the movie stored in this local database. And instead, we're pulling them from Azura, and we are doing that through this form here at /admin. But at the moment, this form is not it's not gated, it's not guarded.

[00:00:43]
So if anybody finds this URL, they would be able to come in and just load up whatever movies they want. And clearly, we have a genre, I got to start the server again so we can see it, but we've got a style that we're going for. And so we wanna make sure that only people who are willing to adhere to the the style guide for our movies are able to update, right?

[00:01:05]
So we're gonna create the ability to protect content. And now the way that we're gonna create that content or protect that content is we're going to just add login support, right? So there's a page in the repo that is in under source called login, and right now all it is, is styles.

[00:01:28]
So we're gonna keep this simple, we're just gonna add a big old login button. And the workflow that we want to happen here is if you try to go to our admin page, and you're not logged in, we wanna bounce you over to the login page, and require you to log in before you can see it.

[00:01:47]
After you're logged in, if you go to the login page, we wanna bounce you to the admin page. So basically, we want these to act as though they're kind of the same page. We are doing this strictly with JavaScript today, we can also do it using role based access control, we can do it with a few other solutions.

[00:02:08]
But again, this isn't a front end workshop, this is more about server less function. So we're gonna focus less on controlling the UI and more on controlling the functions. So the fastest way to get this done, because we're already in the Netlify ecosystem is to use something called Netlify Identity.

[00:02:24]
What Netlify Identity does is it will give us, let's see, do I have it here? Here, so Netlify Identity is it's just kind of like built into our whole system. And because we've already got the Netlify dev stuff set up, we can actually just like deploy this, right?

[00:02:42]
So let's start by deploying our site because identity requires us to have a live endpoint to hit for authentication. So to do that, I'm gonna make sure that our site is up to date, let's go get status. Okay, we're good. Then I'm going to run Netlify init, and what this does is it lets us create and configure a new site.

[00:03:05]
So I'm hit this Create and Configure button, I'm going to add it to my own team. And let's call this, you can call it whatever you want, I'm gonna call it frontendmasters-serverless, if I can spell it right. And if you leave it blank, and just hit a button, it'll autogenerate a name for you, so you don't even have to do that.

[00:03:25]
And then it's auto detected our NMP run build, okay? And then I don't wanna use my full path, so I'm just gonna use this site folder. You can leave these default or leave them blank, because they're actually being read out of the Netlify toml, and not these settings here, but this lets us run.

[00:03:45]
Now the exciting thing about this is it Netlify run, Netlify open, it's gonna take us right to our dashboard. And I can see here's the site, it's already building, and it's hooked up to GitHub, so it's gonna build whenever we run off the main branch here. For this particular project, like if you would wanna change it to whatever your default branches when you're pushing.

[00:04:09]
But because I'm running it off of a progress branch, which is not the default branch, I'm gonna change that real quick. You don't have to, it should just default to your main branch, so I'm gonna save it as progress. And then whatever we build in progress is gonna deploy the site, and it should run from the progress branch.

[00:04:34]
So here it is, progress, and it's just gonna build what we've built so far instead of the main branch, which is complete. So in here, now I have my branch building, I'm gonna give that just a second to complete, we can see it running through. Here it goes, build, build, build, and it's done.

[00:04:53]
And you can see it is uploading our functions, where are they? We're just looking at it down here, here we go. Five new functions to upload, so it already detected that we had serverless functions and those are all running. So we can go back out here, and now we've got our app is up, it's not running.

[00:05:20]
And the reason it's not running is that we didn't set our environment variables. Which are in here, build and deploy environment, and then I need to add these variables here. So let me go ahead and add those from my .env file, and then this one. Okay, and this is a browser extension that blurs that out, so that I can do these without having to pull my screen or pull my viewer off screen, then copy this one.

[00:06:01]
So now that we've got these, you can save them, and those are ready for us. And now let me show you something that's really exciting. If I come down here and I run Netlify dev again, check this out, it's pulling the environment variables right from Netlify. So now we don't even need a .env file anymore, we can just delete this.

[00:06:25]
And now we've got access to the data in there, so like we can use that. And what's nice about it is that we've got this, when I go up here to Deploys, I can trigger a new deploy, and this will build, and I think it's about 20 seconds for the site.

[00:06:47]
Once this is done, we'll be able to actually view this site live and be pulling data from it. There we go, we got a live site, it's pulling from our database, we've got our sites here. And if we wanted to, right now we could go and add a movie.

[00:07:05]
So we don't wanna do that yet, we wanna make sure that that's protected, so we're gonna go back to our dashboard here, and hit the Identity tab. Now I wanna just enable identity tab. And what I want with identity is this just gives us a pretty simple way to have users.

[00:07:21]
And it's gonna be like it uses JSON Web tokens, which is if you're doing front end authentication management, JSON Web tokens, or JWTs or JOTS, depending on who's talking about them. They will be a really common approach for this. You get those from Zero from Author, from most OAuth solutions.

[00:07:42]
So the flow that we're using here, we're using Netlify Identity, but this will apply to most identity providers and you'll be able to deal with it, using whatever platform you want. So now that I've got this, I'm gonna use something called the Netlify Identity Widget to handle the login because we don't wanna build the front end for this, we just wanna have it work.

[00:08:06]
So I'm gonna grab this Netlify Identity Widget, and down here at the bottom, I can pull in the Netlify Identity Widget script from the CDN. So I'm gonna drop that into all of my pages. So the index page, the only reason that we're including this is so that we can validate accounts when they get created.

[00:08:28]
On the admin page, we're including it so that we can check to see that somebody's logged in. And on the login page, that's where we're actually doing all the work, so I'm gonna include it there as well.