Controlling Authenticated Options
Explore how to manage authenticated user options in a React app with Auth0. Learn to conditionally display sign-in and sign-out buttons, restrict actions like asking questions to signed-in users, and secure pages with a reusable AuthorizedPage component. This lesson helps you ensure users only see options relevant to their authentication status.
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: