(Amplify/Cognito)ログイン画面を実装の際に'./aws-exports'を使うと後々ハマるのでベタ書きが良い。

はじめに

IoTデバイス用のログイン画面を実装したく、Amplify+Cognito+Reactを使用した。
様々な記事を参考にして進めてみたがハマったポイントが多く、私のようにフロントに精通していない人の参考になれば幸いです。

よく紹介される方法と問題点

チュートリアルの流れとして、

$ sudo npm install -g @aws-amplify/cli
$ amplify configure

上記コマンドを使用して、

./aws-exports
.aws/credentials

を作成することが多いだろう。

しかし、その方法では./aws-exportsが原因で後々ハマってしまう。

• GithubからAmplifyでデプロイする際に、ビルドエラーになってしまう。
• ローカルにファイルが残るので、開発環境の共有しにくい。
• どのプールと連携しているか、わかりにくい

既にビルドエラーになってしまった人は下記記事を参考にしてください。

結論: ./aws-exports を使用しない

ローカルから直接amplify pushして手動デプロイを都度行いたい人意外は、./aws-exportsは不要と考える。

必要ライブラリをインストール

$ npm install aws-amplify
# もしくは
$ npm install -g @aws-amplify/cli

$ amplify -v
10.6.1

# Amplifyライブラリインストール
$ npm install aws-amplify @aws-amplify/ui-react

ソースコードを編集する

import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
import { Amplify } from 'aws-amplify';

//ここに認証情報を書き込む
Amplify.configure({
  Auth: {
    identityPoolId: process.env.REACT_APP_IDENTITY_POOL_ID,
    region: process.env.REACT_APP_REGION,
    userPoolId: process.env.REACT_APP_USER_POOL_ID,
    userPoolWebClientId: process.env.REACT_APP_USER_CLIENT_ID,
  }
})

function App() {
  return (
    <div className="App">
      <header>
        <img src={logo} className="App-logo" alt="logo" />
        <h1>We now have Auth!</h1>
      </header>
      <AmplifySignOut />
    </div>
  );
}
 
export default withAuthenticator(App);

.envファイルを作成して、認証情報を書き込む。

.env

REACT_APP_IDENTITY_POOL_ID=ap-northeast-1:XXXXXXX
REACT_APP_REGION=ap-northeast-1
REACT_APP_USER_POOL_ID=ap-northeast-1_XXXXXXXXX
REACT_APP_USER_CLIENT_ID=XXXXXXXXXXXXXXXX