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 to implement the component now:

export const SignInPage: FC<Props> = ({ action }) => {

};

4. Let's get the signIn function from the authentication context:

export const SignInPage: FC<Props> = ({ action }) => {
  const { signIn } = useAuth();
};

5. We can now call the signIn function if we are in the process of signing in:

export const SignInPage: FC<Props> = ({ action }) => {
  const { signIn } = useAuth();

  if (action === 'signin') {
    signIn();
  }
};

6. Our final task is to render the JSX:

export const SignInPage: FC<Props> = ({ action }) => {
  const { signIn } = useAuth();

  if (action === 'signin') {
    signIn();
  }

  return (
    <Page title="Sign In">
      <StatusText>Signing in ...</StatusText>
    </Page>
  );
};

We render the page informing the user that the sign-in process is taking place.