Skip to content

Instantly share code, notes, and snippets.

@wcheek
Created June 16, 2022 07:40
Show Gist options
  • Save wcheek/bc806fe6ad4db758fb4825c6f4aba1ba to your computer and use it in GitHub Desktop.
Save wcheek/bc806fe6ad4db758fb4825c6f4aba1ba to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment