Now let's go ahead and let's create a user button component which we're gonna use so we can easily log out and also access our billing page. So I want you to be logged in and go to slash editor slash one two three And let's go ahead and go instead of source features, editor components. And I think that if you take a look at the navbar component here, I think we left a little comment. So instead of navbar directly, we should have a to do comment, I believe. There we go.
Add a user button. So let's go ahead and add the user button component. Before we can do that we're gonna have to install a package from chat-cnui. So bunx chat-cnui at latest add avatar. That's the package we are going to need now let's just wait a second there we go and bun run dev go ahead and refresh this page and now let's go ahead inside of source, features, auth, components and inside create a user-button.tsx.
Let's mark this as use client and let's go ahead and let's import avatar from components UI avatar, avatar fallback and avatar image. So we're gonna need three of these right here. Besides that, we are also going to need everything from the drop-down menu. This is a component we already have installed. So make sure you add the menu, menu content, menu item, separator and trigger all from components UI drop-down dash menu.
And now let's export const user button. I'm just going to return a div with a text user. And now we can revisit our navbar component where we have the comment to add the user button and let's add it here. From features out component user button. It's going to be a self-closing tag.
So if you're looking at it from the end and you didn't left a comment it's after the navbar, before the navbar ends before this div and then before this div so after your user button you should have two closed divs and then a closed navbar if that is easier for you So just after the drop-down menu ends. Great, and make sure you've added the proper import here, features out components, user button. I'm just gonna add it here. There we go. So inside of the user button now, let's go ahead and actually style it.
So the entire thing will actually be a drop-down menu. And to fix a little bug which we're gonna have later, let's go ahead and give it a model, false. So we're doing this for the future when one of the drop-down items will open a model and this usually causes a bug which freezes the entire body because it activates an overflow lock. But by adding this prop to false that bug will not happen in the future. So let's now add drop-down menu trigger here.
And the trigger itself will be an avatar component. The avatar will have the avatar image here. And also the avatar fallback. Which is not a self-closing component. So now let's go ahead and let's get our session.
Now here's the thing. This is a client component and we know how to get the session, right? So if you go inside of page, we know that we can get the session by awaiting the Auth method. But we cannot do that inside of UseClient. So what we have to do is we have to create a hook useSession which will allow us to get the current session inside of these useClient type of components.
So let's go to our root layout. So inside of app folder you have the root layout page and in here let's go ahead and let's import session provider from next auth react and also Let's go ahead and get the actual out from at slash out. And then turn this function root layout into an asynchronous method. Inside of here, fetch the session using await out and wrap the entire thing in a session provider which we've just imported like this and simply passing the session as session. Great!
And now you should have the ability to fetch useSession in client components. So let's go inside of user button here and let's go ahead and import useSession from nextauth slash react. So inside of here if I go ahead and fetch the session with useSession, I should be able to get my user. So let's go ahead and try this out first. So if session.status is loading, in that case we're going to return a loader From Lucid React, so just make sure you have this import here the loader we have a class name of size for animate spin and text muted foreground So now if you refresh for a second here while it's loading you should have a little spinner but if it loads too fast it's actually not going to be visible so let's just continue developing here.
We're also going to do another check if session.status is unauthenticated or if we don't have session.data which technically should never happen because we are automatically going to redirect the user to the sign-in page But we still have to check this this clause because of the types, right? So we're just gonna not render anything. We cannot render the user button if we can't load the session. Great and now that we have that we can go ahead and do this const name will be session.data user name and let's put an exclamation point at the end because we know it's going to exist at this point and image URL will be session.data user name and you can also put an exclamation, my apologies, not name, image. You can also put an exclamation point here.
Actually image cannot exist if you are using credential login so let's leave it like this so we're gonna go ahead and for the avatar image we're gonna give it an alt of name we're gonna give it a source of image URL or an empty string because if you just put image URL you're going to get an error. So let's do this. And in the avatar fallback we're gonna do name character at 0 to uppercase so that's gonna be the fallback if we can't load the image of the user. And now I want to give the avatar itself a class name of size 10, hover opacity 75 and transition. For the avatar image I'm not going to do any classes but for the avatar fallback let's write a class name background blue 500 font medium and text white.
Let's go ahead and see if we can see our image here and there we go. You can see how my GitHub has loaded this image. So that's because I logged in with GitHub. So you can sign out and try logging in with either Google or GitHub. So you're going to be able to see your image here.
Great. So now that we have this, let's go ahead and let's create the actual drop-down menu content. So drop-down menu content here. We'll have a line and a class name with 60. And inside of here, let's add a drop down menu item which will have the following class name, height of 10 and let's go ahead and give it an onClick of an empty array and disabled of false because later I want to Remember that I want to make this dynamic.
Once we have a method which will actually open the billing page. And we're going to add a icon here which will be credit card from Lucid React. So just make sure you add this. Let's give the credit card a class name size 4 and margin right of 2. Below this item add a drop-down menu separator which is a self-closing tag and then another drop-down menu item with a class name height 10 inside add a logout icon from Lucid React so make sure you added this import as well and let's also give it this class name and let's write logout and let's prepare an on click here as well.
So now when you click on your user you should see billing and logout. We can't develop billing at the moment, but we can develop logout functionality. So I just want to add a to-do here, which I'm going to put right here. To-do, add crown if user is premium. So we're going to do that once we actually have somewhere to read from whether the user is currently premium or not.
And now the only method we can develop here is the logout method. So we do have sign out here but just as sign in it can only be used in server components but luckily for us we have the next out react package so from here we can import sign out like this and now let's simply call sign out here for the logout button and let's try it out now so click on your user button and click logout and you should be redirected to the login page. Perfect. And let me now try my credential login here. I am logged in, great.
I don't have an image and let me go inside of the editor and I can see my letter right here. Perfect. Let me see if I can maybe center the letter even further. It looks centered but maybe we can do it better. Can I add flex and item center here and justify center?
Maybe it improves it, maybe not. I'm not exactly sure, but it looks centered. Great, so Billing does nothing at the moment, but Logout definitely logs out the user. Amazing, amazing job!