ASP.NET Core 3 and React

Only allowing authenticated users to answer a question

Let's focus on the QuestionPage component now and only allow an answer to be submitted if the user is authenticated:

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

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 QuestionPage: ... = ( ... ) => {  ...  const { isAuthenticated } = useAuth();  return (    ...  );};

3. We can then use the isAuthenticated property and a short-circuit operator to only render the answer form if the user is signed in:

<AnswerList data={question.answers} />{isAuthenticated && (  <div    ...  >    <Form submitCaption="Submit Your Answer" ...