diff --git a/examples/next/pages/ui/components/account-settings/configure-totp/aws-exports.js b/examples/next/pages/ui/components/account-settings/configure-totp/aws-exports.js
deleted file mode 100644
index ed7194f6bca..00000000000
--- a/examples/next/pages/ui/components/account-settings/configure-totp/aws-exports.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import awsExports from '@environments/auth/auth-with-optional-totp-and-sms-mfa/src/aws-exports';
-export default awsExports;
diff --git a/examples/next/pages/ui/components/account-settings/configure-totp/index.page.tsx b/examples/next/pages/ui/components/account-settings/configure-totp/index.page.tsx
deleted file mode 100644
index 0d98a884f00..00000000000
--- a/examples/next/pages/ui/components/account-settings/configure-totp/index.page.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Amplify } from 'aws-amplify';
-
-import {
- Authenticator,
- Button,
- Card,
- Flex,
- Heading,
-} from '@aws-amplify/ui-react';
-import '@aws-amplify/ui-react/styles.css';
-
-import { Alert, ConfigureTOTP } from '@aws-amplify/ui-react';
-
-import awsExports from './aws-exports';
-Amplify.configure(awsExports);
-
-export default function App() {
- const [isSuccessful, setIsSuccessful] = React.useState(false);
- return (
-
- {({ signOut }) => (
-
-
-
-
- Setup MFA:
- {
- setIsSuccessful(true);
- }}
- />
- {isSuccessful ? (
-
- TOTP has been set up successfully
-
- ) : null}
-
-
-
-
-
- )}
-
- );
-}
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
index 76ab1df106d..c4ba279580e 100644
--- a/packages/react/__tests__/__snapshots__/exports.ts.snap
+++ b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -17,7 +17,6 @@ Array [
"ComponentClassObject",
"ComponentPropsToStylePropsMap",
"ComponentPropsToStylePropsMapKeys",
- "ConfigureTOTP",
"DeleteUser",
"Divider",
"Expander",
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/ConfigureTOTP.tsx b/packages/react/src/components/AccountSettings/ConfigureTOTP/ConfigureTOTP.tsx
deleted file mode 100644
index ce6bed0436f..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/ConfigureTOTP.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React from 'react';
-import QRCode from 'qrcode';
-
-import {
- AmplifyUser,
- getLogger,
- getTotpCodeURL,
- setupTOTP,
- translate,
- verifyTOTPToken,
-} from '@aws-amplify/ui';
-
-import { useAuth } from '../../../internal';
-import { View, Flex } from '../../../primitives';
-import { FormValues } from '../types';
-import {
- ConfirmationCode,
- CopySecretKey,
- Error,
- SecretKeyQRCode,
- SubmitButton,
-} from './defaults';
-import { ConfigureTOTPProps, TotpSecret, VerifyTotpStatus } from './types';
-import { QR_CODE_DIMENSIONS } from './constants';
-
-const logger = getLogger('Auth');
-
-function ConfigureTOTP({
- totpIssuer = 'AWSCognito',
- totpUsername,
- onSuccess,
- onError,
-}: ConfigureTOTPProps): JSX.Element | null {
- const [formValues, setFormValues] = React.useState({ code: '' });
- const [totpSecret, setTotpSecret] = React.useState(null);
- const [verifyTotpStatus, setVerifyTotpStatus] =
- React.useState({
- isVerifying: false,
- errorMessage: null,
- });
-
- const { user, isLoading } = useAuth();
-
- const hasInit = React.useRef(false);
-
- const generateQRCode = React.useCallback(
- async (currentUser: AmplifyUser): Promise => {
- try {
- const secretKey = await setupTOTP(currentUser);
- const username = totpUsername || currentUser?.username;
- const totpCode = getTotpCodeURL(totpIssuer, username, secretKey);
- const qrCode = await QRCode.toDataURL(totpCode);
-
- setTotpSecret({ secretKey, qrCode });
- } catch (e) {
- logger.error(e);
- }
- },
- [totpIssuer, totpUsername]
- );
-
- React.useEffect(() => {
- if (user && !hasInit.current) {
- hasInit.current = true;
- generateQRCode(user);
- }
- }, [generateQRCode, user]);
-
- // translations
- const confirmText = translate('Confirm');
- const copyCodeText = translate('Copy Secret Code');
-
- // event handlers
- const handleChange = React.useCallback(
- (event: React.ChangeEvent) => {
- event.preventDefault();
- const { name, value } = event.target;
- setFormValues((prevFormValues) => ({ ...prevFormValues, [name]: value }));
- },
- []
- );
-
- const runVerifyTotpToken = React.useCallback(
- async ({ user, code }: { user: AmplifyUser; code: string }) => {
- setVerifyTotpStatus({ isVerifying: true, errorMessage: null });
-
- try {
- await verifyTOTPToken({ user, code });
-
- setVerifyTotpStatus({ isVerifying: false, errorMessage: null });
-
- onSuccess?.(); // notify success to the parent
- } catch (e) {
- const error = e as Error;
-
- setVerifyTotpStatus({
- isVerifying: false,
- errorMessage: error.message,
- });
-
- onError?.(error); // notify error to the parent
- }
- },
- [onError, onSuccess]
- );
-
- const handleSubmit = React.useCallback(
- (event: React.FormEvent) => {
- event.preventDefault();
- const { code } = formValues;
- runVerifyTotpToken({ user, code });
- },
- [user, formValues, runVerifyTotpToken]
- );
-
- const handleCopy = React.useCallback(() => {
- navigator.clipboard.writeText(totpSecret.secretKey);
- }, [totpSecret]);
-
- /** Return null if user isn't authenticated in the first place */
- if (!user) {
- logger.warn(' requires user to be authenticated.');
- return null;
- }
-
- /** Return null if Auth.getCurrentAuthenticatedUser is still in progress */
- if (isLoading) {
- return null;
- }
-
- const { isVerifying, errorMessage } = verifyTotpStatus;
-
- return (
-
-
- {totpSecret?.qrCode ? (
-
- ) : null}
-
- {copyCodeText}
-
-
-
-
- {confirmText}
-
- {errorMessage ? {errorMessage} : null}
-
-
- );
-}
-
-export default ConfigureTOTP;
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/ConfigureTOTP.test.tsx b/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/ConfigureTOTP.test.tsx
deleted file mode 100644
index 3b07399d515..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/ConfigureTOTP.test.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from 'react';
-import {
- render,
- screen,
- fireEvent,
- waitFor,
- act,
-} from '@testing-library/react';
-
-import * as UIModule from '@aws-amplify/ui';
-
-import ConfigureTOTP from '../ConfigureTOTP';
-
-const user = { username: 'testuser' } as unknown as UIModule.AmplifyUser;
-jest.mock('../../../../internal', () => ({
- useAuth: () => ({
- user,
- isLoading: false,
- }),
-}));
-
-const setupTOTPSpy = jest.spyOn(UIModule, 'setupTOTP');
-const verifyTOTPToken = jest.spyOn(UIModule, 'verifyTOTPToken');
-
-describe('ConfigureTOTP', () => {
- beforeEach(() => {
- jest.clearAllMocks();
- });
-
- it('renders as expected', () => {
- setupTOTPSpy.mockResolvedValue('secretcode');
- const { container } = render();
- expect(container).toMatchSnapshot();
- });
-
- it('calls setupTOTP with expected arguments', async () => {
- setupTOTPSpy.mockResolvedValue('secretcode');
-
- render();
-
- await screen.findByAltText('qr code');
- expect(setupTOTPSpy).toHaveBeenCalledWith(user);
- });
-
- it('onSuccess is called after successful totp verification', async () => {
- setupTOTPSpy.mockResolvedValue('secretcode');
- verifyTOTPToken.mockResolvedValue();
-
- const onSuccess = jest.fn();
-
- await act(async () => {
- render();
- });
-
- const submitButton = await screen.findByRole('button', {
- name: 'Confirm',
- });
- fireEvent.submit(submitButton);
-
- // submit handling is async, wait for onSuccess to be called
- // https://testing-library.com/docs/dom-testing-library/api-async/#waitfor
- await waitFor(() => expect(onSuccess).toBeCalledTimes(1));
- });
-
- it('onError is called after unsuccessful submit', async () => {
- setupTOTPSpy.mockResolvedValue('secretCode');
- verifyTOTPToken.mockRejectedValue(new Error('Mock Error'));
-
- const onError = jest.fn();
- await act(async () => {
- render();
- });
- const submitButton = await screen.findByRole('button', {
- name: 'Confirm',
- });
-
- fireEvent.submit(submitButton);
-
- // submit handling is async, wait for onError to be called
- await waitFor(() => expect(onError).toBeCalledTimes(1));
- });
-
- it('error message is displayed after unsuccessful submit', async () => {
- setupTOTPSpy.mockResolvedValue('secretCode');
- verifyTOTPToken.mockRejectedValue(new Error('Mock Error'));
-
- const onError = jest.fn();
-
- await act(async () => {
- render();
- });
-
- const submitButton = await screen.findByRole('button', {
- name: 'Confirm',
- });
-
- fireEvent.submit(submitButton);
-
- // submit handling is async, wait for error to be displayed
- expect(await screen.findByText('Mock Error')).toBeDefined();
- });
-
- it('error message is displayed after unsuccessful submit', async () => {
- setupTOTPSpy.mockResolvedValue('secretCode');
- verifyTOTPToken.mockRejectedValue(new Error('Mock Error'));
-
- const onError = jest.fn();
- await act(async () => {
- render();
- });
-
- const submitButton = await screen.findByRole('button', {
- name: 'Confirm',
- });
-
- fireEvent.submit(submitButton);
-
- expect(await screen.findByText('Mock Error')).toBeDefined();
- });
-});
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/__snapshots__/ConfigureTOTP.test.tsx.snap b/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/__snapshots__/ConfigureTOTP.test.tsx.snap
deleted file mode 100644
index ee951f69035..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/__tests__/__snapshots__/ConfigureTOTP.test.tsx.snap
+++ /dev/null
@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfigureTOTP renders as expected 1`] = `
-
-`;
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/constants.ts b/packages/react/src/components/AccountSettings/ConfigureTOTP/constants.ts
deleted file mode 100644
index 3557f271985..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/constants.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-const QR_CODE_SIZE = '228px';
-export const QR_CODE_DIMENSIONS = {
- height: QR_CODE_SIZE,
- width: QR_CODE_SIZE,
-};
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/defaults.tsx b/packages/react/src/components/AccountSettings/ConfigureTOTP/defaults.tsx
deleted file mode 100644
index 1b5e9602d7e..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/defaults.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-import { Alert, Button, Image, TextField } from '../../../primitives';
-import {
- AccountSettingsError,
- AccountSettingsImage,
- AccountSettingsSubmitButton,
- AccountSettingsTextField,
-} from '../types';
-
-export const ConfirmationCode: AccountSettingsTextField = TextField;
-
-export const SecretKeyQRCode: AccountSettingsImage = Image;
-
-export const CopySecretKey: AccountSettingsSubmitButton = Button;
-
-export const SubmitButton: AccountSettingsSubmitButton = (props) => (
-
-);
-
-export const Error: AccountSettingsError = (props) => {
- return ;
-};
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/index.ts b/packages/react/src/components/AccountSettings/ConfigureTOTP/index.ts
deleted file mode 100644
index a41d614ed93..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ConfigureTOTP } from './ConfigureTOTP';
diff --git a/packages/react/src/components/AccountSettings/ConfigureTOTP/types.ts b/packages/react/src/components/AccountSettings/ConfigureTOTP/types.ts
deleted file mode 100644
index 9e2170fd63f..00000000000
--- a/packages/react/src/components/AccountSettings/ConfigureTOTP/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface TotpSecret {
- secretKey: string;
- qrCode: string;
-}
-
-export interface VerifyTotpStatus {
- isVerifying: boolean;
- errorMessage: string;
-}
-
-export interface ConfigureTOTPProps {
- /** TOTP issuer. Default to "AWSCognito" */
- totpIssuer?: string;
- /** TOTP username. Default to `user.username` */
- totpUsername?: string;
- /** callback once totp is successfully set up */
- onSuccess?: () => void;
- /** callback when there's an error */
- onError?: (error: Error) => void;
-}
diff --git a/packages/react/src/components/AccountSettings/index.ts b/packages/react/src/components/AccountSettings/index.ts
index 94efda90280..bdb43156855 100644
--- a/packages/react/src/components/AccountSettings/index.ts
+++ b/packages/react/src/components/AccountSettings/index.ts
@@ -1,3 +1,2 @@
export { ChangePassword } from './ChangePassword';
export { DeleteUser } from './DeleteUser';
-export { ConfigureTOTP } from './ConfigureTOTP';
diff --git a/packages/react/src/components/AccountSettings/types.ts b/packages/react/src/components/AccountSettings/types.ts
index 8f86b642c4f..cd7a352b064 100644
--- a/packages/react/src/components/AccountSettings/types.ts
+++ b/packages/react/src/components/AccountSettings/types.ts
@@ -2,8 +2,6 @@ import React from 'react';
import {
AlertProps,
ButtonProps,
- TextFieldProps,
- ImageProps,
PasswordFieldProps,
PrimitiveProps,
} from '../../primitives/types';
@@ -14,12 +12,10 @@ import {
* Note that `PrimitiveProps` is used to get native html types, like `onSubmit`.
*/
type CommonPasswordFieldProps = PrimitiveProps;
-type CommonTextFieldProps = PrimitiveProps;
-type CommonImageProps = PrimitiveProps;
type CommonButtonProps = PrimitiveProps;
type CommonAlertProps = PrimitiveProps;
-/*
+/**
* These are overridable component types (e.g. submit button).
*/
export type AccountSettingsPasswordField = React.ComponentType<
@@ -27,14 +23,6 @@ export type AccountSettingsPasswordField = React.ComponentType<
Props & CommonPasswordFieldProps & { validationErrors?: string[] }
>;
-export type AccountSettingsTextField = React.ComponentType<
- Props & CommonTextFieldProps
->;
-
-export type AccountSettingsImage = React.ComponentType<
- Props & CommonImageProps
->;
-
export type AccountSettingsSubmitButton = React.ComponentType<
Props & CommonButtonProps
>;
diff --git a/packages/ui/src/helpers/accountSettings/utils.ts b/packages/ui/src/helpers/accountSettings/utils.ts
index 808a5ac0a01..1225608248b 100644
--- a/packages/ui/src/helpers/accountSettings/utils.ts
+++ b/packages/ui/src/helpers/accountSettings/utils.ts
@@ -42,37 +42,3 @@ export const deleteUser = async () => {
return Promise.reject(e);
}
};
-
-export const setupTOTP = async (user: AmplifyUser) => {
- try {
- logger.debug('calling Auth.setupTOTP');
-
- const secretCode = await Auth.setupTOTP(user);
- logger.debug('Auth.setupTOTP was successful');
-
- return secretCode;
- } catch (e) {
- logger.error('Auth.setupTOTP failed with error', e);
- return Promise.reject(e);
- }
-};
-
-export const verifyTOTPToken = async ({
- user,
- code,
-}: {
- user: AmplifyUser;
- code: string;
-}) => {
- try {
- logger.debug('calling Auth.verifyTotpToken');
-
- await Auth.verifyTotpToken(user, code);
- logger.debug('Auth.verifyTotpToken was successful');
-
- return Promise.resolve();
- } catch (e) {
- logger.error('Auth.verifyTotpToken failed with error', e);
- return Promise.reject(e);
- }
-};