Progressive Web Apps with React

Logging out

Okay, we've handled our user logging in, but what about when they want to log out?

Let's build them a button at the top of ChatContainer to allow them to log out. It'll fit best in the Header component, so why don't we build it in there?

Well, hold up. We currently use the Header on our /login path, in the LoginContainer. If we add a Logout button, it'll appear on the sign-in screen as well, which is just confusing. We need a way to only render the Logout button on the ChatContainer.

We can take advantage of the Route history prop and use that to do a conditional rendering of the Logout button based on the URL (if the path is "/", render the button, otherwise don't!). However, that can be messy and hard to understand for future ...