How do I pass signUpConfig to Amplify's withAuthenticator HOC without getting Typescript errors

Question

I am trying to create a react app using Typescript and AWS Amplify for user authentication. I want to limit the sign up fields to only be email and password.

According to the AWS doc, I should be able to achieve this with the minimal example supplied below, however

TypeScript error in ......../frontend/src/App.tsx(43,41):
Argument of type '{ signUpConfig: { header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }; }' is not assignable to parameter of type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.
  Object literal may only specify known properties, and 'signUpConfig' does not exist in type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.  TS2345

    41 |   };
    42 | 
  > 43 | export default withAuthenticator(App, { signUpConfig });
       |                                         ^
    44 |

Minimal example

import './App.css';
import React from 'react';
import awsConfig from './amplify-config';

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import Amplify from 'aws-amplify';

Amplify.configure(awsConfig);

function App() {
  return (
    <div className="App">
        
    <AmplifySignOut />
      <header className="App-header">
        Test
      </header>
    </div>
  );
}

const signUpConfig = {
    header: 'My Customized Sign Up',
    hideAllDefaults: true,
    signUpFields: [
      {
        label: 'My custom email label',
        key: 'email',
        required: true,
        displayOrder: 1,
        type: 'string'
      },
      {
        label: 'My custom email label',
        key: 'password',
        required: true,
        displayOrder: 2,
        type: 'password'
      }
    ]
  };

export default withAuthenticator(App, { signUpConfig });

I have tried to figure out what the typescript Type for signUpConfig is. I think that is ComponentPropsWithRef<typeof AmplifyAuthenticator>, but that does not really help me at all about what to put into the signUpConfig object or why it does not work. According to the error message the type is 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>', but that is not helping me at all either.

If I do not pass in the signUpConfig, then the app works as expected.

If I pass in signUpConfig without wrapping it in {}, then I get this error.

Type '{ header: string; hideAllDefaults: boolean; signUpFields: { label: string; key: string; required: boolean; displayOrder: number; type: string; }[]; }' has no properties in common with type 'AmplifyAuthenticator & HTMLAttributes<HTMLAmplifyAuthenticatorElement> & ReactProps & RefAttributes<...>'.

Answer 1

The latest version (today is Apr 21 2021) @aws-amplify/ui-react library is based now on slots and requires a slightly different approach for configuration. What worked for me is this example from the amplify docs: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#customization