aws-amplify-reactでログインページ周りをカスタマイズする事前準備

公式ドキュメントが「こっちでコンポーネント用意してるから、それ使ってな」感満載なので、脇道にそれた使い方するとコアコード読まないといけないのつらいっす。 ということでコード読み次第覚書を随時追加していきます。 基本的な使 […]

広告ここから
広告ここまで

目次

    公式ドキュメントが「こっちでコンポーネント用意してるから、それ使ってな」感満載なので、脇道にそれた使い方するとコアコード読まないといけないのつらいっす。

    ということでコード読み次第覚書を随時追加していきます。

    基本的な使い方

    「HOC用意してあるから、それ使うとかんたんにやれるぜ」という作りになっています。

    import { withAuthenticator } from 'aws-amplify-react';
    
    const App = () => (
     <div>Welcome to jungle</div>
    );
    
    export default withAuthenticator(App);

    これだけで、ログイン画面などがあなたのアプリへ導入できます。やったね。

    ログインページをカスタマイズしたい

    とはいえ自社サービスでは各ページをカスタマイズしたくなります。そんなときはwithAuthenticatorの実装を持つコンポーネントを作ります。

    import { Authenticator, SignIn } from 'aws-amplify-react';
    
    const Content = () => (
     <div>Welcome to jungle </div>
    );
    
    const MySignIn = ({authState, authData}) => (
     <div>login page</div>
    )
    
    class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          authState: props.authState || null,
          authData: props.authData || null
        }
      }
      change = (state, data) => this.setState({ authState: state, authData: data })
      render() {
        if (this.state.authState === 'signedIn') {
          return <Content />
        }
        return (
          <Authenticator hide={[SignIn]} onStateChange={this.change}>
            <MySignIn {...this.state} />
          </Authenticator>
        )
      }
    }
    
    export default withAuthenticator(App);

    Authenticatorhideというプロパティがあるので、そこに使わないコンポーネントを入れておきます。

    全部使わない場合はhideDefault={true}という引数をいれておけばよいでしょう。

    authStateとauthData

    authStateには文字列が入ります。ログイン済みの場合はsignedIn、ログインが必要な場合はsignIn、MFAなどで確認が必要な場合はconfirmSignInが入ります。実装を見る限り、authStateを子コンポーネントに渡してログイン状態を判別しろということの様子です。こんな感じですね。

    authDataはログインしていない状態の場合はundefinedになります。ログイン済みの場合にCognitoUserオブジェクトが入って来ます。JWT tokenなどの値が入っているので、CognitoのAPIに直接アクセスしたい時に使えそうです。(多分)

    ちなみにこの2つの値は、Authenticatorの子コンポーネントにはデフォルトで渡されるようになっています。こんな感じです。React.cloneElementなんてものあるんですね。

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark