Amplify-js: UI Components - AmplifyAuthenticator - How to use formFields for Sign Up? [React]

[budevelop]

* Which Category is your question related to? *
Auth

* What AWS Services are you utilizing? *
Amplify, Cognito, API GW, Lambda

* Provide additional details e.g. code snippets *
I want to change the fields shown in the Sign Up form. Currently Username, Password, Email and Phone Number is displayed. I only need to get Email and Password. How can I change SignUp form fields?

I was able to do it by providing signUpConfig parameter while using withAuthenticator; however with AmplifyAuthenticator I could not make it. I tried to use formFields property as below; however it didn't work.

import React from "react";
import Amplify from "aws-amplify";
import { AmplifyAuthenticator, AmplifySignIn, AmplifySignUp, AmplifySignOut } from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => (
  <AmplifyAuthenticator usernameAlias="email">
    <AmplifySignIn
      headerText="Sign In Header"
      slot="sign-in" />
    <AmplifySignUp headerText="Sign Up Header"
      formFields={[{ type: 'email', label: 'Email', placeholder: 'Email', hint: 'Enter Your Email', required: true }, { type: 'password', label: 'Password', placeholder: 'Enter Your Password', hint: 'Password', required: true }]}
      slot="sign-up" />

    <div>
      Internal App
      <AmplifySignOut />
    </div>
  </AmplifyAuthenticator>
);

export default App;

[nathanagez]

Hello I am facing the same issue.

Here is my code below:

import { AmplifySignUp } from "@aws-amplify/ui-react";

const signUpFields = [
  {
    type: "email",
    label: "custom_label",
    placeholder: "Custom placeholder",
    hint: null,
    required: true,
  },
];

const Auth = () => {
  return (
    <div>
      <AmplifySignUp headerText="Custom form" formFields={signUpFields} />
    </div>
  );
};

Thank you.

[ashika01]

@budevelop : If you are trying to achieve sign in or sign up with email or phone_number instead of username , I would suggest you use the property usernameAlias. You just add

<AmplifyAuthenticator usernameAlias="email"/>

[nathanagez]

@budevelop : If you are trying to achieve sign in or sign up with email or phone_number instead of username , I would suggest you use the property usernameAlias. You just add

<AmplifyAuthenticator usernameAlias="email"/>

Hello @ashika01 ,

The problem is that for instance if I pass a custom placeholder for the email, even if I use usernameAlias, it's seems to don't work.

You can easily reproduce the problem with the following code, you will see that the placeholder still the default one for instance.

import { AmplifySignUp, AmplifyAuthenticator } from "@aws-amplify/ui-react";

const signUpFields = [
  {
    type: "email",
    label: "custom_label",
    placeholder: "Custom placeholder",
    hint: null,
    required: true,
  },
];

const Auth = () => {
  return (
    <AmplifyAuthenticator usernameAlias="email">
      <AmplifySignUp headerText="Custom form" formFields={signUpFields} slot="sign-up" />
    </AmplifyAuthenticator>
  );
};

[ashika01]

@NastyZ98 That is expected since we setup the form fields internally based on usernameAlias (i.e, based on the method of authentication). However I understand the use case and the way to achieve it is slots for sure. Will do some discussion with team and update on how we would wanna go about this.

[nathanagez]

@NastyZ98 That is expected since we setup the form fields internally based on usernameAlias (i.e, based on the method of authentication). However I understand the use case and the way to achieve it is slots for sure. Will do some discussion with team and update on how we would wanna go about this.

Thank you @ashika01 ! For the moment, as a workaround, I use aws-amplify-react with Authenticator and signUpFields configuration.

[jordanranz]

I believe a good solution for this will be to intelligently populate the form field custom data like hint, placeholder, and label. I am looking into how to support this.

[ashika01]

@NastyZ98 @budevelop : Update this is being tracked now and we are working on this to provide this customization.

[helloanil]

~Sorry to necrobump this but does that mean there's no way of removing Phone Number field from Sign Up form, using latest UI Components?~

I ended up writing my custom AmplifySignUp component, using AmplifyFormSection and AmplifyAuthFields:

import React from 'react';
import {
    AmplifyFormSection,
    AmplifyAuthFields,
} from '@aws-amplify/ui-react';

