Can't export SignIn from "aws-amplify/ui-react"

Question

I am using "aws-amplify/ui-react" withAuthenticator and would like to pass a SignIn component with some custom logic. It is possible to do with "aws-amplify-react", but I can't do it with the ui-react library, it says can't export SignIn from "aws-amplify/ui-react". Is there a way to add it to the withAuthenticator?

Answer 1

in the latest version of aws-amplify/ui-react, we remove the exports of building blocks like SignIn component. To maintain the flexibility of customization, you can leverage the component props to pass you custom component and custom logic there:

const components = {
  // Wirte your custom SignIn component
  SignIn: {
    Header() {
      const { tokens } = useTheme();

      return (
        <Heading
          padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
          level={3}
        >
          Sign in to your account
        </Heading>
      );
    },
    Footer() {
      const { toResetPassword } = useAuthenticator();

      return (
        <View textAlign="center">
          <Button
            fontWeight="normal"
            onClick={toResetPassword}
            size="small"
            variation="link"
          >
            Reset Password
          </Button>
        </View>
      );
    },
  },
};

export default function App() {
  return (
    <Authenticator formFields={formFields} components={components}>
      {({ signOut }) => <button onClick={signOut}>Sign out</button>}
    </Authenticator>
  );
}

Please refer more details from our docs site - https://ui.docs.amplify.aws/components/authenticator#customization