Amplify-js: Remove phone number field from sign up

[plingampally]

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

What is the current behavior?
During the sign up flow the Username, Email, Password, and Phone Number are shown. How do I remove the phone number? I configured cognito not to use it.

[jadbox]

I'm also confused on this. Is amplify-react or amplify-ionic only meant as examples since their form fields are hard coded?

[unasirisak]

+1

[brunoluiz]

This was fixed with custom signupConfig field: https://aws-amplify.github.io/docs/js/react#signup-configuration

Here I configured it as:

withAuthenticator(App, {
  signUpConfig: {
    hiddenDefaults: ['phone_number']
  }
})

[sylwester-]

The code below does not work in angular.

signUpConfig: { hiddenDefaults: ['phone_number'], signUpFields: [{ key: 'phone_number', required: false }] }

signUpFields appears to work as the * is not present any more next to the phone number but when trying to sign up validation fails with "Invalid phone number" message. hiddenDefaults does not have an effect at all.

[harryleesan]

I found what worked for me using aws-amplify-angular is to omit all fields in hiddenDefaults and re-add them in signUpFields (excluding phone_number):

  signUpConfig: any = {
    hiddenDefaults: [
      'username',
      'email',
      'phone_number',
      'password'
    ],
    signUpFields: [
      {
        label: 'Password',
        key: 'password',
        required: true,
        type: 'password'
      },
      {
        label: 'Email',
        key: 'email',
        required: true,
        type: 'string'
      },
      {
        label: 'Name',
        key: 'name',
        required: true,
        type: 'string'
      },
      {
        label: 'Username',
        key: 'username',
        required: true,
        type: 'string'
      },
    ]

  };

[haverchuck]

@plingampally I think this has been implemented. Please see these docs. Thanks!

[drwjf]

in aws-amplify-vue, "hiddenDefaults" and "signUpFields" do not work as expected.

{
  path: '/auth',
  name: 'Authenticator',
  component: components.Authenticator,
  props: {
    authConfig: {
      signUpConfig: {
        header: 'Please use your email as Username to sign up. Check email to get confirmation code.',
        hiddenDefaults: ['phone_number']
      },
      signInConfig: {
        header: 'Please use your email as Username to sign in.'
      }
    }
  }
},

[bmilesp]

Anyone know how to do this with the new amplify ui-vue components?

I wanted to have only the username and password fields in <sign-up> by using the "form-fields" attribute like this, but without any luck:

<template>
  <div class="hello">
  <amplify-authenticator>
    <amplify-sign-in header-text="Sign In" username-alias="email" slot="sign-in"></amplify-sign-in>
    <amplify-sign-up header-text="Create an Account" username-alias="email" form-fields="[ { type: 'username', required: true, }, { type: 'password', required: true, }, ]" slot="sign-up"></amplify-sign-up>
    <amplify-sign-out></amplify-sign-out>
  </amplify-authenticator>
  </div>
</template>  

Thanks in advance,
-bp

[lafiosca]

Sorry to dredge up an old issue @haverchuck but the docs linked there don't seem to be correct for me. I just started a new React TypeScript project and have @aws-amplify/[email protected].

Docs say:

TypeScript doesn't think signupConfig exists in the parameters:

I tried slapping an "as any" on the object in case it was just an outdated type definition, but the Phone Number field still shows up required on the sign up screen.

Additionally, the docs at the new location don't seem to mention it: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#withauthenticator

[Ricool06]

Hey @lafiosca, you are correct. withAuthenticator no longer supports the level of customization it once did.

However, you can now use: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#custom-form-fields

Here's an example that I did. The WritePost component is only accessible once a user logs in. I have customized the sign up part of the amplify's authenticator. The important part is the slot property. It tells the AmplifyAuthenticator component that its original sign up component should be replaced by this one.

hidden_defaults no longer exists and is replaced by using custom form fields. Hope this helps.

[lafiosca]

Thanks @Ricool06 !

[dabit3]

As mentioned above and 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.