React で AWS Cognito を使う

こちらの記事と同じことを、行ってみました。
Amplify を使わず React で AWS Cognito 認証を使う

確認した環境

$ uname -a
Linux iwata 5.13.0-27-generic #29-Ubuntu SMP Wed Jan 12 17:36:47 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

$ node --version
v17.5.0

$ npm --version
8.4.1

ソースコードをクローン

git clone https://github.com/kenzauros/react-auth-with-cognito

.env.local の作成

cd react-auth-with-cognito
cp .env.local.example .env.local

編集します。

.env.local

REACT_APP_AUTH_REGION=ap-northeast-1
REACT_APP_AUTH_USER_POOL_ID=ap-northeast-1_123abcdef
REACT_APP_AUTH_USER_POOL_WEB_CLIENT_ID=123456789abc***
REACT_APP_AUTH_COOKIE_STORAGE_DOMAIN=localhost

これらの値は、
AWS のコンソールにサインして
Cognito で確認します。

REACT_APP_AUTH_USER_POOL_ID

REACT_APP_AUTH_USER_POOL_WEB_CLIENT_ID

アプリケーションの統合

ライブラリーのインストール

npm install

サーバーの起動

npm start

クライアントで
http://localhost:3000/
にアクセス

ログインをクリックすると

ユーザー　に登録されているメールアドレスでログイン

ビルド

npm run build

サーバーの実行

serve -s build