AWS AmplifyをReactに組み込んでユーザー認証まわりをいい感じにする

なんかいい感じのがあったので試してみた。
https://github.com/aws/aws-amplify

Reactプロジェクトのセットアップ

何はともあれReactプロジェクトがなければ話になりません。
Create React Appでサクッと作っちゃいます。

$ mkdir amplify-react
$ cd amplify-react
$ create-react-app ./

※ npm install -g create-react-appでCreate React Appは導入できます。

こんなメッセージが出れば準備OK

Success! Created amplify-react at /Users/develop/node/react/amplify-react
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd /Users/develop/node/react/amplify-react
  yarn start

Happy hacking!

yarn startまたはnpm startすると、以下のようなページがでます。

ディレクトリ構造はこんな感じ。

$ tree -L 1
.
├── README.md
├── node_modules
├── package.json
├── public
├── src
└── yarn.lock

aws-amplifyのインストール

いよいよインストールします。

React Nativeの場合はaws-amplify-reactではなくaws-amplify-react-nativeをインストールします。

$ npm i -S aws-amplify aws-amplify-react

AWSサービスのセットアップ

認証周りの機能を利用するためには、Amazon Cognito User PoolとAmazon Cognito Identity Poolが必要です。

ドキュメントにAWS Mobile Hubで一括セットアップというボタンがありますので、「ちょっとよくわからない」という方はこれを使いましょう。

以下の値が必要となりますので、控えておきましょう。

• 両サービスのデプロイ先リージョン名(us-east-1など)
• Amazon Cognito Identity Pool ID
• Amazon Cognito User Pool ID
• Amazon Cognito Web Client ID

aws-amplifyのセットアップ

ここまで順調に進めば、必要なデータが揃っているはずです。
ということで先ほど作成したプロジェクトにaws-amplifyを組み込んでいきます。

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// aws-amplifyの読み込み
import Amplify from 'aws-amplify';
// Reactへの組み込み用HOC
import { withAuthenticator } from 'aws-amplify-react';

// AWSリソースの情報読み込み
Amplify.configure({
    Auth: {
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', //REQUIRED - Amazon Cognito Identity Pool ID
        region: 'XX-XXXX-X', // REQUIRED - Amazon Cognito Region
        userPoolId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito User Pool ID
        userPoolWebClientId: 'XX-XXXX-X_abcd1234', //OPTIONAL - Amazon Cognito Web Client ID
    }
});

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

// withAuthenticatorでラップする
export default withAuthenticator(App);

元のソースとの差分は10〜20行くらいでいけました。
基本機能についてはwithAuthenticator()を使うことで勝手に読み込むようにしてくれます。

変更後の画面

上記の変更を保存すると、npm startで表示させてるページが大きく変わります。

またログイン画面だけでなく、新規アカウントの作成画面や認証コードの入力画面も用意してくれます。

おわりに

本格的に使うとなるとReduxやredux-saga / redux-thunkあたりとの相性なども気になってくるところですが、サクッと何か作りたい時にはかなり便利そうです。

ログイン画面のカスタマイズやServerless Frameworkで作った認証つきAPIとの連携なども今試しているところですので、時間が出来次第こちらも記事にして紹介していきたいと思います。

今回のサンプルコード（使い方はREADME.md参照）