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);

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

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

authStateとauthData

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

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

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