Wrong autocomplete value in password field on signIn route and "save-password" not triggered

[simon1389]

Before creating a new issue, please confirm:

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

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator

How is your app built?

Angular builder with vite

What browsers are you seeing the problem on?

Chrome, Firefox, Microsoft Edge

Which region are you seeing the problem in?

eu_central_1

Please describe your bug.

When using the amplify-authenticator component in my angular app, i see username and password field initially. But the autocomplete value of the password field is set to new-password instead of current-password what would be the right one here i guess. As i understood new-password is for the signup process. As a consequence the "save-password" dialog is not correctly triggered for my users i guess and they cannot store their password in the password-manager as they were used to when my app used the hosted-cognito-ui before.

Here a screenshot of the DOM showing that issue:

What's the expected behaviour?

autocomplete value should be current-password and the save-password-mechanism of the browser should be triggered correctly

Help us reproduce the bug!

There was no special action to have that behavior. Just including the amplify-authenticator component in the angular app.

Code Snippet

// Put your code below this line.

Console log output

No response

Additional information and screenshots

Versions used in the package.json are

"aws-amplify": "^6.3.4",
"@aws-amplify/ui-angular": "^5.0.18"

[jacoblogan]

@simon1389 Thank you for reaching out with this issue. I am trying to reproduce the issue and in my basic implementation of the Authenticator component the behavior I am seeing is current-password is set for the Sign in form and new-password is set for the Sign Up form. Could you provide additional details on your configuration and usage of the Authenticator component or provide a minimal reproduction that demonstrates the issue.

In the meantime while we work on the issue you could try to customize the form fields to manually set the sign in autocomplete field as described in the documentation https://ui.docs.amplify.aws/angular/connected-components/authenticator/customization#form-field-customization.

import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';

import config from './amplify_outputs.json'

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  constructor() {
    Amplify.configure(config);
  }
  public formFields = {
    signIn: {
      password: {
        autocomplete: "current-password"
      },
    }
  };
}

<amplify-authenticator [formFields]="formFields">
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h2>Welcome, {{ user.username }}!</h2>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>

[simon1389]

@jacoblogan Thank you for your answer and i think i now got how it behaves: In my application i have defined the formFields input for the amplify-authenticator component. They are defined like that:

"signIn": {
     "username": {
           "placeholder": "Gib deinen Usernamen ein"
        },
      "password": {
            "placeholder": "Gib dein Passwort ein"
        }
  }

If i omit passing the formFields, then my password field also got the autocomplete="current-password". If i add the formFields as above, then the autocomplete-value is "new-password". I can fix that by explicitely writing "autocomplete":"current-password" in my formFields definition as you said.

But i think this is not how it should behave, right? I mean... the default value should stay if i do not define it in my formFields

[jacoblogan]

@simon1389 thanks for providing your component definition. Yes the default value of current-password should stay when it is not defined in the formFields.