In this episode, we're tackling the classic annoyance of having to clear out cookies manually to log out. Instead, we add a log out button directly in our app's navigation, making signing out way more user-friendly.
First, we jump into our navigation component and look for where our log in and log out links live—both in mobile and desktop views. We clean up the display logic a bit so that "Log out" only shows if the user is authenticated, and "Log in" only shows if they're not.
Next, we wire up the click handler for the log out button. When it's clicked, we trigger our log out method, which handles the sign-out process. But we're not stopping there—we want to be sure the user is redirected once they're logged out. So, after logging out, we programmatically use our router to send them back to the homepage for a clean user experience.
After implementing the changes, we do a quick test: logging in, then logging out, and watching the user get sent straight home. No more manual cookie clearing!