Zenn
🍣

Amplify(with Cognito) + React の始め方

2024/01/17に公開
AWS
React
Amplify
auth
Cognito
tech

初めに

Amplify(with Cognito) + React　を作成した際に、詰まったので手順としてまとめておく。

事前準備

  1. 以下を参考にnode.jsをインストール
    https://qiita.com/ryome/items/eec08b28aff294e8c3d6
  2. amplifyをインストール
    $ npm install -g @aws-amplify/cli
  3. amplifyがインストールされていることを確認
    $ amplify -v
  4. amplifyの認証情報を設定
    $ amplify configure

手順

  1. React環境の構築
    $ npx create-react-app myapp
  2. myappという名前のフォルダが作成される
  3. myappのフォルダ配下に移動
    $ cd myapp
  4. Amplifyをセットアップする（以下を設定）
    $ amplify init 
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
√ Choose the type of app that you're building · javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm.cmd run-script build
? Start Command: npm.cmd run-script start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

5.認証機能を追加（以下を設定）
$ amplify add auth

? Do you want to use the default authentication and security configuration? Default configuration
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings?  No, I am done.
  1. AWSリソース（auth関連）をデプロイ
    $ amplify push
  2. aws-amplifyとaws-amplify/ui-reactのライブラリをnode_modulesフォルダにインストール
    $ npm install aws-amplify @aws-amplify/ui-react
  3. src/App.js に以下をコピペ
App.js 
import { Amplify } from 'aws-amplify';

import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

function App({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}

export default withAuthenticator(App);
  1. 実行してみると、自動でブラウザが開く
    $ npm start
  2. 以下の認証画面が表示された
  3. アカウントを新しく作成
  4. メールの確認コードを入力し、認証
  5. アクセスすることができた

参考

Discussion