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

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