Testing Login with Google Auth

[00:00:00]
>> So trying this now, let's try this on different browsers such as Safari. Just to show you that not because I'm using Google, everything can be Googled, Google thing look at this, this is Safari, you can see the UI is different than on Chrome. Okay, so it's trying to do what it can, so use your Google account, I mean, it's aggressive, right?

[00:00:29]
Because it's not like you are seeing I mean, if I go into login, I still see the normal button, okay? But anyway, on page load, there is that dialogue, if you don't like it, well, we just need to untick some of these options or disable some of the options from the div.

[00:00:47]
Okay, so then it will work only if the user clicks here, if the user clicks here, okay, I'm receiving this, so I can use it in another account. I can login with for example, Frontend Masters, let me see if I remember the password, by the way. The auth@gmail I think, no, I don't remember the password, look at that, okay, forgot the password?

[00:01:16]
No, anyway, so, you can see that everything that happens here, happens actually, in a new pop-up. And then when you're done, you go back here, you go back to the homepage. Okay, so that's how you do federated logins, there are more steps involved. First, you need to typically register, get a key, get the code, get the URL.

[00:01:46]
If you're implementing this manually with OAuth, it's even more low level, and you also need to do a lot of stuff on your server. Because here we're using a client side library, it's much simpler, okay? You have any question so far on this? Remember these arrows are, so now you can see that it's syncing me automatically every time I'm reloading I have double or login.

[00:02:23]
It's been logging automatically by credential management and also by Google. And I'm getting an error that they should solve in API 14, so let me go there. That says that I don't have the user because it's not the user, it's data, that's why. So I had a problem here in logging from Google, the argument is called data.

[00:02:47]
But we need to solve that problem because, hey, we have here two logins at the same time, which doesn't make any sense. So if the user is logging in with Google, we shouldn't use the same thing on credential management, of course I can delete my credential manager. So I won't have another order log in right now, only the Google one, okay?

[00:03:13]
Make sense? Okay, it seem like there is an error in the server, so we have a couple of error that we need to solve. Let's read, understand what's going on our object, okay? We got JWT that is the code of the string. Then the string is coming from an object known as credential that we are sending from the client and the Google object has another credential inside and that's the string that we need to decode.

[00:03:44]
When we decode that we get a JWT object. In that object, we have a payload. In that payload we have all the data, that's how it works. By the way, the payload, it's not actually in Google's response. Payload is how this library returns the data. So the JWT library returns the data in .payload and then wherever you are seeing.

[00:04:07]
For example, here I have a problem that is not payload.AOID, it's JWT.payload. And the same here, jwt.payload, those were my bugs at this point. So with that, now every time we log in with Google, we will create a new object in our oath, JSON database, and in this case the object will be different.

[00:04:40]
So when you are back into your web app, we may have a problem here that we should solve the bag that had to do with auto login because I needed to get credentials. So because I deleted the credentials, I'm not checking what happens when you get the credential, if you're getting undefined as a result.

[00:05:03]
So I'm trying to get the ID and the password of a credential that doesn't exist, so we can solve that error line 64, so of .JS line 64 here. So I should check if we do have credentials, because if we don't have credentials I shouldn't be auto-logging the user because that user has deleted the credentials.

[00:05:30]
That's kind of the idea on that error and now when you refresh because I'm auto-logging with Google, okay? You will see your Gmail username directly here that I didn't create an account with that email in my project, okay? And finally, if we go to our database of the JSON, we are going to see our new feather writer object with the Google identifier.

[00:06:04]
Okay, make sense? And to be honest here also you have other things to consider about how do you identify your user. You can identify your user by its email, and you trust Google that, that's the user's email, or you can identify the Google user by its AU ID, that's internal ID, it's up to you.

[00:06:27]
So I think that in most situations, trusting the email address is okay. Okay, we trust that Google, if Google is giving me that email address it shouldn't be false. Okay, the only situations where this might be a problem is what happens? Because we need to remember that the information from Google is coming with a network request.

[00:06:58]
I can even open the network tab and see everything that happens here, okay? So I will see the answer from Google, okay, so what happens if I have a plugin in my browser. So that is changing the email address, is faking the email address coming from Google, or some weird JavaScript code or is doing that well as it should do for homework.

[00:07:26]
Actually, Google has a solution for that is that you can make an API call server side to Google to confirm that, that AU ID belongs to that email. Make sense? Just in case some man in the middle has changed the email. And then you're trusting an email that is not the right one.

[00:07:47]
Before moving on to the next topic, I think it's important for us to now disable this auto login from Google. And also the ITP support, at least temporarily. Because if not, every time, we are refreshing the page, we are auto login with Google and that will be a problem for what we need to do next.

[00:08:10]
That is trying to understand how to log in the user in better ways using web authentication, okay? So I'm just going to remove that, so then if you wanna log in with Google it's fine. By the way, my server is down. So probably we don't need to show that, so now if I refresh, I mean if, I wanna log in, I need to explicitly say so.

[00:08:36]
If not, it's still there, okay? Just by changing those true with false in the d, make sense? In fact, if you don't like that dialogue, you can also take that dialogue out and just keep only the button.