Check out a free preview of the full Firebase with React, v2 course:
The "UI Permissions" 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 augments the user interface so that the delete button doesn’t show when the post doesn’t belong to the current user.

Get Unlimited Access Now

Transcript from the "UI Permissions" Lesson

[00:00:00]
>> Steve Kinney: All right, so now we have both in place. We can do a little bit of cleaning up of the user interface. Which is when we implemented those security rules, we have a whole bunch of stuff here that the user's gonna get yelled at for doing, right. Like, if they're not logged in, we still show them the ad post forum, even though, right, they shouldn't see it, right.

[00:00:26] And so there's a whole bunch of little things that we can and should do, in this case we could, for instance we might want to hide the Delete button from the ones they can't delete, right. We'll start with using just auth for that right now because both of these, actually for post we can just do it, I believe,

[00:00:51]
>> Steve Kinney: For just the regular post cuz that's to show the power of the abstraction we just built. We can just say,
>> Steve Kinney: useContext now.
>> Steve Kinney: And we'll actually, I'm gonna create myself just a little helper function here just because I don't wanna get too gnarly in here. We'll say,

[00:01:24]
>> Steve Kinney: belongsToCurrentUser.
>> Steve Kinney: Pass in a currentUser, and the user that owns this.
>> Steve Kinney: Whoop, I don't wanna talk about how many times I make that mistake, it's embarrassing.
>> Steve Kinney: There's no current user, at any given point, currentUser could be nul, so we always have to be kind of defensive against that.

[00:01:58] And then we'll do currentUser.uid.
>> Steve Kinney: We'll call this one postAuthor,
>> Steve Kinney: .uid. And so this is just a simple function that will take the currentUser object and the user that is passed into this post and see if their uids are the same. If the uids are the same they should be able to delete the post.

[00:02:26] If they are not the same, then they shouldn't. And before I made this abstraction, I would have had to pass the user down from the application to the posts, from the posts to the singular post, all the way down in order to be able to do this, right.

[00:02:44] I don't really want to do that, so with this now I can just simply wrap the components that care about a user in this. So I'm already being able to use this abstraction here. So we'll get the user here, and for the Delete button we'll just say,
>> Steve Kinney: User, actually these are both called user so that's not gonna go great.

[00:03:09] Call this one currentUser.
>> Steve Kinney: User,
>> Steve Kinney: We'll close that curly brace. We should be good. Unclear what I have in the same AI application. So now you can see that, okay, this component is somewhere down the tree. And yeah, this still a small application, but you can imagine it growing bigger.

[00:03:39] This one component is somewhere down the tree that cared about the user. Cool, I can just pass it right to that component. And now we don't show the Delete button for that one, which is awesome