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...