AmplifyとReactを使用して爆速でユーザー認証画面を実装する

下準備

以下の内容に沿って準備する。
AmplifyとReactを使用して爆速でWEBアプリを作成する

ユーザー認証の設定

amplify add auth
amplify push

App.jsの修正

App.jsを以下のようにする。

import { withAuthenticator } from 'aws-amplify-react';
import Amplify, { Auth } from 'aws-amplify';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
...
export default withAuthenticator(App);

この時点で登録、ログイン、パスワードのリセット等が利用可能に。

ログアウト機能追加

以下を参考にログアウトボタンを追加。
https://github.com/aws-amplify/amplify-js/issues/1529

  signOut() {
    const { onStateChange } = this.props;
      Auth.signOut().then(() => {
        onStateChange('signedOut');
      });
  }

<button onClick={()=>this.signOut()}>ログアウト</button>

公開

amplify publish