ASP.NET Core 3 and React

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 context and return the user object, whether the user is authenticated, and whether the context has loaded just before the JSX is returned:

export const Header: FC<RouteComponentProps> = ( ... ) => {  ...  const { isAuthenticated, user, loading } = useAuth();  return (    ...  );};

3. We can use the loading