How can I test AWS Amplify Angular Authenticator component using Cypress?

I want to be able to "type" testing input into the AWS Amplify Authenticator component (amplify-authenticator) in a cypress test like this:

describe('My Authenticator Test', () => {
  it('should let me type in the username field', () => {
    cy.visit('http://localhost:8100/');

    cy.get('amplify-authenticator')
      .find('input#username')
      .type('sample@example.com');
  }
}

However, even though I can inspect the element and see it:

The Cypress test fails to find the Input field.

How can I access the "username" field (and other fields like it) using Cypress?