Check out a free preview of the full Firebase with React, v2 course:
The "Display Name" 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 demonstrates how to allow users to set a display name.

Get Unlimited Access Now

Transcript from the "Display Name" Lesson

[00:00:00]
>> Steve Kinney: So when the user signs up, we have this sign-up form, where they can put in a display name, and they can put an email address and a password. Right now, this form doesn't do anything, cuz it's not wired up, I think it actually clears stuff out. Yeah, all it does is empty out the state, which is not super helpful, so let's jump in, and let's implement this.

[00:00:24]
>> Steve Kinney: So we've got the sign-up form, and here we've got handleSubmit, and all handleSubmit does is, again, sets the state back to empty. Seems legit, let's actually go ahead and implement some of this. So we can grab the displayName, the email, and the password off of the state.

[00:00:48]
>> Steve Kinney: So email, password, displayName,
>> Steve Kinney: Is this.state,
>> Steve Kinney: And then we're gonna try to go ahead and create a user. So everything in, not everything, most things in Firebase are promise-based, so you could use a promise chain of then and catch. We can also make this an async function, and use async/await, which allows you to use just regular old JavaScript try-catch blocks.

[00:01:19] So let's go ahead and try that one out. If we were better at our jobs, we probably would have been error-handling a few other places as well, but what are you gonna do? So we'll say const, our new user object is going to await auth., gotta love that Visual Studio code, createUserWithEmailAddressAndPassword.

[00:01:46] That sounds like the one that I want, as you can see with IntelliSense, it takes two arguments, an email address,
>> Steve Kinney: And a password, I have an email address and a password from state, so I can pass those in, email and password. You see, there's not really any place to give it a display name, so we're gonna have to deal with that in a little bit.

[00:02:17] And if we look at this IntelliSense, it'll return a promise, that will be UserCredentials, just like we got when we did the Google auth. All right, so we'll have that, I'm going to do a little quick catch here for now, catch the error.
>> Steve Kinney: I'll just, should we console.error, or do you wanna alert it, what's everyone feeling?

[00:02:46]
>> Steve Kinney: Not all at once, we're making important architecture decisions here.
>> Speaker 2: Console, [CROSSTALK] I like it, there's a little yellow to it.
>> Steve Kinney: You like-
>> Speaker 2: It's very chill,
>> Steve Kinney: Console, now, this is-
>> Speaker 2: I'm not too keen on it-
>> Steve Kinney: We're catching error with console.error, at the very least.

[00:03:03]
>> Steve Kinney: Yeah, we're good at this, cool, and so this'll go ahead and create the user, it'll actually also log them in, which will probably be enough. We're gonna see one option for solving the display name issue, and then we'll see why it's not great, [LAUGH]. So I will get your hopes up, and then I will bring them back down, all right?

[00:03:30] So we'll say user.updateProfile, and you can see, I can update the displayName and the photoURL here.
>> Steve Kinney: We don't have a photoURL yet, so we'll just go with displayName.
>> Steve Kinney: So you'll go ahead and sign up, and we'll be Bob Ross, sure, that seems like a decent email address.

[00:03:58]
>> Steve Kinney: It does insist on six characters, by default.
>> Steve Kinney: So we set the display name, but there's no display name here. And this kinda makes sense, if you think really hard about it, or also known as, it doesn't make any sense until you stare at it, wondering what's wrong.

[00:04:21] And then eventually, it comes to you as you're taking a walk down the street, a week later. Which is, with that first await, we created the user, which logged them in. Which triggered auth state change, which caused us to be logged in, and then we set the display name.

[00:04:40] So if I refresh the page, now we have a display name in there, right, not great. We can solve some of this in, and we could either update some state with it, there's a whole bunch of different options that we can do. I'm gonna solve this by creating that user profile anyway, which is, I'm gonna sit there, and start setting things.

[00:05:02] And create a user profile that that will then hook into the real-time facilities of Cloud Firestore, so I won’t have to worry about any of this, but that is just a thing to think about. Which is, auth state change is not the same as Cloud Firestore, which is for every change to that user.

[00:05:17] It’s only gonna be when they transition from logged-out to logged-in, or from logged-in to logged-out. Which is really what it says on the tin, so that's totally surprising, that it does that, but that is absolutely a thing. So if we go here, we go to Authentication. The only thing we can do in the Firebase console is, we can actually see all of the users that have signed into the application.

[00:05:43] You can go ahead and add, only, if you are using email address and password, you can go ahead and create users manually, too. You can also go ahead here, and you can see, you can reset passwords, disable and delete accounts. So you don't have to build that functionality yourself, you kinda get it for free.