Controlling authenticated options

In this section, we are going to only make relevant options visible for authenticated users. We will do this using the isAuthenticated flag from the useAuth Hook we created in the last section.

We will start by showing either the Sign In option or the Sign Out option in the Header component. We will then only allow authenticated users to ask questions in the HomePage component and answer a question in the QuestionPage component. As part of this work, we will create a reusable AuthorizedPage component that can be used on page components to ensure that they are only accessed by authenticated users.

Displaying the relevant options in the header

At the moment, the Header component shows the Sign In and Sign Out options, but the Sign In option is only relevant if the user hasn't signed in. The Sign Out option is only relevant if the user is authenticated...