Amplify UI

Account Settings

Amplify UI provides account settings components to manage account settings.

@aws-amplify/ui-react v5
The @aws-amplify/ui-react package is currently on version 6. Working with@aws-amplify/ui-react version 5 or earlier? See our migration guide.

Account Settings components are a set of standalone components that add user management flows to your application with minimal boilerplate.

Account Settings components require end user to be authenticated. You can use the Authenticator component to add authentication UI to your application.

Quick Start

Next.js 13.4+ introduces App Router with the usage of Server Components. Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with "use client". For more info, visit Next.js third party package documentation.

If you are using Next.js Pages Router, no changes are required to use Amplify UI components.

Step 1. Configure Backend

Account settings components work seamlessly with the Amplify CLI to automatically work with your backend.

First, update @aws-amplify/cli with npm or yarn if you're using a version before 6.4.0:

npm install -g @aws-amplify/cli@latest
yarn global add @aws-amplify/cli@latest

Step 2. Install Dependencies

npm install @aws-amplify/ui-react aws-amplify
yarn add @aws-amplify/ui-react aws-amplify

Step 3. Add Account Settings Components

Get started by using AccountSettings with either the ChangePassword or DeleteUser components.

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.