Use Auth State in UI Elements

Ryan Chenkie: [0:00] I mentioned earlier that my name up here in the dropdown is currently just hard coded in place. Now that we've got some AuthStates, and we've got items like firstName, why don't we go change that up so that it's more dynamic?

[0:13] Let's go into components. We'll look for avatar dropdown. We should be able to see somewhere in here where my name is hard coded in. Here it is. This is where we can make direct use of that AuthState.

[0:28] In fact, we are already using Auth state up here in anticipation. We're saying, let's get AuthState userInfo avatar if it exists, or a default avatar if it does not exist. We can do something similar.

[0:42] Let's remove this and we'll do AuthState(userInfo, firstName). If we save that, we should see the same thing up here. Right now, there's nothing coming through. That's because when we refresh the page, we lost our AuthState. This is something that we'll see in a little bit, is how to persist AuthState when the page refreshes.

[1:06] For now, if we just go to login, we should be able to see it. We'll go to login, plug in an email and password. Once we're back at the dashboard, there we have the first name.

End-to-End Security with Auth0

Already enrolled?
Sign in to continue learning.