formFields are not applied to forgotPassword page

[MauriceHeinze]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Vite

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

The custom form fields are not applied to the reset password page.

What's the expected behaviour?

I expect to see my custom label ("Your Email Address") on the reset password page.

Help us reproduce the bug!

Copy paste my code and click on "forgot your password?"

Code Snippet

import { useAuthenticator, View, useTheme, Authenticator, Button, Flex, Heading, Image, Text } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import { Amplify } from 'aws-amplify';
import awsExports from '../aws-exports';
import { useEffect } from 'react';

Amplify.configure({
Auth: {
region: awsExports.REGION,
userPoolId: awsExports.USER_POOL_ID,
userPoolWebClientId: awsExports.USER_POOL_APP_CLIENT_ID
}
})

const components = {
Header() {
const { tokens } = useTheme();

return (
  <View textAlign="center" padding={tokens.space.large}>
    <Image
      alt="Amplify logo"
      src="../src/assets/logo.svg"
    />
  </View>
);

},

SignIn: {
Header() {
const { tokens } = useTheme();

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

},
};

const formFields = {
signIn: {
username: {
placeholder: '',
isRequired: true,
label: 'Email:'
},
password: {
placeholder: '',
isRequired: true,
label: 'Password:'
},
},
forgotPassword: {
username: {
placeholder: '',
isRequired: true,
label: 'Your Email Address'
},
},
forceNewPassword: {
password: {
placeholder: '',
isRequired: true,
label: 'New Password:',
},
confirm_password: {
placeholder: '',
isRequired: true,
label: 'Repeat New Password:',
}
},
confirmResetPassword: {
confirmation_code: {
placeholder: '',
isRequired: true,
label: 'Confirmation Code:',
},
password: {
placeholder: '',
isRequired: true,
label: 'New Password:',
},
confirm_password: {
placeholder: '',
isRequired: true,
label: 'Repeat New Password',
},
},
setupTotp: {
QR: {
totpIssuer: 'test issuer',
totpUsername: 'amplify_qr_test_user',
},
confirmation_code: {
placeholder: '',
isRequired: true,
label: 'Confirmation Code:',
},
},
confirmSignIn: {
confirmation_code: {
placeholder: '',
isRequired: true,
label: 'MFA code',
},
},
};

function App() {

return (

{({ signOut, user }) => (

Hello {user?.username}

Sign out

)}

);
}

export default App;

Console log output

No response

Additional information and screenshots

No response

[calebpollman]

@MauriceHeinze Was unable to reproduce this issue in @aws-amplify/[email protected]. Can you verify that you using the latest version?

[MauriceHeinze]

Hi @calebpollman,

Thanks for the info! Somehow my Amplify version was locked to 5.3.12 and I didn't work with version 6. Nevertheless what solved my error was using resetPassword instead of forgotPassword like it tolds you in the documentation here: https://ui.docs.amplify.aws/react/connected-components/authenticator/customization#updating-labels-placeholders-required-fields-and-showing-labels:~:text=confirmation_code-,forgotPassword,-username

[ioanabrooks]

@MauriceHeinze going to close this, let us know if you have any other issues!