TOTP認証と言われると「？」となりますが、ようはGoogle AuthenticatorやAuthyなどを使ってワンタイムパスワードを利用したMFAです。

AWS Amplifyを利用したReactアプリでの実装方法についてまとめました。

今回の素材

React SPAを立ち上げる必要があります。今回はGatsbyでセットアップしました。

$ gatsby new aws-totp
$ cd aws-totp

AWS Amplifyライブラリをインストール

React SPAに組み込むためのSDKを追加します。

$ yarn add aws-amplify aws-amplify-react

Cognito User Poolsをセットアップ

続いてAWS管理画面からUser Poolsをセットアップします。

セットアップの設定については、この記事を見ながらやるのが簡単です。ただし元記事にもありますように、Production導入してはNGな設定ですのでご注意ください。

認証に必要な情報を収集する

最低限以下の情報が必要ですので、準備しておきましょう。

• Cognito User Poolsのあるリージョン
• Cognito User PoolsのID
• Cognito User PoolsのアプリクライアントID
• 実際にログインするユーザー

AWS Amplify経由でReactとCognito User Poolsを連携する

動かしてみることを優先して、今回はsrc/pages/index.jsにべた書きします。

import React from "react"
import { Link } from "gatsby"
// ２行追加
import Amplify, { Auth } from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

// 追加
Amplify.configure({
  Auth: {
      region: 'ap-northeast-1', 
      userPoolId: 'ap-northeast-1_xxxxx',
      userPoolWebClientId: 'xxxxxxxxxxx'
  }
});

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi people</h1>
    {/* ログアウトボタンも追加する */}
    <button onClick={() => Auth.signOut()}>Sign out</button>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

// withAuthenticatorを追加
export default  withAuthenticator(IndexPage)

動かしてみる

実はAWS Amplifyならこれだけで準備完了です。

QRコードの出力やコードの入力についてもデフォルトで提供してくれます。