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

概要

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
を参考にすると良いです。

大まかな手順

1. amplifyの環境準備（https://docs.amplify.aws/cli/start/install/）

   npm install -g @aws-amplify/cli
   
   amplify configure
   

2. Amplify CLI で Authentication with Amplify
   https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/
   のうち、必要そうなコマンドやjsを以下に抜粋

   amplify add auth
   amplify push
   amplify console
   

3. Web アプリケーションにライブラリを入れる（Configure your application）

   npm install aws-amplify @aws-amplify/ui-react
   

4. アプリケーションの最初に呼ばれる 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) として日本語対応を記載