AWS Amplify @aws-amplify/ui-react Authenticator Function Prop Types for Typescript Issues

The Authenticator component is utilized to efficiently handle user authentication flows within your application.

You have the option of either directly using the Authenticator component or wrap your entire application using the withAuthenticator Higher-Order Component (HoC).

1. Authenticator component

In this approach, a custom type, AuthenticatorProps, is created to define the expected types for the signOut and user properties.

import { Authenticator } from "@aws-amplify/ui-react";
import type { AuthEventData } from "@aws-amplify/ui";
import type { AuthUser } from "aws-amplify/auth";

type AuthenticatorProps = {
  signOut?: ((data: AuthEventData | undefined) => void);
  user?: AuthUser;
};
export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }: AuthenticatorProps) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

2. withAuthenticator HoC

The withAuthenticator HoC is used to wrap the Authenticator. Notably, the user and signOut properties are provided to the wrapped component.

import { withAuthenticator } from '@aws-amplify/ui-react';
import type { WithAuthenticatorProps } from '@aws-amplify/ui-react';

function App({ signOut, user }: WithAuthenticatorProps) {
  return (

  );
}
export default withAuthenticator(App);