Amplify Frameworkとは
AWSがOSSとして提供している開発プラットフォーム。CLIでコマンドを叩くだけで認証やAPI、ストレージなどをAWS上にいい感じに構築してくれるスグレモノ。
最初の環境構築方法などは他の記事やサイトに書かれているのでそちらを参照していただきたい。
ただし、今回は
npm install aws-amplify-react
でaws-amplify-reactをReactアプリに組み込むことはせず、代わりに
npm install @aws-amplify/ui-react
を叩いて@aws-amplify/ui-reactを使用する。
認証画面の表示がおかしい・・・
本題に進む前にAmplify Frameworkを触っていて起きたことについて少しだけ書くと、
数多ある「Amplify Frameworkで認証画面を爆速で作ってみよう」系の記事を参考に
胸を躍らせながらAmplifyのコマンドを叩いてAWS環境を構築し、クライアントにパッケージを入れ、
いざnpm startを快音高らかに叩いた時に悲劇が起きた。
なにこれ・・・？
やべぇ・・・同じ手順で進めたはずが、クソださ認証画面を生み出してしまった。
何か間違えてたかと虱潰しに手順を確認するも特に異常なし。
途方に暮れながらGoogle先生にお伺いを立てていると天啓が届いた。
「それレガシーですよ」
公式ドキュメントではすでにaws-amplify-reactはLegacyと書かれているではないですか！（知らんかった・・・）
AWSのブログを見ると4月にはすでに発表されてるじゃないですか！（知らんかった・・・）
というわけで自分の無知に深く恥入りながらも、早速@aws-amplify/ui-reactを使って認証機能を作っていきましょうという次第であります。
（画面が変になったのはこのLegacyのせいなのかは実はちょっとハッキリしていません・・・（小声））
まずは基本のAmplifyAuthenticator
import React from 'react';
import Amplify from 'aws-amplify';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
const App = () => (
<AmplifyAuthenticator>
<div>
My App
</div>
</AmplifyAuthenticator>
);
export default App;
実装はとてもシンプルで@aws-amplify/ui-reactからAmplifyAuthenticatorをApp.jsにインポートして
認証通過後の画面要素を挟んであげるだけ。
SignIn画面
SignUp画面
これだけで冒頭でお見せしたクソださ認証画面ではなく、ちゃんと綺麗な認証画面が出来上がった。とりあえず一安心。
入力項目をカスタマイズ
@aws-amplify/ui-reactではSign-inやSign-upの入力項目や必須か否かをカスタマイズすることができる。
まずはSign-in画面のUsernameのカスタマイズから。
デフォルトでは任意のUsernameを入力することになっているが、ここでメールアドレスを利用可能にする。
まずはCognitoの認証方式でメールアドレスをUsernameとして利用できるようにしておく。（参考サイト）
Amplify FrameworkのCLIですでにメールアドレスをUsernameとして利用可能にしておいた場合は設定不要だ。
あとは以下のように先ほど書いたAmplifyAuthenticatorのusernameAliasプロパティに"email"を渡してあげればOK。
const App = () => (
<AmplifyAuthenticator usernameAlias="email"> {/* <- ここで設定 */}
<div>
My App
</div>
</AmplifyAuthenticator>
);
先ほどのSing-in画面と比べてUsernameの項目がEmail Addressに変更されている。
ここを電話番号にしたい場合はCognitoの設定後にusernameAliasに"phone_number"を渡すことで実現できる。
次にSign-upの入力項目が多すぎるなと感じたので減らしてみよう。
import { AmplifyAuthenticator, AmplifySignUp } from '@aws-amplify/ui-react';
まずは@aws-amplify/ui-reactからAmplifyAuthenticatorに加えてAmplifySignUpをインポート。
const App = () => (
<AmplifyAuthenticator>
<AmplifySignUp
slot="sign-up"
usernameAlias="email"
formFields={[
{
type: "email",
label: "Email address",
placeholder: "Enter your email address",
required: true,
},
{
type: "password",
label: "Password",
placeholder: "Enter your password",
required: true,
},
]}
></AmplifySignUp>
<div>
My App
</div>
</AmplifyAuthenticator>
);
export default App;
あとはAmplifySignUpを最初の画面の前にプロパティを加えて入れてあげればOK。
slotはAmplifyのUIコンポーネントをカスタマイズするために必要なプロパティ。他にもコンポーネントに合わせたslotがあるので
ここを参考に必要なslot名を入れる。（AmplifySingInならslot="sign-in"といった具合）
usernameAliasは先ほどのSign-in画面のカスタマイズの時と同様、Usernameにメールアドレスを使用可能にするプロパティ。
formFieldsは入力項目をカスタマイズするためのプロパティ。配列の中のオブジェクトによって入力項目を制御できる。
typeで入力項目の種類、labelで入力欄の上に表示される文字、placeholderで入力欄に表示されるプレースホルダー、そしてrequiredで必須項目か否かを指定することができる。
今回はメールアドレスとパスワードの２つの必須項目を設定した。
これでアカウント作成が可能になったので早速作ってみる。Sign-up画面の項目を入力してCREATE ACCOUNTをクリックすると確認画面が表示される。
登録したメールアドレスに確認用の６桁のコードが送信されるのでそれを入力すれば確認完了。アプリにサインインできるようになる。
サインアウト
これでサインインする準備ができた。サインインできるならサインアウトも必要だ。サインアウトの実装も至って簡単。
import { AmplifyAuthenticator, AmplifySignUp, AmplifySignOut } from '@aws-amplify/ui-react';
まずはAmplifySignOutを@aws-amplify/ui-reactからインポートする。
const App = () => (
<AmplifyAuthenticator usernameAlias="email">
<AmplifySignUp
slot="sign-up"
usernameAlias="email"
formFields={[
{
type: "email",
label: "Email address",
placeholder: "Enter your email address",
required: true,
},
{
type: "password",
label: "Password",
placeholder: "Enter your password",
required: true,
},
]}
></AmplifySignUp>
<div>
My App
<AmplifySignOut /> {/* <- ここに追加 */}
</div>
</AmplifyAuthenticator>
);
あとは画面の好きなところにを入れてあげれば完成。
サインインすると最初の画面に横長なSing-outボタンが表示された。
ボタンの文言を変更したいときは以下のようにbuttonTextプロパティに指定の文言を渡してあげれば変えることができる。
<AmplifySignOut buttonText="Custom Sign Out Button"/>
（小文字で書いても大文字になっちゃうみたい・・・）
ちょっとだけ問題点
追記（2020/8/3）
コメントにある通り、Amplifyの公式サイトにログイン画面の配置を真ん中にするCSSのテンプレートがあった。
index.cssに以下を記述することでログイン画面が真ん中に表示された。
新コンポーネントを利用する際は忘れずに記載するようにしよう。
（ずっとApp.cssの方に記載して「全然反映されねぇ…」と少し焦ったのは内緒。）
amplify-authenticator {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
height: 100vh;
}
とっても簡単に認証画面周りを構築してくれるAmplify Frameworkの新コンポーネントだが、少しだけ問題点もあった。（※追記で解決済み）
上記では認証コンポーネントのみを切り抜いてスクショしていたのでわからなかったが、実は下のように左上にデフォルトで表示されてしまうのだ。
Legacy版のwithAuthenticatorを使っていた場合だとデフォルトでスクリーンの真ん中に表示されていたが、新バージョンはそこまで気を利かせてはくれないらしい。
IssueもまだOpen状態なので今後改善されるのを待つしかなさそう。
<AmplifyAuthenticator usernameAlias="email" style={{ textAlign: 'center', margin: 0 }}>
こんな感じでstyleを適用してみても横方向の真ん中に設定できるくらいだった。（・・・ので誰か知恵をお貸しください（ﾎﾞｿｯ））
ちなみに新バージョンにもwithAuthenticatorはあるので以下のように使えばサインイン画面を真ん中に表示させることはできる。
import React from 'react';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
const App = () => (
<div>
<AmplifySignOut />
My App
</div>
);
export default withAuthenticator(App);
ただしこれだとAmplifySingUpの入力項目カスタマイズができなかった。（調査不足でできたらゴメンナサイ・・・）
ここら辺のデザイン周りが調整されればあとは完璧かなと感じた。画面のど真ん中にこだわらない方であれば横方向の真ん中までなら配置できるので問題ないはず。
まとめ
Amplify FrameworkはCLIを操作するだけでバックエンド、フロントエンド両方をいい感じに作ってくれる便利なフレームワーク。
新しいUIコンポーネントでも手軽に項目の操作などができ、認証周りの開発はとても捗りそう。
ここで述べた他にもカスタマイズ可能な項目やコンポーネントはたくさんあるので今後も調べながら使ってみたい。
また記事中に何か不足している点などがあれば是非ご指摘いただければ助かります。