Apple binary rejected because of "Username cannot be empty"

[shawnlauzon]

Describe the bug
I have an app that uses AWS Amplify within the Ionic framework. I have submitted it to the Apple Store, and they have rejected it because the service returns "Username cannot be empty" even though the fields are set. Screenshots are below.

Unfortunately I cannot reproduce this behaviour through web or through a simulator or through a device. Does anyone have any idea what could be causing this?

To Reproduce
As I stated, I haven't been able to reproduce this myself :(

Expected behavior
If the username is not entered, then this error should be displayed. Otherwise, do not display this error.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone running iOS 12.1.2 and and iPad running iOS 12.1.1 on Wi-Fi

Additional context
Add any other context about the problem here.

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[haverchuck]

@shawnlauzon - Are you using aws-amplify package only, or aws-amplify-angular as well?

[shawnlauzon]

Both:

    "aws-amplify": "^1.1.17",
    "aws-amplify-angular": "^2.1.4",

[haverchuck]

@shawnlauzon - Ok but you made your own authentication component?

[shawnlauzon]

No I didn't; this is the authentication component that comes with aws-amplify-angular.

// login.component.ts

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Please sign in</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <amplify-authenticator framework="ionic"></amplify-authenticator>

  <div padding>
    Passwords are now managed by you! If you have not yet created your own
    password, choose “Reset Password” and enter your email address. A code will
    be emailed to you which will allow you to create your own password.
  </div>
</ion-content>

// app.module.ts

import { AmplifyAngularModule, AmplifyService } from "aws-amplify-angular";
...
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
   ...
    AmplifyAngularModule
  ],
  ...

[shawnlauzon]

The popup is from aws-amplify-angular.

[haverchuck]

Ah, I see. We will investigate.

[haverchuck]

@shawnlauzon Did you manage to get any console output or anything for this error?

[shawnlauzon]

I sent this to Apple:

We have not been able to reproduce the problem that you see, either on a regular device, or a simulator, or as a web application. I can type the username and password that I was given without a problem on all real devices. (As a side note, I do not believe the network connectivity is related to this issue.)

The problem seems to be that the framework isn't recognizing that a field is being filled out whereas the screenshots that you have sent look like they have. The only time I have seen this in the past is when doing a copy-paste (and in this app, copy-paste does work, so it's not as simple as that). My only guess is that there is an incompatibility between the authentication framework that we use and the tooling that Apple uses to fill in the username and password. I looked at the App Testing Guide and didn't see information on that. Is there something that I can use to attempt to reproduce the problem?

Without being able to reproduce the problem, I see no way forward on this issue and will have to submit an appeal to the App Review Board.

Thank you for your time and attention.

And without asking for anything else, they approved the app! I'm guessing that they tested the app manually and it worked, but they didn't send us any details. So I'm not sure what else to do with this issue. I'm happy to keep it open if you're still looking into it.

[mlabieniec]

@shawnlauzon thanks for the update! We have also been unable to reproduce this. So we'll close this for now if something comes up with it again please feel free to reopen it.

[rmadugula]

@shawnlauzon You sir are a life saver! I've been struggling with Apple on this issue for months. I was unable to reproduce it and they kept kicking it back. I was just able to reproduce the problem on my iOS device by copying the username and password to notepad and copy pasting into the login page of my screen. It was 100% reproducible. I was in fact running into two problems... I didn't know they were directly attributed to this "bug"?

1. Username cannot be blank, i tried both ionic and angular dressings and I think I get the same problem. If I copy paste the username in, it will give me a "username cannot be found"

2. If i get past problem Update README #1 by simply entering a character and deleting it, username now works, and I copy paste the password in, then i get my other major problem "null failed with error Generate challenges lambda cannot be called..". Again, was killing myself trying to figure this out because I couldn't replicate it until I saw your post. All I have to do is type it in.

Copying and pasting seems to cause problems. I can duplicate this problem on my Android build as well, so it doesn't seem to be related to ios specifically, but the Amplify Authentication framework/gui somehow.

I'm posting this here in the hopes it helps someone else. I also have another thread I'll cross reference.

#1538

[mybluedog24]

OMG I can't believe someone had the same issue!! I just got reject 3 times due to this issue!!! I used the default amplify-authenticator component without modifying anything, and I still couldn't reproduce the issue.. Thank you so much! I'm going to reply to them now.

[mybluedog24]

They just approved my app one day after I told them it was a copy-paste problem! Thank you all!

[9dnsb]

I have this same issue. I keep getting rejected as well. Even after telling them not to copy/paste

[mybluedog24]

@9dnsb I think just tell them not to copy/paste they probably ignore it. Instead, let them know that the issue is not related to your app but it’s their internal testing tool’s issue. And let them know that you can't find any information about how they do the copy/paste in the guide so you can't reproduce the issue. Take a look at shawnlauzon's reply, I think it's perfect. I mentioned all his points in my reply, and they approved it quickly. (From "In Review" to "Ready for Sale" in 5 minutes).

[l3wy]

I struggled with this for WAY too long using Ionic/Angular ... Sharing my final solution ...

@Directive({selector: '[AuthFix]'})
export class AuthFix {

    keyupEvent: KeyboardEvent = new KeyboardEvent("keyup");
    paste: boolean = false;

    @HostListener('paste') onPaste() {
        this.paste = true;
    }

    @HostListener('input', ['$event.target']) onInput(target: any) {
        if (this.paste) {
            target.parentElement.dispatchEvent(this.keyupEvent);
            this.paste = false;
        }
    }
}

I put AuthFix in my amplify-authenticator tag like so ....

<amplify-authenticator [signUpConfig]="signUpConfig" [usernameAttributes]="usernameAttributes" framework="ionic" AuthFix></amplify-authenticator>

[github-actions]

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.