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の日本語化](https://qiita.com/ssugimoto/items/d0bc7540493499b6b154)
その３：[Amplify UI を使ったログイン画面をカスタムする](https://qiita.com/ssugimoto/items/697ff173cc18ed860ed0)

---

## 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認証も）

### 少しのコード
#### サインイン（とサインアップ）ならば以下のコードで認証用のフォームが表示できる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/c5d9c4b2-8f47-9719-ad86-87d73e050e49.png" width="400" />


```tsx
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
    ```
    
1. Amplify CLI で Authentication with Amplify 
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/
のうち、必要そうなコマンドやjsを以下に抜粋

    ```sh
    amplify add auth
    amplify push
    amplify console
    ````

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

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

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