Name:
interface
Value:
Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.
Gen1 DocsLegacy

Page updated Mar 26, 2026

認証イベントのリスン

Amplify Auth は認証フロー中にイベントを発行します。これにより、ユーザーフローをリアルタイムで監視し、カスタムビジネスロジックをトリガーできます。たとえば、データをキャプチャし、アプリの状態を同期し、ユーザーエクスペリエンスをパーソナライズしたい場合があります。サインインやサインアウトなど、Auth ライフサイクル全体のイベントをリスンして対応できます。

認証アクションに対応して発生する Hub イベントを公開する

Amplify Hub とその組み込みの Amplify Auth イベントを使用して、パブリッシュ-サブスクライブパターンを使用してリスナーをサブスクライブし、アプリケーションの異なる部分間でイベントをキャプチャできます。Amplify Auth カテゴリは、signedInsignedOut などの認証イベントがアプリコードとは独立して発生した場合に auth チャネルで公開します。

Amplify Hub ガイドで詳細を学習できます。

チャネルは、ディスパッチとリスニングの整理に役立つ論理グループ名です。ただし、一部のチャネルは保護されており、カスタムイベントの公開には使用できません。auth はこれらの保護されたチャネルの 1 つです。保護されたチャネルに予期しないペイロードを送信すると、認証フローに影響を与えるなど、望ましくない副作用が生じる可能性があります。詳細は Amplify Hub ガイドで、保護されたチャネルの詳細をご覧ください。

auth チャネルを通じて発行されたイベントをログするリスナーをセットアップする基本的な例を次に示します:

import { Hub } from 'aws-amplify/utils';
Hub.listen('auth', (data) => {
console.log(data)
});

アプリが auth チャネルから特定のイベントタイプのサブスクライブとリスニングを設定すると、イベントが発生したときに、サブスクライブされたリスナーが非同期で通知されます。このパターンにより、1 対多の関係が可能になります。1 つの認証イベントが、サブスクライブされた多くの異なるリスナーと共有できます。これにより、アプリはイベントに基づいて対応でき、プロアクティブに情報をポーリングする必要がなくなります。

さらに、イベントペイロードからデータを抽出し、定義したコールバックを実行するようにリスナーをセットアップできます。たとえば、signedIn または signedOut イベント後に、ユーザーの認証状態を反映するためにアプリの UI 要素を更新することができます。

認証イベントをリスニングしてログする

最も一般的なワークフローの 1 つは、イベントをログすることです。この例では、switch を使用して特定の auth イベントをターゲットにし、独自のメッセージをログする方法を確認できます。

import { Hub } from 'aws-amplify/utils';
Hub.listen('auth', ({ payload }) => {
switch (payload.event) {
case 'signedIn':
console.log('user have been signedIn successfully.');
break;
case 'signedOut':
console.log('user have been signedOut successfully.');
break;
case 'tokenRefresh':
console.log('auth tokens have been refreshed.');
break;
case 'tokenRefresh_failure':
console.log('failure while refreshing auth tokens.');
break;
case 'signInWithRedirect':
console.log('signInWithRedirect API has successfully been resolved.');
break;
case 'signInWithRedirect_failure':
console.log('failure while trying to resolve signInWithRedirect API.');
break;
case 'customOAuthState':
logger.info('custom state returned from CognitoHosted UI');
break;
}
});

イベントのリスニングを停止する

Hub.listen() 関数の結果を呼び出すことで、メッセージのリスニングを停止することもできます。アプリケーションフロー内でメッセージを受け取る必要がなくなった場合に便利です。これは、Amplify Hub を使用して複数のチャネルで大量のデータを送信する場合に、低電力デバイスのメモリリークを回避するのに役立ちます。

特定のイベントのリスニングを停止するには、リスナー関数を変数でラップし、それ以上必要がなくなったら呼び出す必要があります:

/* start listening for messages */
const hubListenerCancelToken = Hub.listen('auth', (data) => {
console.log('Listening for all auth events: ', data.payload.data);
});
/* later */
hubListenerCancelToken(); // stop listening for messages

これで、認証イベントをリスニングして対応するためのいくつかのユースケースと例が得られました。