add doc

README.md

@@ -8,6 +8,9 @@ Amazon API Gateway WebSocket APIにCognito認証を組み込むサンプルで
 
 Lambda AuthorizerとAPI GatewayのためのLambda関数と、バックエンドデプロイのためのCDKコード、動作確認のためのフロントエンドの実装が含まれます。
 
+> [!NOTE]
+> [AppSync Events](https://docs.aws.amazon.com/appsync/latest/eventapi/event-api-welcome.html)での実装例も追加しました。こちらはCognito UserPoolを利用した認証の仕組みが隠蔽されるため、ユーザー側の実装はよりシンプルになります。詳細は[`echo-events.tsx` (React)](./frontend/src/components/echo-events.tsx)と [`events.ts` (CDK)](./cdk/lib//construct/events.ts)もご覧ください。
+
 ## アーキテクチャ
 本サンプルは、WebSocket APIでのCognito JWT認証を実現するための最小限のアーキテクチャを実装しています。
 
@@ -38,10 +41,11 @@ npx cdk deploy --require-approval never
 
 ```sh
 Outputs:
-BackendStack.region = ap-northeast-1
-BackendStack.userPoolId = ap-northeast-1_xxxxxxx
-BackendStack.userPoolWebClientId = xxxxxxxxxxxxxxxxxxxxxxxxxx
-BackendStack.webSocketEndpoint = wss://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod
+BackendWebSocketStack.AppSyncEventsEndpoint = https://xxxxx.appsync-api.ap-northeast-1.amazonaws.com/event
+BackendWebSocketStack.Region = ap-northeast-1
+BackendWebSocketStack.UserPoolId = ap-northeast-1_xxxxxxx
+BackendWebSocketStack.UserPoolWebClientId = xxxxxxxxxxxxxxxxxxxxxxxxxx
+BackendWebSocketStack.WebSocketEndpoint = wss://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod
 ```
 
 この情報は次のフロントエンドのセットアップに利用することができます。

README_en.md

@@ -5,6 +5,9 @@ This sample demonstrates how to integrate Cognito authentication with Amazon API
 
 It includes the Lambda implementations for Lambda Authorizer and API Gateway Lambda proxy, AWS Cloud Development Kit (CDK) code to deploy backend infrastructure, and React frontend implementation for demonstration purposes. 
 
+> [!NOTE]
+> We added an example implementation for [AppSync Events](https://docs.aws.amazon.com/appsync/latest/eventapi/event-api-welcome.html) as well. In this case, because most of the authentication mechanism using Cognito user pool is abstracted away, users will not need much code to implement auth. Please refer to [`echo-events.tsx` (React)](./frontend/src/components/echo-events.tsx) and [`events.ts` (CDK)](./cdk/lib//construct/events.ts) for more details.
+
 ## Architecture
 This sample contains the least and simplest set of implementations to achieve Cognito JWT authentication and authorization for WebSocket API. Please refer to [implementation](#implementation) section for the details.
 
@@ -34,10 +37,11 @@ Initial deployment usually takes about 10 minutes. After a successful deployment
 
 ```sh
 Outputs:
-BackendStack.region = ap-northeast-1
-BackendStack.userPoolId = ap-northeast-1_xxxxxxx
-BackendStack.userPoolWebClientId = xxxxxxxxxxxxxxxxxxxxxxxxxx
-BackendStack.webSocketEndpoint = wss://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod
+BackendWebSocketStack.AppSyncEventsEndpoint = https://xxxxx.appsync-api.ap-northeast-1.amazonaws.com/event
+BackendWebSocketStack.Region = ap-northeast-1
+BackendWebSocketStack.UserPoolId = ap-northeast-1_xxxxxxx
+BackendWebSocketStack.UserPoolWebClientId = xxxxxxxxxxxxxxxxxxxxxxxxxx
+BackendWebSocketStack.WebSocketEndpoint = wss://xxxxxxxxx.execute-api.ap-northeast-1.amazonaws.com/prod
 ```
 
 You can use those values to configure the frontend app next. Please create `.env.local` file by running the following command:

cdk/lib/construct/events.ts

@@ -8,6 +8,8 @@ export interface EventsProps {
 }
 
 export class Events extends Construct {
+  readonly endpoint: string;
+
   constructor(scope: Construct, id: string, props: EventsProps) {
     super(scope, id);
 
@@ -43,6 +45,6 @@ export class Events extends Construct {
     // });
     // new CfnOutput(this, "ApiKeyOutput", { value: apiKey.getAtt("ApiKey").toString() });
 
-    new CfnOutput(this, "ApiUrl", { value: `https://${api.getAtt("Dns.Http").toString()}/event` });
+    this.endpoint = `https://${api.getAtt("Dns.Http").toString()}/event`;
   }
 }

cdk/lib/stack/backend.ts

@@ -46,6 +46,10 @@ export class BackendStack extends cdk.Stack {
       new cdk.CfnOutput(this, `WebSocketEndpoint`, {
         value: websocket.apiEndpoint,
       });
+
+      new cdk.CfnOutput(this, `AppSyncEventsEndpoint`, {
+        value: events.endpoint,
+      });
     }
   }
 }

frontend/src/components/echo-events.tsx

@@ -1,5 +1,4 @@
 import { FC, useEffect, useState } from "react";
-import { fetchAuthSession } from "aws-amplify/auth";
 import { Typography, Button, TextField, Stack } from "@mui/material";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { events } from "aws-amplify/data";
@@ -14,15 +13,17 @@ const EchoEvents: FC = () => {
   const [messages, setMessages] = useState<string[]>([]);
 
   const initializeClient = async () => {
-    const currentSession = await fetchAuthSession();
     console.log(`initializing connection...`);
     const channel = await events.connect("/default/test");
     channel.subscribe({
       next: (data) => {
         console.log(data);
         setMessages((prev) => [...prev, data.message.message]);
       },
-      error: (err) => console.error(err),
+      error: (err) => {
+        console.error(`error on subscription ${err}`);
+        setStatus("error");
+      },
     });
     setStatus("connected");
     console.log("successfully initialized connection.");