export default () => (
  <AmplifyFormSection slot="sign-up">
      <AmplifyAuthFields
          formFields={[
              {
                  type: 'email',
                  label: 'Email Address *',
                  required: true,
              },
              {
                  type: 'password',
                  label: 'Password *',
                  required: true,
              },
          ]}
      />
      <div slot="amplify-form-section-footer">
        {/* code for your link to signin form and submit button */}
      </div>
  </AmplifyFormSection>
);

There are more components like AmplifyButton or AmplifyLoadingSpinner you can use to customize your form.

[ashika01]

_Update:_ Got the customization working with form fields. Needs update for supporting all standard and custom user attributes like cognito's and should have a PR soon.

[josh-tncarry]

Facing the same issue. I noticed that in the code for both AmplifySignIn and AmplifySignUp, that it completely ignores anything passed into formFields.

The documentation leads one to believe this is possible.

[helloanil]

Hey @ashika01 and @jordanranz,

Thanks for taking a look at this but I'm not sure if this is solved. My code:

import {
  AmplifyAuthenticator,
  AmplifySignOut,
  AmplifySignUp,
} from "@aws-amplify/ui-react";

function App() {
  return (
    <AmplifyAuthenticator>
      <AmplifySignUp
        slot="sign-up"
        headerText="Something here"
        formFields={[{ type: "email" }, { type: "password" }]}
      />
      <>
        <MyApp />
        <AmplifySignOut />
      </>
    </AmplifyAuthenticator>
  );
}

But I'm still seeing this:

[ashika01]

Hi everyone,

Posting update here - Changing form field is going to need documentation update. In meanwhile, here is a sample code for customizing form field.

<AmplifyAuthenticator>
    <AmplifySignUp
      headerText="Custom form"
      formFields={[
        {
          type: 'username',
          label: 'Custom Username Label',
          placeholder: 'custom username placeholder',
          required: true,
          handleInputChange: (event, cb) => {
            console.log('custom username field');
            //perform any actions needed
            cb(event);
          },
        },
        {
          type: 'password',
          label: 'Custom Password Label',
          placeholder: 'custom password placeholder',
          required: true,
          handleInputChange: (event, cb) => {
            console.log('custom pwd field');
            cb(event);
          },
        },
      ]}
      slot="sign-up"
    />
  </AmplifyAuthenticator>

In short, handleInputChange of form field needs to invoke a callback like shown above in order for us to handle the state internally. handleInputChange needs the signature (event,cb) => { cb(event) }

Note: The update is in unstable right now. We will be doing a release to stable shortly. Please try this out and let us know what needs to be improved.

[NutterzUK]

Please disregard my previous question - I've figured out we can use the unstable build with:
npm install @aws-amplify/ui-react@unstable --save

[sri7vasu]

If you are using TypeScript, here is the solution:

import { FormFieldTypes } from '@aws-amplify/ui-components/dist/types/components/amplify-auth-fields/amplify-auth-fields-interface';

function SignUp() {
  return (
    <AmplifyAuthenticator>
      <AmplifySignUp
        headerText="Sign Up"
        usernameAlias="email"
        formFields={[
          {
            type: 'email',
            label: 'Email',
            placeholder: 'Enter your email',
            required: true,
            handleInputChange: (event:Event, cb:Function) => {
             console.log('custom username field');
              cb(event);
            }
          },
          {
            type: 'password',
            label: 'Password',
            placeholder: 'Enter your password',
            required: true,
            handleInputChange: (event: Event, cb: Function) => {
            console.log('custom pwd field');
             cb(event);
            }
          }
        ] as FormFieldTypes}
        slot="sign-up"
        ></AmplifySignUp>
    </AmplifyAuthenticator>
  );
}
export default SignUp;

[faroceann]

Things are working ok on unstable, but I wasn't able to get the phone_number field to work.

 <AmplifySignUp
   slot="sign-up"
   usernameAlias="email"
  formFields=[{
      label: "Phone number",
      required: true,
      type: "phone_number"
}]
/>

When it gets sent to the Cognito IDP, it appears that either only the country calling code is sent, or only the bare phone number is sent.

[khiner]

