aws-amplifyの認証機能を実装してみる

注意: 🔰初心者です🙇‍♂️

React × amplifyを使ってログイン画面を実装する機会があったので、簡単に紹介したいと思います。
今日(2019/10/17)時点で既に、amplifyに関する本や記事がたくさんあるのを見かけるので、この記事は「AWS触ったことがないからコワイ」方を対象に、amplifyを知るキッカケにでもなって頂ければと思います。

## ログイン画面を作る前にやっておくこと
作業前に環境を整えておく必要があります。私よりも詳しく説明下さっている記事がたくさんありますので、私自身参考になったサイトを紹介します。

### 事前準備
①Node.jsのバージョンは8.X以上
②npmのバージョンは5.X以上
③amplify cliをグローバルインストール

```shell
$ npm install -g @aws-amplify/cli
```

④お持ちのAWSアカウントでIAMユーザーを作っておきます。（次のステップ、「amplify configure」で必要です。）
参考になった記事: [AWS Amplify CLIの使い方〜インストールから初期セットアップまで〜](https://qiita.com/Junpei_Takagi/items/f2bc567761880471fd54)
⑤`configure`コマンドを進めると、AWS IAMダッシュボードが開くので、設定を進めていきます。
そこでaccessKeyIDやsecretAccessKey等も入力していきます。

```shell
$ amplify configure
```

### create-react-appでプロジェクト作成
create-react-appで適当な作業用プロジェクトを作成しておき、作成したフォルダ内でaws-amplify、aws-amplify-reactライブラリをインストールします！

```shell
$ npm install aws-amplify aws-amplify-react
```

また、`$ amplify init`コマンドで環境変数を入力していきます。

```shell
$ amplify init
```

実はこのあたりの操作、YouTubeでAWSスタッフの方がamplifyについて講義をされております。ぜひ観てみてください！
↓
[【AWS Black Belt Online Seminar】AWS Amplify](https://youtu.be/ufdgDjVf-uI)

上手くいくとフォルダ内に`aws-exports.js`ファイルと`amplify`フォルダができているのがわかると思います。


## 簡単実装
上記までの事前準備が完了したら、ログイン周りの実装に入っていきます！amplifyはAuth認証APIを提供してくれてるので、まずは

```shell
$ amplify add auth
```
コマンドをし、色々聞かれるので選択していきます。
ちなみに今回は下のような設定で進めてます。YouTubeの説明の通りな感じです。

```shell
Do you want to use the default authentication and security configuration?
> Default configuration

How do you want users to be able to sign in?
> Username

Do you want to configure advanced settings?
> No, I am done.
```

完了したら最後に`$ amplify push`コマンドをし、AWSのCognito画面上に新しくユーザープール、IDプールが作成されているのを確認してみてください！
（CognitoはAWSの認証サービスです。ユーザーの操作を簡単且つセキュアに扱うことができ、FacebookやGoogleアカウントとの連携も可能にしてくれます。詳細は[Amazon Cognito](https://aws.amazon.com/jp/cognito/)）

```shell
$ amplify push
```

AmplifyはUIも提供しているので、ここまで来たら最速で実装できる方法をご紹介します！
ここでは`withAuthenticator`コンポーネントが登場します。
まずは前準備に`src/index.js`ファイルにaws-amplifyライブラリと先ほど自動で生成された`aws-exports.js`をimportしていきます。

```javascript
import Amplify from 'aws-amplify'
import config from './aws-exports'

Amplify.configure(config)
```

次にApp.jsファイルにaws-amplify-reactが提供している`withAuthenticator`コンポーネントを呼び出します。
今回は公式サイトで紹介されている、最小の設定を試してみることにします。（[Amplify Javascript](https://aws-amplify.github.io/docs/js/authentication)）

```javascript
...
import { withAuthenticator } from 'aws-amplify-react'

function App() {
...
}

export default withAuthenticator(App)
```

これだけで下のようなログイン画面の出来上がりです！キャプチャは、新規でアカウントを作成し、メールに届いた仮パスワードを入力している画面です。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327745/4e9d0242-a2e3-f0e8-71c4-866320ae4400.gif)

App.js内に下のようなサインアウトボタンを置いてみて、挙動を確認してみてください。

```javascript
import { Auth } from "aws-amplify"

<button onClick={() => { Auth.signOut() }}>Sign Out</button>

// または下のようにsignOut関数を作成
const signOut = () => {
  Auth.signOut()
    .catch((error) => console.log('サインアウト失敗: ', error))
}
```

合わせて、ユーザー情報も表示するようにしてみました。
`aws-amplify`が提供している`Auth.currentUserPoolUser()`で取得することができます！

```javascript
const data = await Auth.currentUserPoolUser()
```

`console.log()`するとお分かりかと思いますが、`username`にはログイン中のユーザー名、`attributes`にメールアドレスが入っています。電話番号の認証もしていれば`phone_number`も取得出来ます。


余談ですが、トークン情報も欲しかったので、下のような関数を作って作成していました。`console.log`して取得出来ているのを確認してみください！

```javascript
const getLocalStorageIdToken = async () => {
  const resp = await Auth.currentSession()
  const accessToken = resp.getAccessToken().getJwtToken()

  console.log("トークン: ", accessToken)
}
```

## 追記
スターターキットが用意されています！
https://github.com/aws-samples/aws-amplify-auth-starters/tree/react

git cloneし、ブランチを「React」にしてから`$ npm i`します。
`$ amplify init`、`$ amplify push`で設定して`$npm start`すると、素敵デザインが出来上がっております！！
スターターキットもう少し触ってみることにしますが、感動中です👀✨
<img width="1076" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327745/f5e78037-3911-fd60-bf43-6ac90b4ecb87.png">

## 触ってみて
敷居が高く感じられたAWSが、aws amplifyのお陰で大分親近感が湧いた感じがします。
ありがたや〜🙏✨