Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
simon1389 opened this issue Aug 7, 2024 · 3 comments
Open
4 tasks done
Labels
Authenticator An issue or a feature-request for an Authenticator UI Component bug Something isn't working

Comments

@simon1389
Copy link

Before creating a new issue, please confirm:

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:

image

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"
@github-actions github-actions bot added the pending-triage Issue is pending triage label Aug 7, 2024
@jacoblogan
Copy link
Contributor

@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>

@jacoblogan jacoblogan added bug Something isn't working pending-response question General question and removed pending-triage Issue is pending triage bug Something isn't working labels Aug 7, 2024
@simon1389
Copy link
Author

@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
Copy link
Contributor

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

@jacoblogan jacoblogan added bug Something isn't working and removed question General question pending-response labels Aug 8, 2024
@reesscot reesscot added the Authenticator An issue or a feature-request for an Authenticator UI Component label Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Authenticator An issue or a feature-request for an Authenticator UI Component bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants