ASP.NET Core 3 and React

Implementing the sign-in process

Let's implement the sign-in page in SignInPage.tsx:

1. We'll start by adding the following import statements:

import React, { FC } from 'react';import { Page } from './Page';import { StatusText } from './Styles';import { useAuth } from './Auth';

StatusText is a shared style we are going to use when we inform the user that we are redirecting to and from Auth0. useAuth is the custom Hook we implemented earlier that will give us access to the authentication context.

2. Let's define the Props type for the page component:

type SigninAction = 'signin' | 'signin-callback';interface Props {  action: SigninAction;}

The component takes in an action prop that gives the current stage of the sign-in process.

3. We can start ...