Handling Authenticated States

[00:00:00]
>> So with that, we have a site, that's up and running, okay? It's doing what we want, we can navigate around, okay, perfect. So let's enable identity, so I'm gonna come in here, I'm just gonna click this identity button and click Enable. And we're done, that's it [LAUGH].

[00:00:18]
So then, now that I've got that, here in this layout, when this boots up, it's gonna find that and use it as the context for logging in. That means that we can do a couple other things. So the first thing that I wanna do is, I wanna get us to be able to actually log in.

[00:00:39]
So let's go to this route login component that we created. And I'm going to pull up netlify dev again so that we, netlify dev. And I wanna go to my login component. And then let's give ourselves some screen real estate, And close that up. Okay, so now that we've got the the netlify provider kind of in context showing us what we're working with.

[00:01:10]
Okay, so our app is wrapped in that identity provider, and we've got a valid instance of our OAuth provider up in the cloud, which is a netlify right now, we can start kinda making requests against it. So what I'm gonna do is, in our login component, I'm going to import useIdentityContext.

[00:01:33]
And we're gonna get that from react-netlify-identity. And then I'm also going to import navigate from gatsby. And what I wanna do is, I want to check if we're already logged in. And if so, we want to send someone over to the dashboard, the actual logged-in dashboard. So I'm gonna grab the identity by just running useIdentityContext.

[00:02:03]
And if someone has logged in, this is gonna include all of the details that we have about them. Their name, and whether or not their login is valid, and some metadata if we wanted to set that. And so in here, now that we've got that identity, I can say, if identity is set and, We're logged in, then I don't wanna be on this page, so I'm gonna navigate to /dashboard/secret.

[00:02:35]
And again, we're gonna replace true, cuz we don't wanna end up in an infinite loop. And that doesn't do anything yet, because we're not logged in, but it didn't break anything, so that's promising. So let's pull up our dashboard, and add the ability to actually, Show a login modal.

[00:03:00]
And the nice thing about this is that netlify just kinda shifts one of these for us, so we don't have to build it ourselves. So I'm gonna grab IdentityModal out from react-netlify-identity-widget. And then down here, I'm just gonna stick this thing in here, so IdentityModal. And then we can decide whether or not we wanna show the dialog, and that needs to be true or false.

[00:03:30]
And so, by default, let's just look at it and, Yeah, let's just look at it to start. Okay, so that doesn't look great, but that's okay because we actually get some styles for free. And I don't know, yeah, I can include them here. Let's just import react-netlify-identity-widget/styles.css, I believe is what it is.

[00:04:02]
There we go, and so it picks up those styles for us. So we don't have to actually deal with that, right? We just get to have it work and things are good. So if I want to log in, and I think this might not work on a, Something I'll actually remember.

[00:04:27]
Okay, so now I'm logged in and now, okay, I can't hide that. So I need a way to close that dialog. So let's actually add a toggle for our login state. I wanna be able to show and hide this modal. So yeah, go ahead.
>> Quick question, what is the Active Directory for this authentication?

[00:04:47]
>> The Active Directory, can you-
>> Where your username and password's stored?
>> The username and password are stored in netlify as an OAuth provider. And it's all backed by gotrue, the library. So it's kind of an OAuth implementation that's open sourced and then wrapped by netlify identity.

[00:05:09]
>> Could anyone with a netlify account sign in like that?
>> Right now, yes, well, sorry, let me rephrase. Right now, this is open registration, anybody who wants to can sign up for this. But you do have controls in here to say whether or not somebody's able to log in.

[00:05:24]
You can say whether or not people can sign in, whether you want to allow people to, if they have to have a certain email address, or if you have to create an account and send it to them first. Those settings are all figured out, but by default, registration's open.

[00:05:39]
So anyone who wants to can just put in their username and email, and they'll get an account. And you can add external providers, so if you wanna be able to login with your GitHub or Google or something, you can just check those boxes to do it. So I want to be able to show and hide this thing.

[00:05:59]
So I'm just gonna use a state for the visibility toggle. And that is going to be, we'll call it isVisible. And then we'll say setVisibility will be the setter for it. We're gonna do useState, and we'll default to false. So I can say, show dialog if it is visible.

[00:06:23]
And then the other thing that I want is, when somebody hits that close button, I wanna actually hide it. So onCloseDialog, which is one of the settings here, I can just run setVisibility to false. Okay, so now, when I go to my login, And I want to show this window, I think I need to make this do a thing.