This workaround solved my problem of not being able to exclude phone number fields from the form input, but it removes the "Forgot password" flow, since that's added as a hint to the formField in amplify-sign-in, and it uses a handleAuthStateChange prop that defaults to a private dispatchAuthStateChangeEvent method that doesn't have a callback like handleInputChange does:

      formFieldInputs.push({
        type: 'password',
        hint: (
          <div>
            {I18n.get(Translations.FORGOT_PASSWORD_TEXT)}{' '}
            <amplify-button
              variant="anchor"
              onClick={() => this.handleAuthStateChange(AuthState.ForgotPassword)}
              data-test="sign-in-forgot-password-link"
            >
              {I18n.get(Translations.RESET_PASSWORD_TEXT)}
            </amplify-button>
          </div>
        ),
        required: true,
        handleInputChange: this.handleFormFieldInput('password'),
        inputProps: {
          'data-test': 'sign-in-password-input',
        },
      });

I tried the following:

import { Hub, I18n } from '@aws-amplify/core';
import { AmplifyButton } from '@aws-amplify/ui-react';

...

    const dispatchAuthStateChangeEvent = (nextAuthState) => {
        Hub.dispatch('UI Auth', {
            event: 'AuthStateChange',
            message: nextAuthState,
        });
    };

...

        {
            type: 'password',
            label: 'Password *',
            placeholder: 'Password',
            required: true,
            hint: (
                <div>
                    {I18n.get('Forgot your password?')}
                    {' '}
                    <AmplifyButton
                        variant="anchor"
                        onClick={() => dispatchAuthStateChangeEvent('forgotpassword')}
                        data-test="sign-in-forgot-password-link"
                    >
                        {I18n.get('Reset password')}
                    </AmplifyButton>
                </div>
            ),
            handleInputChange: (event, cb) => {
                cb(event);
            },
        },

but providing anything but a string or null to hint (e.g. <div></div>) results in

TypeError: "can't define property "$elm$": Object is not extensible"

Anyone have a suggestion here?

[4-life]

How to use custom fields in formFields?
In previous version of amplify were key: 'custom:pin'

[scottkelso]

I believe I am observing the same issue on my quasar app, using @aws-amplify/ui-vue.
I also tried the handleInputChange @ashika01 suggested (as you can see below) with no success.

My signin needs:

• email or phone number,
• password

My signup needs

• email
• phone number
• password
• name

<template>
  <q-page class="flex flex-center">
    <amplify-authenticator username-alias="email" initial-auth-state="signin">
      <amplify-sign-up
        :formFields="signupFormFields"
        header-text="SIGNUP"
        slot="sign-up"></amplify-sign-up>
        <amplify-sign-in
        :formFields="signinFormFields"
        header-text="SIGNIN"
        slot="sign-in"></amplify-sign-in>
    </amplify-authenticator>
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      signupFormFields: [
        {
          type: 'name',
          label: 'Name',
          placeholder: 'Enter your full name',
          required: true,
          handleInputChange: (event, cb) => {
            cb(event)
          }
        },
        {
          type: 'phone_number',
          label: 'Phone Number',
          placeholder: 'Enter your phone number',
          required: true,
          handleInputChange: (event, cb) => {
            cb(event)
          }
        },
        {
          type: 'email',
          label: 'Email',
          placeholder: 'Enter an email address',
          required: true,
          handleInputChange: (event, cb) => {
            cb(event)
          }
        },
        {
          type: 'password',
          label: 'Password',
          placeholder: 'Enter a password',
          required: true,
          handleInputChange: (event, cb) => {
            cb(event)
          }
        }
      ],
      signinFormFields: [...]
    }
  }
}
</script>

Produces this:

The component is picking up my header but not my signup fields.

Operating System: Windows
Browser: Chrome
Amplify CLI: 4.18.1
@aws-amplify/ui-vue: ^0.2.3
aws-amplify: ^3.0.9
Quasar: 1.9.14

[andriworld]

@scottkelso : in Vue, try :formFields.prop=...
I saw this solution here: https://github.com/aws-amplify/amplify-js/issues/5363#issuecomment-618627713

[andriworld]

Hi @khiner, @ashika01
Have you found a way to keep the "Forgot password" link after formFields customization?
(this is my only blocking issue)

[scottkelso]

Thank you @andriworld ! This did infact work with both :formFields.prop=... and :form-fields.prop=.... Also thank you for pointing me to that same issue relating to vue.

