AWS Amplify @aws-amplify/ui-react Authenticator function prop types for typescript issues

Question

Spent quite sometime trying to use the relevant types in my aws amplify app which uses the amplify auth.

From the @aws-amplify/ui-react module been struggling to type the props correctly.

documented use case:

<Authenticator>
  {({ signOut, user }) => (
      <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
      </main>
  )}
</Authenticator>

I would like to type the signOut and user props respectively. The IDE suggests that the props should be typed like so:

signOut is ((data?: (AuthEventData | undefined)) => void) | undefined

user is CognitoUserAmplify

Therefore importing these from the aws-amplify modules throws the following errors:

Module '"aws-amplify"' has no exported member 'AuthEventData

Module '"aws-amplify"' has no exported member 'CognitoUserAmplify'

What is the recommendation approach if one seeks to add types? All documented demos are in javaScript and no reference to typescript types or typings.

Answer 1

I am not sure what the recommended approach is, but I solved it by:

import { AuthEventData, CognitoUserAmplify } from '@aws-amplify/ui-react/node_modules/@aws-amplify/ui';

type AppProps = {
    signOut: ((data?: (AuthEventData | undefined)) => void) | undefined;
    user: CognitoUserAmplify | undefined;
};

const App = ({ signOut, user }: AppProps) => {
...
}