DeleteUser

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

Props

Name	Description	Type
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:

Name	Description	Type
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} />
  );
}

Note that spreading props is necessary so that event listeners like onClick or html attributes like type are passed correctly. If you're providing your own custom components, make sure required props are passed onto your elements.

Props and Examples

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

DeleteButton

Props:

Name	Description	Type
onClick	Click handler for the button. This must be passed to your button element.	`React.MouseEventHandler<HTMLButtonElement>`
isDisabled	Boolean 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:

Name	Description	Type
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:

Name	Description	Type
onCancel	Callback function triggered when end user cancels account deletion	`() => void`
onConfirm	Callback function triggered when user confirms account deletion	`() => void`
isDisabled	Whether 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>
  );
}