This allowed me to select the correct formFields. A non-blocking behaviour emerged where I would get "Username cannot be empty" error with the following markup. (See same props on my previous comment)

<amplify-authenticator username-alias="email">    <!--Did not work-->
    <amplify-sign-up
        :form-fields.prop="signupFormFields"
        slot="sign-up"></amplify-sign-up>
</amplify-authenticator>

Moving the username-alias attribute to the <amplify-sign-up> component worked which I don't understand.

<amplify-authenticator>    <!--Worked-->
    <amplify-sign-up
        username-alias="email"
        :form-fields.prop="signupFormFields"
        slot="sign-up"></amplify-sign-up>
</amplify-authenticator>

Aside from that smaller issue, I am now blocked by the same issue @faroceann describes with phone_number. On form submission the following payload is being sent where you can see that the country code of the phone number is missing.

Password: "************"
UserAttributes: [
  {Name: "name", Value: "Someone"}
  {Name: "phone_number", Value: "7894561233"}
  {Name: "email", Value: "[email protected]"}
]
Username: "[email protected]"

Has anyone managed to get a fix / workaround for this?

[jordanranz]

Going to reopen this to continue the discussion.

[ashika01]

Hey, I am checking the phone fields issue right now. I will investigate that and address other questions here.

[ashika01]

Thank you @andriworld ! This did infact work with both :formFields.prop=... and :form-fields.prop=.... Also thank you for pointing me to that same issue relating to vue.

This allowed me to select the correct formFields. A non-blocking behaviour emerged where I would get "Username cannot be empty" error with the following markup. (See same props on my previous comment)

<amplify-authenticator username-alias="email">    <!--Did not work-->
    <amplify-sign-up
        :form-fields.prop="signupFormFields"
        slot="sign-up"></amplify-sign-up>
</amplify-authenticator>

Moving the username-alias attribute to the <amplify-sign-up> component worked which I don't understand.

<amplify-authenticator>    <!--Worked-->
    <amplify-sign-up
        username-alias="email"
        :form-fields.prop="signupFormFields"
        slot="sign-up"></amplify-sign-up>
</amplify-authenticator>

Aside from that smaller issue, I am now blocked by the same issue @faroceann describes with phone_number. On form submission the following payload is being sent where you can see that the country code of the phone number is missing.

Password: "************"
UserAttributes: [
  {Name: "name", Value: "Someone"}
  {Name: "phone_number", Value: "7894561233"}
  {Name: "email", Value: "[email protected]"}
]
Username: "[email protected]"

Has anyone managed to get a fix / workaround for this?

@scottkelso : the username-alias in signup is expected. so we you create ur slot , the custom slot overrides our original component, so there is no way for signup to know about the username behavior. We will look into improving this in the future. but the behavior is expected as of now.

[ashika01]

@faroceann @scottkelso I was able to reproduce the phone_number bug. I will be working on a PR for this.

[jordanranz]

@scottkelso I will add documentation around this in our new docs site to make the usage more clear when using formFields for each framework

[andriworld]

Hi @ashika01 I also had a question about the "forgot password" link. How can I make sure it's there after I customize the sign-in form fields? Thank you

[ashika01]

Keeping this reopened to continue discussion on hint component of formField.

[ashika01]

@andriworld Looks like this might be a bug.. I am working on this.

[ashika01]

Hi, hint handling has been fixed. We have some trouble with stencil react bindings which needs more work on the bindings itself. But for now, when hint is not specified it will display the defaults. If you dont want any hints, you could specify hint: null. And any string as hint would work as expected.

[andriworld]

It works! I updated to @aws-amplify/[email protected] and the "Reset Password" link is back on my customized login form.
Many thanks @ashika01 !

[Jason-Reich]

@helloanil What did you use to "tell" AmplifyButton what it is supposed to do? For example, I'm using

<AmplifyFormSection slot="sign-up">

and

<AmplifyAuthFields
          formFields={[
            {
              type: 'email',
               ...

just like you suggested and everything is super customizable this way! I just don't know how to make AmplifyButton do the right thing (in this case it needs to do what the "CREATE ACCOUNT" button does from the component).

I tried adding things like class="hydrated" that are behind the create account button (I tried both with regular and with ) but nothing has worked.

Were you able to get this to work?

[niloy369]

any idea how to add select option dropdown in sign up form?