AWS Amplify のサインイン時の項目を変更してみた

#はじめに

このページでは Amplify のサインイン画面の初期項目を変更するための方法を Document を見ながら実装しました。

日本語化対応からの修正内容はこちら

#開発環境

• Windows 10
• nodist(nodeのバージョン管理)
  • node 12.13.0
• VSCode

Amptify のサインイン画面を変更したい！

前提として

デフォルトで認証機能を作成すると、上記画像の項目が用意されます。
個人的には Cognito で電話番号は管理させたくないと思ったので…この電話番号の項目を設定出来なくすることは可能か？と思ったのが事の発端でした。

カスタマイズする方法がないか調べているとリファレンスが見つかりました。

内容を読む限り、任意の場所に用意した画面を描画できるタグがあるらしく、オプションを設定すると色々修正できるらしいです

ということで、今まで日本語化まで地道に行ってきたプロジェクトに手を入れていきます。

認証画面のカスタマイズ用のページを作成する

src/views/SampleAuth.vue

<template>
  <amplify-authenticator v-bind:authConfig="authConfig"></amplify-authenticator>
</template>
<script>
export default {
  name: "sampleAuth",
  data() {
    return {
      authConfig: {
        signUpConfig: {
          hiddenDefaults: ["phone_number"]
        }
      }
    };
  }
};
</script>

今回項目の変更を行いたいのでカスタマイズページを用意します。
リファレンスによると amplify-authenticator タグを書くだけで、認証機能一通りの機能を用意してくれるらしいです。
こちらを用いると、authConfig 内で各ページに対してのプロパティを設定することが出来るようです。
今回は、サインアップするときの設定値を修正したいので、signUpConfig に非表示にする設定を追加しました。

ルートを変更する

（before）src/router/index.js

  {
    path: "/auth",
    name: "Authenticator",
    component: components.Authenticator
  }

元々のソースコードは component に 「components.Authenticator」と書くことで、デフォルトの認証画面を描画指定ました。
今回はカスタムページを用意したので、こちらを呼び出すように修正します。

（after）src/router/index.js

import SampleAuth from "../views/SampleAuth";
// ・・・（中略）・・・
  {
    path: "/auth",
    name: "sampleAuth",
    component: SampleAuth
  }

画面を描画してみる

サーバを立ち上げて確認してみると、電話番号の項目が消えていました。
ユーザ登録も出来ることが確認できたので hiddenDefaults で非表示にするだけで問題なさそうです。
簡単に項目が出来たので驚きました。

番外編（ログインしたならログアウトしたい）

src/components/HelloWorld.vue

<amplify-sign-out></amplify-sign-out>

試しに上記タグをページに追加してみました。

サインアウトボタンも表示され、機能自体も使えるようになっていました。（超簡単！）

終わりに

今までのソースを見返すだけでは、修正可能かどうかわからなかったけれど、調べてみるとリファレンスがすごくしっかりしていて、難なく調整が出来ました。

英語が本当に苦手なんですが、まずはリファレンスを見ることを実践していきたいと思いました。