Amplify UI

DeleteUser

DeleteUser component allows end users to delete their account permanently from their app.

Props

NameDescriptionType
onSuccess?Callback function triggered once user account is successfully deleted
() => void
onError?Callback function triggered when account deletion fails
(error: Error) => void
handleDelete?Custom delete user handler
(user: AuthUser) => Promise<void> | void
components?Custom components override
DeleteUserComponents
displayText?Text to override in the component
DeleteUserDisplayText

Basic Usage

DeleteUser has onSuccess handler that will be called after successful user account deletion. You may use this callback to run any custom handling, such as navigating route or rendering confirmation messages.

import React from 'react';
import { AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('user has been successfully deleted')
  }
  
  return (
    <AccountSettings.DeleteUser onSuccess={handleSuccess} />
  );
}

Override default delete handler

You can override the default deleteUser handler with handleDelete prop to add any custom cleanup handlers before or after account deletion.

import React from 'react';

import { Auth } from 'aws-amplify';
import { DeleteUser } from '@aws-amplify/ui-react';

function App() {
  const handleSuccess = () => {
    alert('password is successfully changed!')
  }

  const handleDelete = async () => {
    console.log("Doing some clean up...");
    console.log("Done!");
    await Auth.deleteUser();
  };  
      
  return (
    <AccountSettings.DeleteUser onSuccess={handleSuccess} handleDelete={handleDelete} />
  );
}

Component Overrides

You can override parts of the DeleteUser component by passing in a components prop. It supports the following slots:

NameDescriptionType
DeleteButton?Delete button
DeleteButtonProps
ErrorMessage?Error alert that displays on delete user errors
ErrorMessageComponentProps
WarningView?Warning view that asks end user to confirm account deletion
PasswordFieldProps

Reusing default components

Default components are accessible through AccountSettings.DeleteUser.COMPONENT_NAME (e.g. AccountSettings.DeleteUser.DeleteButton) for your convenience. This is useful if you're interested in modifying just a small part of UI instead of overriding the whole component.

function App() {
  const components = {
    DeleteButton: (props) => (
      <AccountSettings.DeleteUser.DeleteButton {...props}>Custom Submit Button</AccountSettings.DeleteUser.DeleteButton>
    ),
  }

  return (
    <AccountSettings.DeleteUser components={components} />
  );
}

Props and Examples

Here are the required props and examples for overriding each slot.

DeleteButton

Props:

NameDescriptionType
onClickClick handler for the button. This must be passed to your button element.
React.MouseEventHandler<HTMLButtonElement>
isDisabledBoolean whether delete button should be disabled
boolean

You can reuse the AccountSettings.DeleteUser.DeleteButton:

import { AccountSettings } from '@aws-amplify/ui-react';

function App() {
  const components  = {
    DeleteButton: (props) => (
      <AccountSettings.DeleteUser.DeleteButton {...props}>
        My Custom Button
      </AccountSettings.DeleteUser.DeleteButton>
    )
  }

  return (
    <AccountSettings.DeleteUser components={components} />
  );
}

or use button primitive directly:

import { AccountSettings, Button } from '@aws-amplify/ui-react';

function App() {
  const components  = {
    DeleteButton: (props) => <Button {...props}>My Custom Button</Button>
  }

  return (
    <AccountSettings.DeleteUser components={components} />
  );
}

The following example replaces DeleteButton with native html button:

function App() {
  const components = {
    DeleteButton: ({ onClick, isDisabled }) => (
      <button onClick={onClick} disabled={isDisabled}>
        Custom Button Text
      </button>
    )
  };
  
  return (
    <AccountSettings.DeleteUser components={components} />
  );
}

ErrorMessage

Props:

NameDescriptionType
children?Contains error message string
string

The following example overrides the error message component with Heading and Text primitives.

import { Heading, Text } from '@aws-amplify/ui-react';

function App() {
  const components = {
    ErrorMessage: ({ children }) => (
      <>
        <Heading>Custom Error Message</Heading>
        <Text variation="warning">{children}</Text>
      </>
    )
  };
  
  return (
    <AccountSettings.DeleteUser components={components} />
  );
}

WarningView

Props:

NameDescriptionType
onCancelCallback function triggered when end user cancels account deletion
() => void
onConfirmCallback function triggered when user confirms account deletion
() => void
isDisabledWhether account deletion is in progress
boolean

The following example overrides the warning component to require users to type "delete" before they can delete their account.

import React from 'react';
import { Amplify } from 'aws-amplify';
import { signOut } from 'aws-amplify/auth';

import {
  Button,
  Card,
  Flex,
  Heading,
  AccountSettings,
  Text,
  TextField,
} from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);
const handleSignOut = () => {
signOut();
};
function CustomWarning({ onCancel, onConfirm, isDisabled }) {
const [value, setValue] = React.useState('');
const handleChange = (event) => {
event.preventDefault();
const { value } = event.target;
setValue(value);
};
return (
<form>
<Flex direction="column">
<Text variation="warning">
Deleting your account is not reversable. Please type delete below if
you want to confirm user deletion.
</Text>
<TextField labelHidden label="Confirm Account Deletion" placeholder="delete" onChange={handleChange} value={value} />
<Button onClick={onCancel}>Back</Button>
<Button onClick={onConfirm} variation="primary" isDisabled={isDisabled || value !== 'delete'} >
Submit
</Button>
</Flex>
</form> ); } const components = { WarningView: CustomWarning }; function App() { return ( <Card variation="outlined" width="800px"> <Flex direction="column">
<Heading>Delete Account:</Heading>
<AccountSettings.DeleteUser components={components} /> <Button onClick={handleSignOut}>Sign Out</Button> </Flex> </Card> );

Text and labels

All text in the DeleteUser component is customizable with the displayText prop.

import { AccountSettings } from '@aws-amplify/ui-react';

function App() {
  return (
    <AccountSettings.DeleteUser 
      displayText={{
        deleteAccountText: 'Delete the account',
        cancelButtonText: 'Cancel',
        confirmDeleteButtonText: 'Delete account',
        warningText: 'Are you sure you want to delete your account? You will lose access and all data.'
      }}  
    />
  );
}

Theming

DeleteUser component is built upon our robust Amplify UI theming system. To get started, add a theme object and set the appropriate design tokens. You can then pass that theme to the ThemeProvider so the changes can take affect.

import { AccountSettings, Card, ThemeProvider } from '@aws-amplify/ui-react';

const theme = {
  name: 'custom-theme',
  tokens: {
    colors: {
      border: {
        primary: { value: '{colors.neutral.40}' },
        secondary: { value: '{colors.neutral.20}' },
        tertiary: { value: '{colors.neutral.10}' },
      },
    },
    radii: {
      small: { value: '2px' },
      medium: { value: '3px' },
      large: { value: '4px' },
      xl: { value: '6px' },
    },
  },
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Card width="800px">
        <AccountSettings.DeleteUser />
      </Card>
    </ThemeProvider>
  );
}

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.