index.tsx 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import * as React from 'react'
  2. import * as ReactDOM from 'react-dom'
  3. import { Amplify } from 'aws-amplify'
  4. import { Authenticator } from '@aws-amplify/ui-react'
  5. import '@aws-amplify/ui-react/styles.css'
  6. function setupConfigure () {
  7. Amplify.configure({
  8. Auth: {
  9. // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
  10. // identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
  11. // REQUIRED - Amazon Cognito Region
  12. region: 'us-east-1',
  13. // OPTIONAL - Amazon Cognito Federated Identity Pool Region
  14. // Required only if it's different from Amazon Cognito Region
  15. // identityPoolRegion: 'XX-XXXX-X',
  16. // OPTIONAL - Amazon Cognito User Pool ID
  17. userPoolId: 'us-east-1_ldvDmC9Fe',
  18. // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
  19. userPoolWebClientId: '41m82unjghlea984vjpk887qcr',
  20. // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
  21. // mandatorySignIn: false,
  22. // OPTIONAL - This is used when autoSignIn is enabled for Auth.signUp
  23. // 'code' is used for Auth.confirmSignUp, 'link' is used for email link verification
  24. // signUpVerificationMethod: 'code', // 'code' | 'link'
  25. // OPTIONAL - Configuration for cookie storage
  26. // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
  27. cookieStorage: {
  28. domain: 'localhost',
  29. path: '/',
  30. expires: 365,
  31. sameSite: 'strict',
  32. secure: true,
  33. },
  34. // OPTIONAL - customized storage object
  35. // storage: MyStorage,
  36. // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
  37. authenticationFlowType: 'USER_SRP_AUTH',
  38. //
  39. // // OPTIONAL - Manually set key value pairs that can be passed to Cognito Lambda Triggers
  40. // clientMetadata: {myCustomKey: 'myCustomValue'},
  41. //
  42. // // OPTIONAL - Hosted UI configuration
  43. // oauth: {
  44. // domain: 'your_cognito_domain',
  45. // scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
  46. // redirectSignIn: 'http://localhost:3000/',
  47. // redirectSignOut: 'http://localhost:3000/',
  48. // responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
  49. }
  50. })
  51. }
  52. export default function App () {
  53. return (
  54. <div style={{ display: 'flex', justifyContent: 'center', height: '90vh', alignItems: 'center' }}>
  55. <Authenticator signUpAttributes={['email']}
  56. socialProviders={['google']}>
  57. {({ signOut, user }) => (
  58. <main>
  59. <h1>Hello {user.username}</h1>
  60. <button onClick={signOut}>Sign out</button>
  61. </main>
  62. )}
  63. </Authenticator>
  64. </div>)
  65. }
  66. function main () {
  67. setupConfigure()
  68. // mount
  69. ReactDOM.render(<App/>, document.getElementById('app'))
  70. }
  71. // bootstrap
  72. main()