Login From Google

[00:00:00]
>> So, what we need to do is, we need to send that payload, that JWT, to the server and somehow we need to decrypt or decode this JWT and store some of that data in our database. Because maybe the user tomorrow Will actually come back using Google. And here it's your decision, if you wanna force the user to also have a password as a backup or no.

[00:00:32]
Most websites are forcing you to create a local password as well. But you are not forced to that, it's your decision, okay? So If the user is getting your website through Google you can decide, okay well that's how you will get here always. Or you can offer the user to also store a password or to also store another factor for this website, okay?

[00:00:59]
Makes sense? Well, the next step is to just do something else here in login from Google, right? We don't need just that, because that doesn't make any sense. So what we're going to do is here we're going to also create another API. Another endpoint, okay? So we need to create, we have login, register.

[00:01:23]
This is something different. This is login from Google. It's a different thing because the data we are sending, we don't have a password here. So my Gmail password will not appear here. Okay, so I'm going to create another, we received data with the payload that comes from the auth server.

[00:01:46]
So I'm going to say something like from here login from Google. Let's say we're going to call, what I'm going to do is here say that I will have login Google, okay? And I will call this from where? From auth.js so now I'm coming back to that part.

[00:02:10]
I'm coming back to this one I'm going to write something like this. So here what I'm going to do is then I'm going to call the API and see while the server is responding so login from Google. By the way, I didn't create the endpoint in the server yet, so this is not gonna work yet.

[00:02:29]
And because I'm using a weight, I need to add an async modifier, join function. And when I'm here, I will just call post login, because the user can just login differently. But it's still logging in, okay? And remember, I had the response and then I need to have the user, okay?

[00:02:50]
And I don't have the user right now, so I need to create a new option. And I would expect my server to give me a name and an email. That, I'm expecting that to be decoded from, in this case, the payload that Jwt. So when we are using a federated login, we need to create a separate process for that.

[00:03:18]
Should we create one per provider actually depends on the case. If you're using this systems that are already using an SDK from each provider, typically, you will need to create one per provider. If you're usingAuth, like from scratch and you are building your own Auth flow, maybe you can just have one flow for all the provider.

[00:03:46]
But anyway remember that you will need to register on each provider manually. So now we can log in with username and password and that username and password can be pre populated automatically from credentials manager. And now we can login with Google, okay? We still need to make the server part, but so far, first of all,

[00:04:12]
>> Do you need to pass the data into line 31?
>> I need to tell it, right now yeah, I'm not passing the data so you're right, I need to take the data that I'm getting from, so this data is coming from here, from the global callback. Okay, so now let's go to the server and let's add the new endpoint.

[00:04:37]
So, Here, to be honest, you need to make some decisions. Okay, so because there are many decisions to make, so we'll say log in Google, request, response, and we're going to do something inside. I mean, decisions are like what happens if the user has already an account with passwords?

[00:05:01]
Are you going to attach the Google login to it or creating like a separate user? Typically you want to attach, what happens if the user has no password? So that email address is unique, it's the first time it's as in your website. Do you want to create the password or not?

[00:05:20]
So, decisions that you make as the product owner in this case. So, but the first thing that we need is to decode that string so remember that what we received is. Now we have it here, we received something like this, okay? And we will get that server file.

[00:05:44]
So we need to decode that. So for that I already have a dependency that decodes JWTs. It's J W T J E S D code. That's the open source library. So the first thing that maybe I wanna do, is decode.gwt. So, I'm going to say, jwt.jsdecode.jwtdecode, that's the name of the function.

[00:06:13]
I'm going to pass from the body, a credential data, or I can call this however you want, but remember we are passing the data as it's coming from Google. And the name of the property was credential, that how Google is setting that property, okay? Make sense, so what.

[00:06:35]
Now, okay, we need to do something with this, first where is the user data within that property? Let's see that again. Is this data, okay? So this is the data that we are actually receiving. So we want from here the name, the email, if we want the picture.

[00:06:57]
So all the data you want. Okay, so from here, so this is called credential. So if you wanna receive it at credential, maybe what we should be doing in our, auth.js, cuz I think I'm not sending it as credential I'm sending the data. If you want, you can say credential data here.

[00:07:21]
It's I mean, if not, we can just remove that key and take the whole object as as granted. But in case you want to send something else because typically, you send more information, timestamps, the current user rationed. So when you say new users typically you say more data, that we are not doing it today.

[00:07:45]
So that's why I'm using like an object proper for this. So going back to the server, so I'm taking the credential and now, from that credential, I'm going to create a property with a user, and actually what I need is to take from that object a property known as payload.

[00:08:11]
So, for example, the email, it's available on myJWT.payload. That's how the code works, it gives you the payload, of that JWT, and I want the email. Whats the name? Well, Google will give you both, they give a name with a snake case, so we underscore, and the family name, the last name.

[00:08:39]
So you decide which one do you want to store or both, payload.familyname. Okay and then do we have a password? No, so we can say password, no password false or nothing it's up to you or undefined, okay? Why I'm saying this is because remember we are writing a database here and all the other entries, they have a password.

[00:09:16]
We don't need all the objects to have the same schema, okay? So that's not mandatory. But at least we should express that this user has no password right now. And it will have more other kind of information, no password, but something else. Okay, makes sense? Well with that user, we should try to find if it's a new user or not.

[00:09:41]
So user found, find user by its email, okay? Like so why? Because if it's new, we are going to save a new entry. If you already have it, we're going to attach the Google payload data to the current user, right? Make sense? So if the user is found, we can do something like, okay, we are going to create a Google property.

[00:10:11]
And we're going to save here as a Google property, the AUAD, that's the ID from Google. Remember, that's a property going back here. AUAD is this, okay, that's an ID that represents that user. You can store more properties if you want, the whole JWT metadata. But yeah, maybe we don't need to store everything.

[00:10:39]
After that, I'm going to write to the database. I'm going to respond to the client, okay, true, so the login was successful. And also I should deliver the name because, remember that, the client doesn't know about the name yet, right? Because the user has just logged in with his or her Google account and the email.

[00:11:07]
So we are sending that data back to the client. And if it's a new user, okay? Well, I'm going to talk to my database dot data dot users. I'm going to push a new user, a new object in an object and we'll take the current user that I have just created.

[00:11:29]
So I'm going to populate, I'm going to spread the current audit the data that I have just defined. And also I'm going to say I'm going to save the Google payload the same Google property that I did before Payload dot AUAD. If you think that you will have more federated logins in the future, maybe instead of doing this, you could say instead of user Google, you can change and create a federated object that will have a Google property.

[00:12:11]
I mean, we are creating our own organization here. Okay, so then if I follow that, I need to do something like this, make sense? So I'm creating my own structure because now the user may have different ways to login into my app. And is the same user. So after that, I'm going to also bright I need two or more the same thing, while I could do this after the if actually, but anyway.

[00:12:48]
Okay, so that's the flow, and here you can make many decisions about what do you wanna do with your user.