React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.

Check out a free preview of the full Firebase with React, v2 course:
The "Authentication UI" 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 exposes the prewritten UI to allow the user to sign in or sign up.

Get Unlimited Access Now

Transcript from the "Authentication UI" Lesson

>> Steve Kinney: I probably wanna keep track of the current user. I'm gonna need that for all sorts of things, right? We saw that posts can be attributed to a user if I go into the AddPost, or I think it's in posts, plural.
>> Steve Kinney: It's in AddPost, right now I have it hard coded in user, right?

[00:00:22] So we know that, on top of just being able to get tokens for talking with a database, we also wanna hold on to this user information and work with it. So I'm probably going to want to keep it in my application state as well, so I can use it when I create new content.

[00:00:37] But also, we're gonna get to the point where, in this liveblogging app, anyone can make a post. But right now, anyone can delete anyone's post, right? And so we'll eventually get to the point where we have authentication rules, or authorization rules, in place that say, hey, you can only delete your own posts, right?

[00:00:55] Or only logged in users can go ahead and make posts. Right now, we have not wired in authentication yet. So it stands to reason that you don't need to be authenticated to make a post, see also we've been making posts. So let's put a user in here as well.

>> Steve Kinney: And we'll just store it as null at this moment, we'll go and fetch one in a second. And we'll begin to put in the ability to log in. Right now there are just posts, but you can see I've got this SignInAndSignUp. And I've also got this Authentication one which basically says either show me the CurrentUser or show me the SignUpAndSignIn one, so we'll start with that one.

[00:01:50] And we'll go ahead and put that in Application, and put it right below the heading and above the post.
>> Steve Kinney: We'll pull the user off of state.
>> Steve Kinney: Now user is null, so we should see those SignUpAndSignIn forms.
>> Steve Kinney: Index does not match the corresponding name on disk during authentication, let's go take a look there.

>> Steve Kinney: React has a lowercase r, all right.