Finish the Authentication Flow

[00:00 - 00:16] In the previous lesson, you build authentication for, allowing users to register and login. This lesson will focus on finishing the authentication flow by doing two things , adding a logout function to user context, and adding a log to in state to the login button.

[00:17 - 00:47] Let's start with adding a logout function. The user context needs a logout function to clear the user in token states when the user logs out. Let's start by adding the logout function to the user context type and initial state. Navigate to user context, add the logout function, and add it to the initial state.

[00:48 - 01:01] Then implement the logout function inside the user context provider. It's fairly simple. It's a function that called the set user with null and the set token with null as well.

[01:02 - 01:18] Let's also remove the local storage item that we are saving in the saved token function. Now add it to the exported value of the user provider.

[01:19 - 01:32] Now let's do the second step, adding a log to in state for the login button. After the user logs in, you want to change the login button to show an indication that the user is already logged in and allow the user to log out.

[01:33 - 01:57] For the first part, you'll use the shadcn/ui avatar component and for the second part, you'll show it to RobDoneMenu with the logout button and call the logout function. So let's install both components, shadcn/ui at latest, add avatar and RobDone Menu.

[01:58 - 02:17] Now go to login button and let's get the user and logout function from the useUser hook Now let's render conditionally. If there is no user, we want to render the login button which we currently have implemented.

[02:18 - 02:39] And if there is a user, we want to render it DropDownMenu with a trigger which is the button that will be opening the drop-down. We want to render an avatar with the avatar folder component.

[02:40 - 02:59] Then we want to show the user name, first characters. And we want to make it an uppercase.

[03:00 - 03:22] Now add the drop-down menu content, what will be shown once the trigger is clicked. Then add a drop-down menu item and on click of it and once the user click on it , we want to call the logout function.

[03:23 - 03:39] Let's add a pointer to it as well. Then add the logout label.

[03:40 - 04:05] Now let's go to the site header and update the login simple button that we had before to the login button. We run the app and open it in your browser.

[04:06 - 04:14] Now we can see that we have an iteration error. This means that the initial HTML coming from the server was not matching the one on the client.

[04:15 - 04:24] There is a mismatch between the server HTML to the one on the client. You can solve that by adding a is init-completed state to the user context.

[04:25 - 05:03] Add init-completed Boolean, set it to false in the initial state and create a state object for it. Add it to false, return it in the value and only set it to true once the init user function is completed.

[05:04 - 05:28] Now go back to the login button, get the init-completed value and if it's not true, simply render an empty avatar-foldback component. Go to the browser.

[05:29 - 05:35] We forgot to add a comma. Refresh the page and now we don't have any issue.

[05:36 - 05:51] Let's see that for the logout state. We can actually test the logout, refresh the page and we don't have any error again.

[05:52 - 06:02] Let's try to register and log in again. I have logged in successfully and refreshing the page, I don't have any issue.

[06:03 - 06:08] That's it for this lesson. In the next lesson, you'll implement the RSVP functionality.