Check out a free preview of the full Firebase with React, v2 course:
The "OAuth Sign In with Google" Lesson is part of the full, Firebase with React, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve wires up the app to allow the user to sign in via Google.

Get Unlimited Access Now

Transcript from the "OAuth Sign In with Google" Lesson

[00:00:00]
>> Steve Kinney: So, I have these beautiful sign up and sign in forms, they don't do anything yet.
>> Steve Kinney: They can, but they don't. So, first thing we're gonna do is we are going to wire up the sign in with Google, cuz it's the simplest right now. They don't necessarily need to have created an account yet.

[00:00:24] We know that we have Google accounts we can use that and just to show like the how easy it is to get OAuth working and depending on your need that might be enough. You might try to just turn on, you know, Facebook Twitter and Google sign ups and not necessarily like manager on users.

[00:00:33] That's a total optional need to do email password sign ups you can if you want. So, we'll start out with the sign in with Google sign in option first. And then we'll kind of flush out the rest of it in a little bit.
>> Steve Kinney: Might have to get a new API key at some point.

[00:00:54] But let's get this in place for the time being.
>> Steve Kinney: And we'll go into Firebase and now we're bringing in another module, so we'll say import, and we'll say Firebase/auth. This will basically patch the Firebase instance with the authentication logic now we'll do something very similar to what we did before.

[00:01:37] We'll say export const auth = firebase.auth, and we're going to give ourselves two other things. We're going to do the provider which is for one of our sign in techniques, what is the OAuth provider in this case and it's going to be Google. So, we'll say provider = new firebase.

[00:02:01] Google off provider. And I don't want to deal with it ever again. So, I'm going to give myself one more constant, which is sign in with Google and that is gonna be auth.sign in with Google. I will pass it that provider. All right, so now I have a function called sign in with Google that I can use, and I want to take a wild guess what's going to happen when that function gets called not all at once.

[00:02:34]
>> Student: Get the pop-up window that says, do you wanna let them use your Google account?
>> Steve Kinney: Yep. Yep, so let's go ahead on the sign in one,
>> Steve Kinney: And we'll say onClick
>> Steve Kinney: Let's sign in with Popup.
>> Steve Kinney: There's a bunch of them, you can do sign in with redirect, you can do sign in with Popup, you can do a few of these.

[00:03:08]
>> Steve Kinney: So now you see I go ahead, pick myself.
>> Steve Kinney: Let's make this function. I did the thing to myself this time. Cool, so sign up with Google, we'll get the pop-up, we'll select it, we'll head back in. Nothing happens at this point cuz we're not doing anything with that information, right?

[00:03:43] We are technically authenticated but our application doesn't know, right. Now that will return a promise that I can do stuff with, but just like subscribing to updates, I can do something very similar where I can detect whenever the auth state changes and then update my application state based on that.

[00:03:52] So, let me go ahead and do that.
>> Steve Kinney: And so, we'll do that in application.
>> Steve Kinney: And so, before we had this unsubscribe, and I'm gonna rename that unsubscribeFromFirestore. Cuz now I've got multiple things I need to unsubscribe from. Cool, so we'll go ahead as well and we'll say,

[00:04:38]
>> Steve Kinney: unsubscribeFromAuth.
>> Steve Kinney: We'll say this. UnsubscribeFromAuth = this auth,
>> Steve Kinney: Make sure I got the right one, yep. onAuthStateChanged. This will fire whenever they go from logged out to logged in, or from logged in to logged out. So, when that happens, we'll get either a user object or we'll get null, right?

[00:05:17] Null if they're logged out, a user object if they are, if they have logged in.
>> Steve Kinney: So, all I'll do with that is I'll say this.setState with the user.
>> Steve Kinney: We'll flip over. Right, you can see there is a user logged in.
>> Steve Kinney: But look, we've got the user, passing the user in.

[00:05:49] And let me look at this authentication component, we need to pass that.
>> Steve Kinney: Pass those properties to that component as well. And you can see, you get a whole lot for free here. Right? This is provided by the Google OAuth mechanism. I can get my like two-thirds of my son's face.

[00:06:12] And then mine I got the email address that's currently just the current time. You got the display name that's formatted with a lot of providers that are automatically be in there, let's go ahead. There's a lot of properties on the user object, but most of them aren't very useful.

[00:06:28] There are a few though. So, let's do console. log user.
>> Steve Kinney: So, here's that user, a lot of not useful stuff you can see there's the display name, and email, if you're [INAUDIBLE] with Google, you'll get this email verified as true because it already knows that. There is some metadata like the last sign in time.

[00:06:56] And stuff like that, that you can use as well. But the rest of these don't really mean a whole lot. But there are a few, kind of used ones hanging out there that you can use. We are using the photo URL that you can see here. The display name, the email address and the UID, the four that we're using this application but there are.

[00:07:18] There's a few more hiding in there, but most of these are just kinda metadata. Anonymous is kind of a cool one that we're not gonna get into today, but I wanna like bring your attention to, which is you can basically log people in anonymously. You're like, why would I ever want to do that?

[00:07:33] Which is basically, you can store a certain amount of cookie state. Which is like, let's say they go to your store application and they start putting things in the cart and they don't have an account yet and then they create the account. You can then merge anonymous user with their real one and track a few things in there to kinda have a better user experience as well.

[00:07:47] And that's just a method on auth called, I think it's sign in anonymously, or something along those lines.