formFields not being respected on Authenticator signIn page

[jburn7]

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?

Create React App

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

Passing formfields to <Authenticator/> does not respect the value within those form field customizations, e.g. the defaultValue or placeholder for the signIn username field

What's the expected behaviour?

<Authenticator/> should use the customized values that are passed via formFields

Help us reproduce the bug!

Using the example directly from the docs: https://ui.docs.amplify.aws/react/connected-components/authenticator/customization#updating-labels-placeholders-required-fields-and-showing-labels

On that page, the example shows the username field with the correct label and placeholder of "Email" and "Enter Your Email Here" respectively.

In my application with the same code, I see the following:

Note that the color customization defined in my index.css does appear to be working

Code Snippet

const formFields = {
  signIn: {
    username: {
      placeholder: 'Enter Your Email Here',
      isRequired: true,
      label: 'Email:'
    },
  },
}

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

Console log output

No response

Additional information and screenshots

"@aws-amplify/ui-react": "^6.5.1",
"aws-amplify": "^6.6.2",

[jacoblogan]

@jburn7 using the provided code I'm having a hard time producing this bug. I've created a working reproduction https://codesandbox.io/p/sandbox/hungry-leakey-wq9q2f can you provide additional details or a minimal reproduction of the bug?

[reesscot]

@jburn7 Can you share your amplify_outputs file with any sensitive values redacted?

[jburn7]

@reesscot I actually don't see the amplify_outputs anywhere. Should it be there by default or do I need to generate it somehow?

[reesscot]

@jburn7 OK, you must be using gen2 then. Can you please share your amplify/auth/resource.ts file so we can see how your auth category is configured?

[jburn7]

@reesscot I don't seem to have the /auth folder under amplify, nor a resource.ts file anywhere

[cwomack]

@jburn7, thanks for the follow up here. It may be a Gen 1 app where you provisioned your resources via the Amplify CLI then? And either way, can you share your package.json file so we can see your dependencies/versions as well as what the shape of your Amplify config looks like (redact any sensitive information, please)?

[jburn7]

@cwomack Yes we did indeed configure the resources via the CLI

package.json:

{
  "name": "***",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost",
  "dependencies": {
    "@aws-amplify/ui-react": "^6.5.1",
    "@aws-sdk/client-chime": "^3.658.0",
    "@aws-sdk/client-cognito-identity": "^3.658.0",
    "@aws-sdk/client-transcribe-streaming": "^3.658.0",
    "@aws-sdk/credential-provider-cognito-identity": "^3.658.0",
    "@casl/ability": "^6.0.0",
    "@casl/react": "^3.0.1",
    "@craco/craco": "^6.4.5",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@headlessui/react": "1.7.8",
    "@react-pdf/renderer": "^4.0.0",
    "@tanstack/query-core": "^4.19.1",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.44",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "amazon-chime-sdk-js": "^3.24.0",
    "amazon-cognito-identity-js": "^6.3.12",
    "aws-amplify": "^6.6.2",
    "buffer": "^6.0.3",
    "export-to-csv-fix-source-map": "^0.2.1",
    "jotai": "^1.11.0",
    "jotai-tanstack-query": "^0.4.0",
    "linkify-react": "^4.0.2",
    "linkifyjs": "^4.0.2",
    "microphone-stream": "^6.0.1",
    "process": "^0.11.10",
    "react": "^18.2.0",
    "react-datepicker": "^4.15.0",
    "react-device-detect": "^2.2.2",
    "react-div-100vh": "^0.7.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "7.38.0",
    "react-hot-toast": "^2.4.1",
    "react-password-checklist": "^1.5.0",
    "react-phone-number-input": "^3.3.7",
    "react-router-dom": "6.8.2",
    "react-scripts": "5.0.1",
    "react-table": "^7.8.0",
    "react-to-print": "^3.0.2",
    "react-tooltip": "^5.26.0",
    "react-use": "^17.5.1",
    "react-virtualized-auto-sizer": "^1.0.6",
    "react-window": "^1.8.7",
    "socket.io-client": "^4.8.0",
    "twin.macro": "3.3.0",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "craco start",
    "start:dev": "craco start",
    "build": "GENERATE_SOURCEMAP=false craco build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "../../.eslintrc",
      "./.eslintrc"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@aws-amplify/cli": "latest",
    "@emotion/eslint-plugin": "^11.7.0",
    "@types/linkifyjs": "^2.1.4",
    "@types/react-datepicker": "^4.11.2",
    "@types/react-table": "^7.7.12",
    "@types/react-virtualized-auto-sizer": "^1.0.1",
    "@types/react-window": "^1.8.5",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.3.0"
  }
}

Amplify.configure:

Amplify.configure({
  Auth: {
    Cognito: {
      userPoolId: ***,
      userPoolClientId: ***
      loginWith: {
        oauth: {
          domain,
          scopes: ['openid', 'email', 'phone', 'profile', 'aws.cognito.signin.user.admin'],
          redirectSignIn: [`***`],
          redirectSignOut: [`***`],
          responseType: 'code'
        },
        username: true,
        email: true,
        phone: false
      }
    }
  }
});

[cwomack]

@jburn7, we're not able to reproduce this on our side using the sample code you've provided. Are you able to provide a minimal sample repo where this is happening? Or if not a full sample repo, can you provide more of the frontend code? Thanks!