Amplify SNS workshopやってみる

mkdir amplify-sns-workshop
cd amplify-sns-workshop

npx create-react-app boyaki
cd boyaki

amplify init

npm start

amplify add auth

amplify status

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

npm install --save aws-amplify@3.3.14 @aws-amplify/ui-react@0.2.34

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;

npm list --depth=0
npm remove @aws-amplify/ui-react
npm install @aws-amplify/ui-react@1.2.25
npm list --depth=0

npm cache clean

npm install
npm start

1. ブラウザでhttp://localhost:3000にアクセスします
2. Create acccountをクリックします
3. Username、Password、Emailを入力し、CREATE ACCOUNTをクリックします
4. Passwordは8文字以上である必要があります
5. 入力したメールアドレスに送付されたConfirmation Codeを入力し、CONFIRMをクリックします
6. Username、Passwordを入力しログインしましょう
7. Hello, ${ユーザー名}と表示されればログイン完了です

amplify push

amplify mock api

Failed to start API Mock endpoint Error: Command failed with exit code 1: java -version
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

brew cask install corretto

brew install corretto  --cask

installer: The install was successful.
🍺  corretto was successfully installed!

amplify mock api

Failed to start API Mock endpoint InvalidDirectiveError: @auth directive with 'userPools' provider found, but the project has no Cognito User Pools authentication provider configured.

amplify push

Choose the code generation language target javascript
Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
Enter maximum statement depth [increase from default if your schema is deeply nested] 3

✔ Generated GraphQL operations successfully and saved at src/graphql
✔ All resources are updated in the cloud

GraphQL endpoint: ※※※※※※※※※※※※※※※※※※※※※※※※
GraphQL API KEY: ※※※※※※※※※※※※

GraphQL transformer version: 2

amplify status

    Current Environment: dev
    
┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Auth     │ boyakid004686a │ No Change │ awscloudformation │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Api      │ boyaki         │ No Change │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

GraphQL endpoint: https://xxx
GraphQL API KEY: xxx

GraphQL transformer version: 2

amplify mock api

MacBookPro:boyaki niheitomotaka$ amplify mock api
✅ GraphQL schema compiled successfully.

Edit your schema at ./amplify-sns-workshop/boyaki/amplify/backend/api/boyaki/schema.graphql or place .graphql files in a directory at ./amplify-sns-workshop/boyaki/amplify/backend/api/boyaki/schema
Creating new table PostTable
Running GraphQL codegen
✔ Generated GraphQL operations successfully and saved at src/graphql
AppSync Mock endpoint is running at http://xxx.xxx.xxx:20002

@auth(rules: [{ allow: owner, queries: null }])