Controlling Authenticated Options

We are going to only make relevant options visible for authenticated users. We will do this using the isAuthenticated flag from the useAuth0 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. Let's clean this up in Header.tsx in the following steps: