Account Settings

Amplify UI provides account settings components to manage account settings.

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.