Manage user profiles

User profile management helps you keep your applications secure while also personalizing your app experiences. In this guide we will review how you can enable your users to personalize their profile and verify their contact information. This includes outlining how you can set up user attributes, verify them, and allow your users to delete them when necessary.

Before you begin, you will need:

• An Amplify project with the Auth category configured
• The Amplify libraries installed and configured

Set up user attributes

User attributes such as email address, phone number help you identify individual users. Defining the user attributes you include for your user profiles makes user data easy to manage at scale. This information will help you personalize user journeys, tailor content, provide intuitive account control, and more. You can capture information upfront during sign-up or enable customers to update their profile after sign-up. In this section we take a closer look at working with user attributes and how to set them up and manage them.

Enable standard attributes

Amazon Cognito has a set of default standard attributes. To configure and enable standard user attributes using the Amplify CLI in your app, you can run the Amplify amplify add auth command and choose Walkthrough all the auth configurations. If you have previously created your auth resources, you can instead run the amplify update auth command in your terminal. When prompted for Specify read attributes and Specify write attributes, choose the attributes you'd like to enable in your app.

Pass user attributes during sign-up

You can create user attributes during sign-up or when the user is authenticated. To do this as part of sign-up you can pass them in the userAttributes object of the signUp API:

import { signUp } from 'aws-amplify/auth';

async function handleSignUp() {
  try {
    await signUp({
      username: 'jdoe',
      password: 'mysecurerandompassword#123',
      options: {
        userAttributes: {
          email: 'me@domain.com',
          phone_number: '+12128601234', // E.164 number convention
          given_name: 'Jane',
          family_name: 'Doe',
          nickname: 'Jane'
        }
      }
    });
  } catch (e) {
    console.log(e);
  }
}

Configure custom user attributes

Custom attributes can be passed in with the userAttributes option of the signUp API:

signUp({
  username: 'jdoe',
  password: 'mysecurerandompassword#123',
  options: {
    userAttributes: {
      'custom:attribute_name_1': 'attribute_value_1',
      'custom:attribute_name_2': 'attribute_value_2',
      'custom:attribute_name_3': 'attribute_value_3'
    }
  }
});

Retrieve user attributes

You can then retrieve user attributes for your users to read in their profile. This helps you personalize their frontend experience as well as control what they will see.

You can retrieve a user's latest attributes using the fetchUserAttributes API.

import { fetchUserAttributes } from 'aws-amplify/auth';

async function handleFetchUserAttributes() {
  try {
    const userAttributes = await fetchUserAttributes();
    console.log(userAttributes);
  } catch (error) {
    console.log(error);
  }
}

Enable users to update, verify, and delete specific attributes

You can enable your users to update, verify, and delete specific user attributes as their information changes over time. These attributes are enabled as writable when you update the Specify write attributes in your Auth configuration.

Update user attribute

Invoke the updateUserAttribute API to create or update existing user attributes.

import {
  updateUserAttribute,
  type UpdateUserAttributeOutput
} from 'aws-amplify/auth';

async function handleUpdateUserAttribute(attributeKey: string, value: string) {
  try {
    const output = await updateUserAttribute({
      userAttribute: {
        attributeKey,
        value
      }
    });
    handleUpdateUserAttributeNextSteps(output);
  } catch (error) {
    console.log(error);
  }
}

function handleUpdateUserAttributeNextSteps(output: UpdateUserAttributeOutput) {
  const { nextStep } = output;

  switch (nextStep.updateAttributeStep) {
    case 'CONFIRM_ATTRIBUTE_WITH_CODE':
      const codeDeliveryDetails = nextStep.codeDeliveryDetails;
      console.log(
        `Confirmation code was sent to ${codeDeliveryDetails?.deliveryMedium}.`
      );
      // Collect the confirmation code from the user and pass to confirmUserAttribute.
      break;
    case 'DONE':
      console.log(`attribute was successfully updated.`);
      break;
  }
}

import { updateUserAttribute } from 'aws-amplify/auth';

async function handleUpdateUserAttribute(attributeKey, value) {
  try {
    const output = await updateUserAttribute({
      userAttribute: {
        attributeKey,
        value
      }
    });
    handleUpdateUserAttributeNextSteps(output);
  } catch (error) {
    console.log(error);
  }
}

