はじめに

React + AWS Amplify + Cognito でユーザー認証を行うアプリを作ってみたいと思います。

Amplify は AWS のサービスを便利に使用できる JavaScript ライブラリで、Cognito は AWS でユーザー認証を行えるサービスになります。

この記事では、TypeScprit な React プロジェクトで、Amplify + Cognito を使用するサンプルをご紹介します。

Cognito の設定

Cognito の管理画面で、まずはユーザープールを作成します。

ユーザープールの追加画面で、プール名を入力して「デフォルトを確認する」から作成まで行ってします。

f:id:fnyablog:20190324165139p:plain:w480

ユーザープールが作成されると「プールID」が発行されるので控えておきます。

ここでユーザーも追加しておきましょう。

ユーザーとグループのユーザーの作成から、以下の画面でユーザーを登録します。

f:id:fnyablog:20190324170608p:plain:w480

以下のようなパスワード通知がメールアドレスに届けば成功です。なお、このパスワードは初回ログイン時に変更が必要になります。

Your temporary password

Your username is Test and temporary password is HL2yuUG|.

アプリクライアントの設定を行います。

アプリクライアント名を入力し、「クライアントシークレットの作成」のチェックを外し、アプリクライアントの作成を行います。

f:id:fnyablog:20190324165754p:plain:w480

作成が終わると、「アプリクライアントID」が発行されるので控えておきます。

フェデレーティッドアイデンティティで、新しいIDプールの作成を行います。

IDプール名、ユーザープールIDとアプリクライアントIDを入力して「プールの作成」を行います。

f:id:fnyablog:20190324171800p:plain:w480

f:id:fnyablog:20190324171818p:plain:w480

途中でロールの許可を求められるので「許可」します。

最後の画面で、プラットフォームを「JavaScript」にすると表示される「IdentityPoolId」を控えておきます。

f:id:fnyablog:20190324172549p:plain:w480

これで Cognito の設定は完了です。

React プロジェクトの作成

React は TypeScript を使いたいので、以下のコマンドでプロジェクトを作成します。

> npx create-react-app プロジェクト名 --scripts-version=react-scripts-ts

次に、プロジェクトのカレントで Amplify のパッケージを追加します。

> yarn add aws-amplify aws-amplify-react

ただこのままではうまくいかなく、TypeScript で Amplify を使用するにあたっていろいろなエラーが出たので、別記事にまとめておいたので必要時にご参照ください。

www.aruse.net

App.tsx は以下のようになります。

import Amplify from 'aws-amplify';
import { Authenticator } from 'aws-amplify-react';
import * as React from 'react';

Amplify.configure({
  Auth: {
    identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx', // FederatedID連携後に追加する
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_xxxxxxxxx', // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // OPTIONAL - Amazon Cognito Web Client ID
  }
});

class App extends React.Component {
  public render() {
    return (
      <Authenticator />
    );
  }
}

export default App;