App.js

import React from "react";
import { Amplify } from "aws-amplify";
import {
  AmplifyProvider,
  Authenticator,
  Button,
  Flex,
  Image,
  Text,
  View,
} from "@aws-amplify/ui-react";

import { COGNITO } from "./configs/aws";
import "@aws-amplify/ui-react/styles.css";
import theme from "./theme";
import logo from "./logo.svg";

Amplify.configure({
  aws_cognito_region: COGNITO.REGION,
  aws_user_pools_id: COGNITO.USER_POOL_ID,
  aws_user_pools_web_client_id: COGNITO.APP_CLIENT_ID,
});
const App = () => {
  return (
    <AmplifyProvider theme={theme}>
      <Authenticator>
        {({ signOut, user }) => (
          <Flex
            direction="column"
            justifyContent="flex-start"
            alignItems="center"
            alignContent="flex-start"
            wrap="nowrap"
            gap="1rem"
            textAlign="center"
          >
            <Image src={logo} alt="logo" width={240} height={240} />
            <View width="100%"></View>
            {user && (
              <View width="100%">
                <Text>Hello {user.username}</Text>
                <Button onClick={signOut}>
                  <Text>Sign Out</Text>
                </Button>
              </View>
            )}
            <View width="100%">
              <Text>
                Edit <code>src/App.js</code> and save to reload.
              </Text>
            </View>
            <div className="App"></div>
          </Flex>
        )}
      </Authenticator>
    </AmplifyProvider>
  );
};

export default App;