Amplify-js: remove phone number from sign up

[davegariepy]

Do you want to request a feature or report a bug?

• feature
  What is the current behavior?
• Authenticator HOC SignUp component fields are static
  If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than AWS Amplify.

What is the expected behavior?

• Authenticator HOC SignUp component fields should be customizable
  Which versions of Amplify, and which browser / OS are affected by this issue? Did this work in previous versions?
  
  
  
  • aws-amplify-react 1.0.4
    
    You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.
  
  

[AndrewKvalheim]

1203

[powerful23]

Closing this issue as it's duplicated to #1203

[ZachMurray]

This is still the first one that returns on search.

[dabit3]

As of this writing the React UI Component library's rewrite, @aws-amplify/ui-react, no longer supports the customization of form fields when using the withAuthenticator

Instead, it is suggested to use the AmplifyAuthenticator and something like the following:

import React from 'react';
import { AmplifyAuthenticator, AmplifySignUp, AmplifySignOut } from '@aws-amplify/ui-react';
import { Auth, Hub } from 'aws-amplify';

function App() {
  const [user, updateUser] = React.useState(null);
  React.useEffect(() => {
    Auth.currentAuthenticatedUser()
      .then(user => updateUser(user))
      .catch(() => console.log('No signed in user.'));
    Hub.listen('auth', data => {
      switch (data.payload.event) {
        case 'signIn':
          return updateUser(data.payload.data);
        case 'signOut':
          return updateUser(null);
      }
    });
  }, [])
  if (user) {
    return (
      <div>
        <h1>Hello {user.username}</h1>
        <AmplifySignOut />
      </div>
    )
  }
  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <AmplifyAuthenticator>
        <AmplifySignUp
          slot="sign-up"
          formFields={[
            { type: "username" },
            {
              type: "password",
              label: "Custom Password Label",
              placeholder: "custom password placeholder"
            },
            { type: "email" }
          ]} 
        />
      </AmplifyAuthenticator>
    </div>
  );
}

export default App

https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#hiding-a-form-field

We are currently investigating updating the withAuthenticator API to add this functionality for a future release.

[tom-on-the-internet]

Thanks @dabit3 . You're the best.