function handleUpdateUserAttributeNextSteps(output) {
  const { nextStep } = output;

  switch (nextStep.updateAttributeStep) {
    case 'CONFIRM_ATTRIBUTE_WITH_CODE':
      const codeDeliveryDetails = nextStep.codeDeliveryDetails;
      console.log(
        `Confirmation code was sent to ${codeDeliveryDetails?.deliveryMedium}.`
      );
      // Collect the confirmation code from the user and pass to confirmUserAttribute.
      break;
    case 'DONE':
      console.log(`attribute was successfully updated.`);
      break;
  }
}

Update user attributes

Invoke the updateUserAttributes API to create or update multiple existing user attributes.

import {
  updateUserAttributes,
  type UpdateUserAttributesOutput
} from 'aws-amplify/auth';

async function handleUpdateEmailAndNameAttributes(
  updatedEmail: string,
  updatedName: string
) {
  try {
    const attributes = await updateUserAttributes({
      userAttributes: {
        email: updatedEmail,
        name: updatedName
      }
    });
    // handle next steps
  } catch (error) {
    console.log(error);
  }
}

import { updateUserAttributes, type UpdateUserAttributesOutput } from 'aws-amplify/auth';

async function handleUpdateEmailAndNameAttributes(
  updatedEmail,
  updatedName
) {
  try {
    const attributes = await updateUserAttributes({
      userAttributes: {
        email: updatedEmail,
        name: updatedName,
      },
    });
   // handle next steps
  } catch (error) {
    console.log(error);
  }
}

Verify user attribute

Some attributes require confirmation for the attribute update to complete. If the attribute needs to be confirmed, part of the result of the updateUserAttribute or updateUserAttributes APIs will be CONFIRM_ATTRIBUTE_WITH_CODE. A confirmation code will be sent to the delivery medium mentioned in the delivery details. When the user gets the confirmation code, you can present a UI to the user to enter the code and invoke the confirmUserAttribute API with their input:

import {
  confirmUserAttribute,
  type ConfirmUserAttributeInput
} from 'aws-amplify/auth';

async function handleConfirmUserAttribute({
  userAttributeKey,
  confirmationCode
}: ConfirmUserAttributeInput) {
  try {
    await confirmUserAttribute({ userAttributeKey, confirmationCode });
  } catch (error) {
    console.log(error);
  }
}

import { confirmUserAttribute } from 'aws-amplify/auth';

async function handleConfirmUserAttribute({
  userAttributeKey,
  confirmationCode
}) {
  try {
    await confirmUserAttribute({ userAttributeKey, confirmationCode });
  } catch (error) {
    console.log(error);
  }
}

Send user attribute verification code

If an attribute needs to be verified while the user is authenticated, invoke the sendUserAttributeVerificationCode API as shown below:

import {
  sendUserAttributeVerificationCode,
  type VerifiableUserAttributeKey
} from 'aws-amplify/auth';

async function handleSendUserAttributeVerificationCode(
  key: VerifiableUserAttributeKey
) {
  try {
    await sendUserAttributeVerificationCode({
      userAttributeKey: key
    });
  } catch (error) {
    console.log(error);
  }
}

import { sendUserAttributeVerificationCode } from 'aws-amplify/auth';

async function handleSendUserAttributeVerificationCode(key) {
  try {
    await sendUserAttributeVerificationCode({
      userAttributeKey: key
    });
  } catch (error) {
    console.log(error);
  }
}

Delete user attributes

The deleteUserAttributes API allows to delete one or more user attributes.

import {
  deleteUserAttributes,
  type DeleteUserAttributesInput
} from 'aws-amplify/auth';

async function handleDeleteUserAttributes(
  keys: DeleteUserAttributesInput['userAttributeKeys']
) {
  try {
    await deleteUserAttributes({
      userAttributeKeys: ['custom:my_custom_attribute', ...keys]
    });
  } catch (error) {
    console.log(error);
  }
}

import { deleteUserAttributes } from 'aws-amplify/auth';

async function handleDeleteUserAttributes(keys) {
  try {
    await deleteUserAttributes({
      userAttributeKeys: ['custom:my_custom_attribute', ...keys]
    });
  } catch (error) {
    console.log(error);
  }
}

By following the above steps your users can now update, verify, and delete specific user attributes as their information changes over time.

Conclusion

Congratulations! You finished the Manage user profiles guide and your users can now review and customize their profile information.

Next steps

Now that you completed setting up user profile management, you may also want to add some additional features. We recommend:

• Set up password change and recovery
• Custom Attributes