ASP.NET Core 3 and React

Only allowing authenticated users to ask a question

Let's move to the HomePage component and only show the Ask a question button if the user is authenticated:

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

import { useAuth } from './Auth';

2. Let's Hook into the authentication context and return whether the user is authenticated just before the JSX is returned:

export const HomePage: FC<Props> = ( ... ) => {  ...  const { isAuthenticated } = useAuth();  return (    ...  );};

3. We can then use the isAuthenticated property from the auth variable and a short-circuit operator to only render the Ask a question button if the user is signed in:

<Page>  <div    ...  >    <PageTitle>Unanswered Questions</PageTitle>    {isAuthenticated && ( <PrimaryButton onClick={handleAskQuestionClick}> ...