Check out a free preview of the full Introduction to Serverless Functions course

The "Adding Netlify Identity" Lesson is part of the full, Introduction to Serverless Functions course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to add the Netlify identity button to the application developed during the course, and how to log into the application through Netlify.

Preview
Close

Transcript from the "Adding Netlify Identity" Lesson

[00:00:00]
>> So now that we've added this script, I'm gonna add in the netlify identity button. And we can see that if we look back at these docs here, that there is a netlify identity button, right? And so, just gonna grab this, and let's bring it over and drop it into our code.

[00:00:29]
Drop it right there. And let's go and take a look at it cuz we're rolling here. Yeah, that's not what I want. I don't want it to say that, so let's just drop this out. I don't care about that part. There we go, now we got a login button.

[00:00:46]
Okay, so I'm gonna log in, and it's asking me for the site's URL. So let me head over here and just go back to our site. And this link here, where it says frontendmasters-serverless.netlify.app, whatever site you just created, that's the URL you're gonna use. So let's head back over here, drop that in and set.

[00:01:11]
And so what that's doing is it's telling the local host where to hit to validate whether or not somebody is an actual user. That's because users have to be managed somewhere else. You can't local host manage your users or you wouldn't be able to actually test the login and stuff.

[00:01:27]
You need the authentication server out there. So once we've done that, I wanna sign up for my my site. So let's set a password that I will remember and sign up for my account. Okay, we're signing up, here we go. And I'm gonna get a confirmation message. So off screen, I'm gonna look at my email and that will give me my login.

[00:01:57]
Okay, so when I come back out here, I'm gonna paste that link. All right, now because we haven't pushed the changes with netlify identity, it didn't do anything. But we end up with this confirmation token, and that's actually what I want. So I'm gonna come back to my local host.

[00:02:16]
And I'm just gonna paste this in and hit it. And now I'm logged in, my account is validated, right? So you just take that confirmation token hash and paste that into your local host. And that way, you'll confirm your account. And then if I go back and look at my Identity tab, I can see now I have a user.

[00:02:39]
And my users created and there's no role set. So we'll talk a little bit about roles in a minute. But for now, let's actually just look at what happened when we did this. So I was able to create this account. And so I've created a new account and logged in.

[00:03:00]
And now I have my user, I am a user. I've logged in and Netlify is telling me that I'm authenticated. So I wanna see what that actually means. So we can just console log out here, and I'm gonna get the netlify identity current user. And the way that I know what this is, is from the docs, there are docs down here on what we're getting.

[00:03:31]
And I'm interested in this one here, Current User. So I've logged out my current user. And inside of it, I can see a few things. Let's take a look at what's in here. So this is our API for identity. That's where we're asserting that we have our identity server.

[00:03:50]
We've got app metadata, which is set by the app. I, as a user, cannot control my app metadata. I can only control my user metadata, so I could change my name, but I couldn't change my provider. Then there's some information that comes from the identity service that we don't really need to care about for this, like the audience, that's not really for us.

[00:04:18]
We can see what time I confirm my account, and so how long it took me to confirm my account. We can see what my email address is, what my identity user ID is so that I can be uniquely identified. Last time it was updated, the URL and then this token.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now