Authenticator: Pass React hooks state to sign up validation logic

[wirjo]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Authenticator

Please describe your feature-request in detail.

In the custom sign up validation example, it would be great if a React state can be used in the validation logic. Some validation logic may depend on the app state and configuration.

export default function App() {
  return (
    <Authenticator
      // Default to Sign Up screen
      initialState="signUp"
      // Customize `Authenticator.SignUp.FormFields`
      components={{
        SignUp: {
          FormFields() {
            const { validationErrors } = useAuthenticator();

            return (
              <>
                {/* Re-use default `Authenticator.SignUp.FormFields` */}
                <Authenticator.SignUp.FormFields />

                {/* Append & require Terms & Conditions field to sign up  */}
                <CheckboxField
                  errorMessage={validationErrors.acknowledgement as string}
                  hasError={!!validationErrors.acknowledgement}
                  name="acknowledgement"
                  value="yes"
                  label="I agree with the Terms & Conditions"
                />
              </>
            );
          },
        },
      }}
      services={{
        async validateCustomSignUp(formData) {
          if (!formData.acknowledgement) {
            return {
              acknowledgement: 'You must agree to the Terms & Conditions',
            };
          }
        },
      }}
    >
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Please describe a solution you'd like.

For example, if we have const [stateVariable, setStateVariable] = useState(false) in the React component, and want to pass stateVariable onto the validation logic like so:

       async validateCustomSignUp(formData) {
          if (formData.acknowledgement === stateVariable) {
            return {
              acknowledgement: 'You must agree to the Terms & Conditions',
            };
          }

We love contributors! Is this something you'd be interested in working on?

• [X] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[wirjo]

Note: another solution is to allow for the sign up button state to be modifiable to be disabled.

[reesscot]

Thank you for your feature request. This is not possible in the current Authenticator, but we are considering this in the roadmap for the next version.