search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

[Vue] Unable to authenticate on Android #3598

Closed DanielMuller closed 5 years ago

DanielMuller commented 5 years ago

Describe the bug When trying to authenticate on Chrome Android using amplify-authenticator, the username isn't sent to Cognito, resulting in "Username cannot be empty" error. This happens when typing the username in the field, not when using autocomplete from saved logins. This doesn't happen on Desktop, only on mobile and only with certain keyboards.

This is related to vuejs/vue#8723

The problem is in https://github.com/aws-amplify/amplify-js/blob/6d34cbd865d813bb6b542bcd90d9ce05eaac40a0/packages/aws-amplify-vue/src/components/authenticator/UsernameField.vue#L92-94 this.username is empty when usernameChanged() is called.

To solve this, the input attribute needs to be added in input fields.

To Reproduce Steps to reproduce the behavior:

  1. Create an authentication page using amplify-authenticator
  2. Enter a username
  3. Enter a password
  4. Login fails "Username cannot be empty"

Expected behavior Typed username should be used.

Screenshots In this jsfiddle, typing anything in the fields should reproduce the content in the yellow box. First box is using only v-model, second box is using v-model and input

Desktop (please complete the following information): No issue no Desktop

Smartphone (please complete the following information):

Sample code https://jsfiddle.net/Lpwtfs4o/

jordanranz commented 5 years ago

Hey @DanielMuller, could you point me to the documentation related to using the input attribute inside of an input element. I couldn't seem to find any information about it.

I was not able to reproduce this on iOS. I can try on an Android device.

jordanranz commented 5 years ago

Curious if this change would fix the problem you are experiencing: https://github.com/vuejs/vuejs.org/pull/1798

DanielMuller commented 5 years ago

@jordanranz The PR you mention doesn't fix the issue, it just sets the documentation straight. From this comment on the VueJS repo, it seems to be failing with the default keyboard on Android only. iOS or other Android keyboards don't seem to be affected.

It looks like the issue is how this keybord triggers input changes on Android-MobileWeb. In the amplify-vue component, they keyup event seems to be fored before this.username is updated. Which leads to en empty username sent to Cognito.

jordanranz commented 5 years ago

Sorry, I meant if we use v-bind and v-on:input instead of v-model inside of the Amplify Vue component. This may fix your issue. I will try and reproduce this on a virtual device.

DanielMuller commented 5 years ago

I was able to make it work by using v-model and v-on:input based on this comment. Tested it on Chrome-Android, and Chrome Desktop. I will push a PR soon.

jordanranz commented 5 years ago

Awesome, will take a look now. Thanks for submitting a PR

jordanranz commented 5 years ago

Merged the fix. Please reopen a new issue if there are any related problems to this.

github-actions[bot] commented 3 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.