React+Amplify+Cognitoでアプリケーションをユーザー認証でガードする

以下の記事で、React + Amplify + Cognito のユーザー認証を日本語化するところまできました。

www.aruse.net

この記事では、React のアプリケーションをユーザー認証でガードする方法をご紹介します。

具体的に言うと、サインインしていないユーザーにはサインイン画面が表示され、サインインしたユーザーにはサインイン後の画面を表示します。

と言っても、以下ようにwithAuthenticatorでAppを囲むだけです。

export default withAuthenticator(App);

これによりサインインしていないユーザーには以下の画面が表示されます。

f:id:fnyablog:20190325234411p:plain:w480

サインイン後には、以下の画面が表示されます。

f:id:fnyablog:20190325234536p:plain:w480

なお、実際のコードは以下のようになります。

ほとんどが今までの積み上げですね。

import Amplify from 'aws-amplify';
import { Auth, I18n } from 'aws-amplify'
import { withAuthenticator } from 'aws-amplify-react';
import * as React from 'react';

Amplify.configure({
  Auth: {
    identityPoolId: 'ap-northeast-1:xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx', // FederatedID連携後に追加する
    region: 'ap-northeast-1', // REQUIRED - Amazon Cognito Region
    userPoolId: 'ap-northeast-1_xxxxxxxxx', // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // OPTIONAL - Amazon Cognito Web Client ID
  }
});

class App extends React.Component {

  public signOut = () => {
    Auth.signOut();
  }

  public render() {
    return (
      <div>
        <h1>こんにちは世界</h1>
        <button onClick={this.signOut}>サインアウト</button>
      </div>
    );
  }
}

export default withAuthenticator(App);

const dict = {
  'ja': {
    'Back to Sign In': 'サインイン画面に戻る',
    'Confirm': '確認',
    'Confirm Sign Up': 'サインアップの確認',
    'Confirmation Code': '確認コード',
    'Create Account': '新規登録',
    'Create a new account': 'アカウントの新規登録',
    'Create account': '新規登録',
    'Email': 'メールアドレス',
    'Enter your code': '確認コードを入力してください',
    'Enter your password': 'パスワードを入力してください',
    'Enter your username': 'ユーザー名を入力してください',
    'Forget your password? ': 'パスワードをお忘れの方 ',
    'Have an account? ': 'アカウント登録済みの方 ',
    'Hello': 'こんにちは ',
    'Incorrect username or password': 'ユーザー名またはパスワードが異なります',
    'Lost your code? ': 'コードを紛失した方 ',
    'No account? ': 'アカウント未登録の方 ',
    'Password': 'パスワード',
    'Phone Number': '電話番号',
    'Resend Code': '確認コードの再送',
    'Reset password': 'パスワードのリセット',
    'Reset your password': 'パスワードのリセット',
    'Send Code': 'コードの送信',
    'Sign In': 'サインイン',
    'Sign Out': 'サインアウト',
    'Sign in': 'サインイン',
    'Sign in to your account': 'サインイン',
    'User does not exist': 'ユーザーが存在しません',
    'Username': 'ユーザー名',
    'Username cannot be empty': 'ユーザー名は必須入力です',
    'Username/client id combination not found.': 'ユーザー名が見つかりません',
   }
};

I18n.putVocabularies(dict);
I18n.setLanguage('ja');