Zenn
Open3

amplify-sns.workshop.awsをやる

nasubitanasubita
amplify add auth

amplify status

    Current Environment: dev
    
┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Auth     │ boyaki00000000 │ Create    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

amplify push

認証機能のフロントエンド実装

バージョン指定ではうまくいかないので外す
参考　https://dev.classmethod.jp/articles/amplify-congito-try-user-authentication/

- npm install --save aws-amplify@3.3.14 @aws-amplify/ui-react@0.2.34
+ npm install --save aws-amplify@ @aws-amplify/ui-react@
./src/App.js
import React from 'react';
import Amplify from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignUp, AmplifySignOut } from '@aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

const App = () => {
    const [authState, setAuthState] = React.useState();
    const [user, setUser] = React.useState();

    React.useEffect(() => {
        return onAuthUIStateChange((nextAuthState, authData) => {
            setAuthState(nextAuthState);
            setUser(authData)
        });
    }, []);

  return authState === AuthState.SignedIn && user ? (
      <div className="App">
          <div>Hello, {user.username}</div>
          <AmplifySignOut />
      </div>
    ) : (
      <AmplifyAuthenticator>
        <AmplifySignUp
          slot="sign-up"
          formFields={[
            { type: "username" },
            { type: "password" },
            { type: "email" }
          ]}
        />
      </AmplifyAuthenticator>
  );
}

export default App;
nasubitanasubita
npm start
...
webpack 5.68.0 compiled with 28 errors in 23197 ms

動かない。ライブラリバージョンに問題がありそう
参考　https://qiita.com/AkiSuika/items/265a08d0d58274af69c5

npm list --depth=0

boyaki@0.1.0 /amplify-sns-workshop/boyaki
├── @aws-amplify/ui-react@2.2.1
├── @testing-library/jest-dom@5.16.2
├── @testing-library/react@12.1.2
├── @testing-library/user-event@13.5.0
├── aws-amplify@4.3.13
├── react-dom@17.0.2
├── react-scripts@5.0.0
├── react@17.0.2
└── web-vitals@2.1.4

npm remove @aws-amplify/ui-react
npm install @aws-amplify/ui-react@1.2.25

npm start

ERROR in ./node_modules/@aws-crypto/ie11-detection/build/CryptoOperation.js

うーん