概要

Amplify UIライブラリ

Amplify UIでは、数ヶ月くらい前（2021-11-20）にVer2系がリリースされた
Ver1系ではVer2系のリリースに伴いレガシーとなった

AWSの中の人である、https://twitter.com/ASpittel/status/1461761961591459841 および
https://twitter.com/AWSAmplify/status/1461763039741591552 から知った。
twitterは情報が速い

この記事中の用語の対比

用語	似た意味
サインイン	ログイン
サインアップ	アカウント作成、ユーザー作成

３編にわたり記載しています

その１：この記事
その２：Amplify UI Authenticatorの日本語化
その３：Amplify UI を使ったログイン画面をカスタムする

Amplify UI Ver1系 React

Ver1系はレガシー (https://docs.amplify.aws/ui-legacy/ )
これからAmplify UIを使う場合は、拡張性や脆弱性等を考えると、V2系がオススメ

Ver1系を使う場合のドキュメント（説明）では以下２通りある

https://github.com/aws-amplify/amplify-ui/blob/legacy/legacy/aws-amplify-react/README.md
https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-react

npm で install するライブラリ aws-amplify-react または @aws-amplify/ui-react@v1 のどちらかを使う

Amplify UI Ver2系React

	URLや説明
V2系のドキュメント	https://ui.docs.amplify.aws/
ライブラリ	`@aws-amplify/ui-react`

UIライブラリなのでサインイン（サインアップ）に限らず、画面の構成・UIパーツもある
サインイン等の認証系はコンポーネント「Authenticator」になる（ https://ui.docs.amplify.aws/components/authenticator )
他には、Chatbot、S3Storage機能がある

V1系からV2系への変更

V1系のpackage.json

package.json

"dependencies": {
    "@aws-amplify/auth": "^4.1.1",
    "@aws-amplify/ui-react": "^1.2.5",
    "aws-amplify": "^4.1.3",

V2系のpackage.json

以下のバージョンでは使う分には問題ない

package.json

    "@aws-amplify/auth": "^4.3.18",
    "@aws-amplify/interactions": "^4.0.5",
    "@aws-amplify/storage": "^4.3.0",
    "@aws-amplify/ui-react": "^2.1.2",
    "aws-amplify": "^4.3.10",

2022-02-11時点の最新だと、2.3系がある https://www.npmjs.com/package/@aws-amplify/ui-react 2.3.0 で良さそう

Examples GitHub

Examples は、https://github.com/aws-amplify/amplify-ui/tree/main/examples になる
- ここにReactのサンプルは存在しない（Next.js、Vue.jsとAngularはある）
- vueではVue 3 + Typescript + Viteのサンプル
React（およびVueもAngularも）のサンプルドキュメントは、https://ui.docs.amplify.aws/ を見れば良い（画面の右上のアイコンでライブラリ向けのページへ）

Amplify UI の Authenticator

ログイン周りでの Amplify + Cognito または Amplify + AppleやGoogle 等のアカウントが非常に手軽にできる

例えば、以下のようなことを少しのコードだけで実現可能になる

ログイン
パスワード忘れ
一時パスワードからのパスワード強制変更
パスワード忘れからの認証コードのメール送信と確認コード入力、新パスワード設定
アカウント作成（利用しないことも可能、タブは cssの制御のため cognitoでアカウント作成を管理者に限定する場合は、ユーザープールで管理者のみユーザー作成可能となるように変更が必須）
TOTPによるログイン認証（SMS認証も）

少しのコード

サインイン（とサインアップ）ならば以下のコードで認証用のフォームが表示できる

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

その他

Amplifyフレームワークを使っていなくても、Amplify.configureができればcognitoとの連携ができるためcognitoユーザープールを使っていればAmplify UIのAuthenticatorを使うことが可能になる

Amplify UI の Authenticatorを使う手順

https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components
または
https://ui.docs.amplify.aws/components/authenticator
を参考にすると良いです。

大まかな手順

amplifyの環境準備（https://docs.amplify.aws/cli/start/install/）
```
npm install -g @aws-amplify/cli

amplify configure
```
Amplify CLI で Authentication with Amplify
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/
のうち、必要そうなコマンドやjsを以下に抜粋
```
amplify add auth
amplify push
amplify console
```
Web アプリケーションにライブラリを入れる（Configure your application）
```
npm install aws-amplify @aws-amplify/ui-react
```

アプリケーションの最初に呼ばれる App.js等でUIライブラリを読み込み使う

App.js


import { Amplify } from 'aws-amplify';

import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

function App({ signOut, user }) {
  return (
    <>
      <h1>Hello {user.username}</h1>
      <button onClick={signOut}>Sign out</button>
    </>
  );
}

export default withAuthenticator(App);

例２

App.js

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>

上述に記載の手順のApp.jsとは異なるライブラリ（AmplifyProvider ）を使った場合
https://ui.docs.amplify.aws/getting-started/installation

Amplify UI の Authenticatorでのカスタマイズや機能

サインイン、サインアップ

ユーザー名、メールアドレス、電話番号でのサインイン（ログイン）もある
サインアップで必要とさせる項目を決められる
サインアップを非表示にできる
<Authenticator hideSignUp={true}> や css .amplify-tabs { display: none;}
サインアウト（ログアウト）

フォームのカスタマイズ

どんなカスタマイズができるのか

ヘッダー、フッター、サインヘッダー、サインフッター、サインアップヘッダー、サインアップフッター、Confirm Sign Up 、Confirm Sign Up

カスタマイズできるため利用規約、ディスクレーマー等のページへのリンクを設置できる
システムロゴの表示
ボタン系の色、背景

signUp, signIn, confirmSignIn, confirmSignUp, forgotPassword and forgotPasswordSubmit functions

関数の上書きができる
自前の処理を挟むことができる

多言語対応

デフォルト（英語）
日本語にも対応

つづき
その2( https://qiita.com/ssugimoto/items/d0bc7540493499b6b154) として日本語対応を記載

Amplify UI を使ったログイン画面（Amplify UIその1）

概要