Implementing Authentication with Netlify Identity, React hooks, and Gatsby

Chris Biscardi: [00:00] We've got a landing page, but we still don't have a way for users to sign in or sign out. Netlify Identity is the solution that we're going to use in this project for that purpose. Netlify Identity is based on the GoTrue API, which is an OAuth 2.0and JWT solution for authentication. It looks something like this.

[00:25] That's a full example of what we'll be implementing. Although we just showed the signup flow, the login flow is similar and happens faster. There are two main options for UI libraries when building with Netlify Identity. The first officially supported option is the Netlify Identity Widget, which is the one we'll be using.

[00:46] The second option is GoTrue JS, which is a very low-level implementation for the GoTrue API. If you scan the docs, you'll see that it's much lower level and that you have to handle a lot more. That's why we're using the Netlify Identity Widget. In www, again, in packages, we'll install the Identity Widget and we'll reboot the site. Back in our landing page, we'll import the Identity Widget.

[01:13] Note that after importing netlifyIdentity, we can initialize Netlify Identity. Instead of the alert in the onClick for the button, we will open Netlify Identity's Widget. The first time we hit the Login button to open the widget, Netlify will detect that we're running on a local server. We'll need to put in the URL of our Netlify site.

[01:33] Note that we've [inaudible] the load settings. If we go to the Netlify dashboard and we go to our site, we'll see there's an Identity tab. We have to click Enable Identity before it'll work. If we refresh our site, you can see that there's an email and a password now, for login as well as signup.

[01:52] Registration defaults to open, which is fine for us for now, but if you're building a new site and you want to deploy this, you can also set this to invite-only.

[02:02] Note that if we've run build on our site currently, we run into two problems. The first is that document is not defined when we go to run SSR for Gatsby. The second is that the confirmation email that we get from signing up points us to the production application.

[02:22] The production application doesn't yet have the authentication widget on it, so we have to fix this build error, then deploy to get that to work. Note that commenting out netlifyIdentity.init causes our build to succeed. We can take advantage of React's useEffect hook. In this case, whenever the component mounts, we'll run Netlify Identity once and we won't run that again.

[02:49] This is useful because useEffect won't run on the server, but it will run in the browser, which allows us to show the authentication widget. Now that we've deployed the authentication widget to our production site and we've clicked the confirm email address link, we can now be logged in.

[03:04] If we add another button to our home page and log out netlifyIdentity.currentUser, which is a function, we can see that we have a user who is currently logged in.