App.tsx

import Amplify from "aws-amplify";
import {
  CognitoUserInterface,
  onAuthUIStateChange,
  AuthState,
} from "@aws-amplify/ui-components";
import { AmplifyAuthenticator, AmplifyTotpSetup } from "@aws-amplify/ui-react";
import { useEffect, useState } from "react";

Amplify.configure({ /** redacted */ });

function App() {
  const [user, setUser] = useState<CognitoUserInterface>();
  const [authState, setAuthState] = useState<AuthState>();
  useEffect(() => {
    onAuthUIStateChange((authState, authUser) => {
      setUser(authUser as CognitoUserInterface);
      setAuthState(authState);
    });
  }, []);

  return (
    <>
      {authState !== AuthState.SignedIn ? (
        <AmplifyAuthenticator />
      ) : (
        <AmplifyTotpSetup user={user} />
      )}
    </>
  );
}

export default App;