Amplifyでサインイン画面をカスタマイズする方法【React】

2122 ワード
amplify React React テキストリンク

やりたいこと

次のようにセルフサインアップ（Create Account）をさせたくないときなど、項目を調整したい場合のメモ

方法

次のようにAmplifyAuthenticatorを使うと実現できます

import React, { useContext } from 'react'
import { AmplifyAuthenticator, AmplifySignIn } from '@aws-amplify/ui-react'

// サインアップを隠す場合はhideSignUp属性を指定
const Signin = () =>(
    <AmplifyAuthenticator >
        <AmplifySignIn slot="sign-in" hideSignUp></AmplifySignIn>
    </AmplifyAuthenticator>
)

参考

こちらがソースですが、公式からはちょっとたどり着きにくい場所にあります
https://docs.amplify.aws/ui/auth/authenticator/q/framework/react