[00:06:58]
Let's start by setting it to true so that we can just see it work first. Okay, so we've got our modal, it's visible. I wanna close it, I click close, hurray, [LAUGH] it did what we wanted. So by default, we want this to be hidden. And I want to go into my login route and make it, we wanna be able to toggle this from somewhere else.

[00:07:25]
So this little visibility toggle that we made, let's make that into a helper function that we can pass around. So I'm gonna call it showModal, and we'll just set it like this. And then down here, we can call it, showModal, and then I'm gonna also pass it in to this login.

[00:07:48]
And that way, we can control our state from another component without having to redeclare how it all works. So that way, if I pull up my login component, I'm now gonna get this showModal helper. And I can, on my button, say onClick, let's show the modal. So now I should be able to click this, refresh the page.

[00:08:13]
Click this, no, what did I screw up here, am I missing a thing? Passing it in as showModal, Passing that in as showModal. Okay, here's what I did wrong. I'm telling it to hide the modal, so we were just setting it to false over and over again. Which means that I do want to have this one down here, and we'll just keep it as false.

[00:08:40]
And that's the only one that’s gonna hide the modal, so we don’t need to write a helper for it. So let's try that again, okay, we can show and hide, this is good deal. So then if I try to login, let's see if it's gonna let me. It lets me login, and it's auto redirected.

[00:09:01]
So if I make this a little bigger so we can see it if I go to login, now I am logged in, and so it auto redirected us to the secret page. Okay, so we've got authentication working, we are getting a user object, and we can log that to see what it looks like.

[00:09:20]
Let's just take in our, where's a good place to show it? Let's maybe just look at our profile page, because we're gonna need to update that anyways. And so in our profile page, we're gonna get that useIdentityContext again, And that comes in from react-netlify-identity. Where is it, up here.

[00:09:48]
And I can just grab this out by saying const identity = useIdentityContext. Okay, and then I can console.log that identity, and we can see what's in here. So to look at what's coming out, we've got a bunch of information. So whether or not, let's see, these are some functions, so let's look at the user object.

[00:10:17]
In the user object, I have app metadata, so that shows that I signed up with an email. Then we can see, we could set things like the audience. And this is all OAuth stuff that we're not really gonna get into today. But we can see my email if I need that, and then we can see user metadata, including my full name and where I signed up from.

[00:10:38]
So this gives us just the basics. We can say, hey, you are logged in, and we can see that you've got user data, so we can access it, we can show it. So let's make this a little more manageable, and then let's just show some of this data.

[00:10:57]
So what I wanna show first is, I wanna figure out if we're logged in. And we can do that by saying isLoggedIn. And I'm just gonna say, if the identity is set, and we have identity.isLoggedIn. So then using this, we can actually just bail out of showing anything.

[00:11:23]
Or let's see if we wanna do it like that, yeah, that's fine. So effectively, what we're doing here is, we're just saying, if we're not logged in, don't show this profile at all. And that's good, because we're gonna try to show login status here, go ahead.
>> In the OAuth thing that it's giving back, is there user details that you get for free?

[00:11:44]
If somebody had, for example, regional data in the OS, I mean, do you just basically get, yes, this is an actual person? Or do you get any actual details about who that person might be from previous logins?
>> So there are services that can give you additional insight into users when they log in.

[00:12:06]
I don't know if netlify will do that, but I think OAuth has the ability to support that. Or sorry, Auth0, is what I meant to say. And so you can put anything you want into that token, you could insert literally anything. Are they an admin, are they a regular user?

[00:12:27]
Do you want to try to get their IP, and then use the IP to try to geolocate them or something? There are a lot of things that you could do as part of your login process. When you send that token around, you can kinda modify it and put more things in it and send it back.

[00:12:41]
It's a little out of scope of what we're talking about today, but the short answer is, yes, you can do that. So the next thing that we wanna do is, let's get the name out of this. So the name is kinda buried and this is where I wish that something like optional chaining was fully usable.

[00:13:01]
I think we're so close to it being possible, but for now, we're gonna do if identity is set, and identity.user is set, and identity.user.user_metadata is set, and identity.user.user_metadata, metadata.full_name, so that's what we need. So that will give us our name, and then once we have that, we can rewrite this, we can say logged in as, name.

[00:13:42]
And then I also wanna have a log out button, so let's add that. We'll say button and on Click, we just need to show that modal cuz that's how you can log out. And I will say log out, and that means that we're gonna need to pass this showModal in, so we can just add it as a prop.

[00:14:04]
And then let's go out to our dashboard here. And on the profile, we're going to include showModal as showModal.