What types need to be used for withAuthenticator in a Typescript, Amplify, React application?

reikje 0
Viewed 50

What types should you use in a Amplify-Typescript-React application when using withAuthenticator?

There are only js examples in the docs: https://ui.docs.amplify.aws/react/connected-components/authenticator

Using this works but I have to suppress a number of warnings:

import { Amplify } from "aws-amplify";
import { withAuthenticator } from "@aws-amplify/ui-react";

Amplify.configure({
  Auth: {
    ...
  },
});

function App({ user }) { ... // TS7031 any type - what about isPassedToWithAuthenticator or signOut?

export default withAuthenticator(App); // TS2345 warning
aws-amplify reactjs typescript
1 Answers

I'm not in love with this answer, but in the absence of guidance from the documentation, this is the best solution I came up with for the same problem, without having to suppress any warnings.

type LoggedInProps = {
  appRoute: string;
  cookies: any;
  user: any;
  /* ...other passed props... */
  signOut: any;
};

// This component houses the logged-in state of the app.
const LoggedInBody = withAuthenticator((props:any) => {
  const { 
    appRoute, cookies, user, /* other stuff, */ signOut
  }:LoggedInProps = props;

  /*rest of component goes here */
}

That way I'm still validating that the props that get passed are the right ones, while getting past TS2345.

Daniel Swinney0
Related