Controlling authenticated options

In this section, we are going to only make relevant options visible for authenticated users. We are going to store user authentication information in a context that components can consume and use to show and hide options.

Displaying the relevant options in the header

At the moment, the Header component shows the Sign Up 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:

1. We'll start by importing the authentication context Hook:

import { useAuth } from './Auth';

2. Let's Hook into the authentication...