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

なんかいい感じのがあったので試してみた。 https://github.com/aws/aws-amplify Reactプロジェクトのセットアップ何はともあれReactプロジェクトがなければ話になりません。 Crea […]

なんかいい感じのがあったので試してみた。
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すると、以下のようなページがでます。

デフォルトではhttps://localhost:3000/

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

$ 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()を使うことで勝手に読み込むようにしてくれます。