Adding Netlify Identity

[00:00:00]
>> Authentication in apps is typically done using OAuth. OAuth 2.0, specifically. And there are a ton of implementation of this. You can roll your own with something like Node Passport. A lot of social services, like GitHub and a bunch of other services, have an OAuth 2.0 implementation that you can use for logging in.

[00:00:23]
And then there are a lot of providers like Okta and Auth0, and Amazon has Cognito. There are a lot of way for you to manage this. But since we've been rolling with Netlify, we can just use Netlify's built-in identity, because they've made it, again, nice and straightforward. So we don't have to think really hard about making it work.

[00:00:45]
So the way that we're gonna do that is we're gonna install an identity widget that is just provided for us. And we do that by getting, We're gonna, yarn add react-netlify-identity-widget. And then we're gonna get react-netlify-identity. And these are React wrappers around Netlify Identity, so that we don't have to write a bunch of OAuth code.

[00:01:17]
Because, again, we're here to build features. We're not here to reinvent wheels. So this stuff has already been done for us, so we may as well use it. And then there are a couple dependencies that we need. So under the hood, this uses Reach UI's dialogue box, Reach UI's tabs, and the visually-hidden accessibility helper.

[00:01:39]
So we can install these. And once these are installed, we're gonna start up netlify dev again, so that we can see our work as we go. There we go. So to make this actually go, to make this do the things that we want, we are going to, first, make sure that we have access to the whole, there we go, that we have access to the whole identity context.

[00:02:17]
And context is just a way in React apps to make sure that something is available globally. You could, in vanilla JavaScript, maybe you would attach this to global state, or in other frameworks they've got ways to make things available. It's just putting it into the state in a way that your app can access.

[00:02:34]
So I'm going to import the IdentityContextProvider from react-netlify-identity-widget. Make that wrap. And then I'm gonna use it by just putting, This whole thing around our app. So we use that IdentityContextProvider. And then the thing that we have to do to make this fully function is we need to make it point to a working Netlify site that has Identity enabled.

[00:03:10]
So we're gonna have to deploy this app to get it running. So let's pick a name for it. I'm gonna call it https, we'll say fem-jamstack. Or, sorry, we'll call this jamstack-intro-, auth. And then it's gonna be at Netlify, so we'll save that. And then I'm just gonna go ahead and create a new repo.

[00:03:40]
So we're gonna be using the hub tools again. I'm gonna do git init to get us a repo here. And I'm going to, git create. And we are gonna call this jamstack-intro-auth. Okay, and we can check the status. Okay, that looks right. I'm going to add everything, git commit, good.

[00:04:12]
And then I can push this. I'm gonna set the origin, so I can just write git push instead of having to write git push origin master every time. And then we want this to be a Netlify site. So I've already got the Netlify CLI installed from earlier, so I'm gonna run netlify init.

[00:04:32]
We're gonna create and configure a new site, put it into my personal stuff, jamstack-intro-auth. Okay, that's created. Our gatsby build command is yarn build. It's gonna deploy the public directory, Okay, and then I have a command here to actually see what's going on. So I'm just gonna run, netlify open.

[00:05:01]
And that opens up the browser for me, it takes me right in. And I wanna check here to make sure that we actually defined that build command. We didn't, so that's going to get us in trouble. So build is gonna be gatsby build. And I'll just commit that change.

[00:05:33]
Call it add build command. Push it up, and what we'll see is that this will immediately pick up that change. And let's go back and just cancel this other one, so that it doesn't, You're done already, all right. So this one's gonna build, and it should actually find our Gatsby command.

[00:06:02]
And we've already set up the redirects, we've already set up the client-side routing. So when this ships, it actually should be functioning, we should be able to click around our dashboard. Nothing will be authenticated yet, but that's okay. We haven't gotten there. And yeah, this just kind of, again, points to how much I like the jamstack workflow.

[00:06:21]
It's like, okay, if I had to stand up a server so that I could make sure that something was accessible and then add some kind of a text key to the domain name so that I could verify my domain. Which, I don't know if you've ever done that for other services where you have to validate ownership of a domain first, but it's such a pain.

[00:06:40]
So being able to just quickly say, here, use this. It's really really, nice. And here, momentarily, here we go. We're running our gatsby build.