概要
AppSyncでAuth0を認証プロバイダーに使用した時にユーザの関連データをDynamoDBにも保存してCRUD操作をさせたいユースケースは結構あると思います。それをどのようにやればよいのかをこの記事では書いています。
DynamoDBにUserMetaテーブルを追加して、AppSyncでAuth0によるOIDC認証をさせてGraphQLのMutationでデータを追加するみたいなケースを考えてみましょう。
AppSync設定
認証
認証モードにOpenID Connectを選択してプロバイダードメインにAuth0のエンドポイントを追加しましょう。契約しているAuth0テナントごとにhttps://<テナント名>.auth0.com
というURLが存在しているのでそれを設定します

GraphQLスキーマ設計
以下のようにUerMetaにユーザー名を登録するためのMutationを定義します
type Mutation {
postUserMeta(name: String!): UserMeta
}
type Query {
getUserMeta: UserMeta
}
type UserMeta {
id: String!
name: String!
}
schema {
query: Query
mutation: Mutation
}

DynamoDBテーブルの作成
次にDynamoDBのUserMetaテーブルを作成しましょう。idをプライマリキーとしてここにAuth0のUserIDが登録される想定です。

データソースの作成
AppSyncのコンソールに戻って次はスキーマとマッピングするためのデータソースを作成します。データソースにはDynamoDBテーブルを指定して、先程作成したテーブルを指定しましょう。

リゾルバの作成
スキーマ設計の画面に戻り以下の赤枠をクリックしてリゾルバを作成してデータソースとの紐付けを行います。

$ctx.identity.sub
でOIDCで認証したユーザのUserIDがリゾルバ上で取得できます。これをキーにDynamoDB上のデータを操作します。

動作確認
Auth0でサンプルのSPAアプリを作り、ユーザログインしてそのIDトークンをコピーします。Auth0のSDKを使えば以下のようなコードで取得できますね。
const claims = await auth0.getIdTokenClaims();
console.log(claims.__raw)
このユーザのIDはauth0|5ef312c92f184a001366fd8b
となるのでこれがDynamoDBに登録されていればOKです

AppSyncのクエリ機能を使ってテストします。OpenIDコネクトからコピペしたIDトークンを入力してクエリを実行すると以下のように成功しました。

ちゃんとDynamoDBにもデータが出来ています。
