概要

AWS Cognitoを使ったWebサービスを開発しています。
DBとのCRUD操作周りでユーザの認証情報を使いたいです。
Reactでそれらをどのように使うかを記載します。
AmplifyのフレームワークであるuseAuthenticatorを活用します。

目次

Cognitoってなに
useAuthenticatorを使って認証情報を取得する

1.Cognitoってなに

AWS Cognitoは、モバイルアプリやWebアプリなどのアプリケーションでユーザー認証と認可を管理するためのフルマネージドなサービスです。開発者はAWS Cognitoを使用して、ユーザーのアカウントを作成し、認証情報を保存し、ユーザーグループを管理し、アクセス権限を設定できます。また、ソーシャルログイン、マルチファクター認証、フェデレーションなどの高度な機能も提供されています。

AWS Cognitoは、シンプルでスケーラブルなAPIを介して、アプリケーションからアクセスできます。また、Amazon API Gateway、AWS Lambda、Amazon S3などのAWSサービスと統合して使用することができます。

AWS Cognitoを使用することで、開発者は簡単かつ安全にユーザーの認証と認可を管理できます。また、AWS Cognitoは、さまざまな規模のアプリケーションに適した柔軟な料金設定を提供しています。

ただし、AWS Cognitoには、より高度な機能を利用するための制限があります。たとえば、無料枠では最大50,000ユーザーの同時ログインまでしかサポートされていません。より大きなアプリケーションを開発する場合は、アドバンスに加入することで、より高度な機能を利用し、より大きな規模のユーザーベースをサポートすることができます。また、アドバンスに加入することで、サポートやSLAなどの追加のサービスも受けることができます。まあ少し高いですけど。。。

Amplifyと組み合わせることでなんとも手軽にセキュアな認証基盤を構築することができるので、めちゃくちゃ便利です。あと、Cognitoはセキュリティ監査を通過するといった点などにも役立つサービスです。

Cognitoの公式のURL
https://aws.amazon.com/jp/cognito/

アドバンスについても
https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pool-settings-advanced-security.html

2.useAuthenticatorを使って認証情報を取得する

さて、本題に入りましょう。

前提条件

cognitoにメールアドレスを登録済みであること。
Amplifyを使っていること。

useAuthenticatorってなに

useAuthenticatorは、AWS Amplifyフレームワークの一部で、アプリケーション内で認証を行うために使用されるReactフックです。useAuthenticatorフックは、認証に関連する情報を取得するために使用されます。たとえば、useAuthenticatorフックを使用して、現在のユーザー情報、サインアウト機能、ルーティングなどを取得することができます。これらの情報は、アプリケーション内で認証を行うために必要な情報です。useAuthenticatorフックは、AWS Amplifyライブラリを使用するために必要なコンポーネントであるAuthenticatorコンポーネントの下に置く必要があります。このコンポーネントは、アプリケーション内の認証フローを処理するために使用されます。

実際に使ってみる

そんなわけで、認証情報の操作にはuseAuthenticatorを使っていきます。今回は、ユーザのメールアドレスを使用したいので、メールアドレスを取得していきます。Authなどを使う方法でも可能ですが、今回はuseAuthenticatorを使用します。
コードは以下になります。

any.jsx

import { React } from 'react' //some hooks
import { Amplify } from 'aws-amplify'; //Regarding with Amplify
import awsconfig from '/各自のディレクトリ構造//aws-exports'; 
import { Authenticator, useAuthenticator } from '@aws-amplify/ui-react'; //AmplifyでReactのuiを提供するライブラリ
import '@aws-amplify/ui-react/styles.css'; //css適用

Amplify.configure(awsconfig); //Amplifyフレームワークを初期化するためのメソッド

function any() {
  const { user, route } = useAuthenticator((context) => [context.user]);
  const mail = user.attributes.email;
  console.log(`認証されたユーザのメールアドレスを出力：${mail}`);

return(
  <div className="App">
  <Authenticator className="App" hideSignUp={true}>
    {({ signOut, user }) => (
        <main>
          <h1>What's going on? {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
    )}
  </Authenticator>
  </div>
);
}

export default any;

サインイン後のユーザの認証情報を、

const { user, route } = useAuthenticator((context) => [context.user]);

で取得し、メールアドレスの情報をmailに格納しています。

const mail = user.attributes.email;

この例では、コンソールに出力しています。
Authenticatorでコンポーネントを囲むことを忘れないでください。

補足

ページ遷移などを実装する場合は、ページ遷移の処理をRouterコンポーネントで囲んで、それをラッパーコンポートとしてAuthenticator.Providerで囲むことで、useEffectフックなどを使用したレンダリング後に認証情報を取得するといったことも可能になります。処理の順番によっては、認証情報を取得できないことがあるためです。

ちなみに、import部分にある@aws-amplify/ui-reactに含まれるコンポーネントやユーティリティを使うためには、Amplify.configureでAWS Amplifyを初期化する必要があります。そのため、以下の記述は必要です。

import awsconfig from '/各自のディレクトリ構造//aws-exports'; 
Amplify.configure(awsconfig);

おわりに

Cognitoの認証情報をuseAuthenticatorを使って扱う方法を記載しました。
Authでユーザ情報を扱う方法についてもそのうち備忘を残します。