AWS Amplify Gen2 Custom Fields during Authenticator Signup

Hi, In order to add custom fields to the Amplify Gen2 Authenticator signup form in Vue 3:

1. First, customize the signup fields using the components prop:

<template>
  <authenticator :components="components">
    <template v-slot="{ user, signOut }">
      <!-- Your authenticated app content -->
    </template>
  </authenticator>
</template>

<script setup>
import { Authenticator } from '@aws-amplify/ui-vue';
import { defineComponent, ref } from 'vue';

const components = {
  SignUp: {
    FormFields() {
      return (
        <>
          {/* Default fields */}
          <authenticator-sign-up-form-fields />
          
          {/* Custom type field */}
          <div class="amplify-flex amplify-field">
            <label class="amplify-label">User Type</label>
            <select 
              name="custom:type"
              class="amplify-select"
              required
            >
              <option value="TypeA">Type A</option>
              <option value="TypeB">Type B</option>
            </select>
          </div>
        </>
      );
    },
  },
};
</script>

<style>
/* Add any custom styles here */
</style>

2. Handle the custom field during signup by using the services prop:

<template>
  <authenticator :services="services">
    <template v-slot="{ user, signOut }">
      <!-- Your authenticated app content -->
    </template>
  </authenticator>
</template>

<script setup>
import { Authenticator } from '@aws-amplify/ui-vue';
import { defineComponent } from 'vue';

const services = {
  async handleSignUp(formData) {
    let { username, password, attributes } = formData;
    
    // Add the custom type to attributes
    attributes['custom:type'] = formData['custom:type'];
    
    return {
      username,
      password,
      attributes
    };
  }
};
</script>

3. Make sure your Cognito User Pool is configured correctly:

// amplify/backend/auth/userPoolConfig.json
{
  "aws_cognito_user_pool_id": "YOUR_USER_POOL_ID",
  "aws_user_pools_web_client_id": "YOUR_CLIENT_ID",
  "userAttributes": {
    "custom:type": {
      "required": true,
      "mutable": true
    }
  }
}

4. Complete implementation with validation:

<template>
  <authenticator 
    :components="components"
    :services="services"
    :validation-errors="validationErrors"
  >
    <template v-slot="{ user, signOut }">
      <div>
        <h1>Welcome {{ user.username }}</h1>
        <p>User Type: {{ user.attributes['custom:type'] }}</p>
        <button @click="signOut">Sign Out</button>
      </div>
    </template>
  </authenticator>
</template>

<script setup>
import { Authenticator } from '@aws-amplify/ui-vue';
import { ref } from 'vue';

const validationErrors = ref({});

const components = {
  SignUp: {
    FormFields() {
      return (
        <>
          <authenticator-sign-up-form-fields />
          <div class="amplify-flex amplify-field">
            <label class="amplify-label">User Type</label>
            <select 
              name="custom:type"
              class="amplify-select"
              required
              onChange={(e) => validateType(e.target.value)}
            >
              <option value="">Select Type</option>
              <option value="TypeA">Type A</option>
              <option value="TypeB">Type B</option>
            </select>
            {validationErrors.value['custom:type'] && (
              <div class="amplify-error">
                {validationErrors.value['custom:type']}
              </div>
            )}
          </div>
        </>
      );
    },
  },
};

const services = {
  async handleSignUp(formData) {
    // Validate type
    if (!formData['custom:type']) {
      validationErrors.value['custom:type'] = 'User Type is required';
      throw new Error('User Type is required');
    }

    let { username, password, attributes } = formData;
    attributes['custom:type'] = formData['custom:type'];

    return {
      username,
      password,
      attributes
    };
  }
};

const validateType = (value) => {
  if (!value) {
    validationErrors.value['custom:type'] = 'User Type is required';
  } else {
    delete validationErrors.value['custom:type'];
  }
};
</script>

<style>
.amplify-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.amplify-error {
  color: red;
  font-size: 0.875rem;
  margin-top: 4px;
}
</style>

For more information, see:

• Amplify UI Vue Documentation
• Cognito Custom Attributes