$ npx create-react-app react-amplify-cognito
# react-amplify-cognito はApp名なのでお好みの名前で❗

# カレントディレクトリ移動
$ cd react-amplify-cognito

# インストール
$ npm install -g @aws-amplify/cli

# 念の為ターミナル再起動
$ exec $SHELL -l'

$ amplify init

# 以下対話

# プロジェクト名は？と問われたので、何もせずEnter❗
? Enter a name for the project (reactamplifycognito)

# 設定がずらずらでたあとに、これで良い？と確認してくるので、何もせずEnter❗
? Initialize the project with the above configuration? (Y/n)

# 認証方法を聞かれるので、プロファイルを選択する
? Select the authentication method you want to use: (Use arrow keys)
❯ AWS profile
  AWS access keys

# 設定済みのプロファイル一覧がでてくるので、そこから対応のプロファイルを選ぶ。
# →だいたいの人はデフォルトでいいと思うけれども、複数プロファイル作っている人は注意❗
? Please choose the profile you want to use (Use arrow keys)
❯ default

# しばらく待つと下記な表示が出て、初期化が完了する
Your project has been successfully initialized and connected to the cloud!

$ amplify add auth

# 以下対話

# どれ使う？と問われるのでデフォルトを選択します
Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Default configuration
  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.

# ログインするときにどれ使う？と問われるので、今回はユーザー名でいきます
How do you want users to be able to sign in? (Use arrow keys)
❯ Username
  Email
  Phone Number
  Email or Phone Number
  I want to learn more.

# 詳細設定刷る？と問われるので今回は No で❗
Do you want to configure advanced settings? (Use arrow keys)
❯ No, I am done.
  Yes, I want to make some additional changes.

# 下記が表示されてリソースの追加完了
Successfully added auth resource reactamplifycognito511115a7 locally

$ amplify push

# 下記デプロイするよーと言ってくるので、Enter
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name               | Operation | Provider plugin   |
| -------- | --------------------------- | --------- | ----------------- |
| Auth     | reactamplifycognito511115a7 | Create    | awscloudformation |
? Are you sure you want to continue? (Y/n)

$ npm install aws-amplify @aws-amplify/ui-react

$ npm run start

import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify"; // 追加
import { withAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react"; // 追加
import awsconfig from "./aws-exports"; // 追加

Amplify.configure(awsconfig); // 追加

function App() {
  return (
    <div className="App">
      <AmplifySignOut /> {/* サインアウトボタン 追加 */}
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withAuthenticator(App); // 修正

$ amplify delete