amplify S3 storage 403 when cognito group

403になる詳しい状況

簡単に言うと、amplifyでs3にある画像を Storage.get した際に画像をブラウザに表示したいのだが、cognito groupのユーザーでアクセスすると、画像が表示されないという症状です。

さらに、詳しく書くと

まずは、簡単なサンプルを作成して、amplifyでs3に画像をアップロード成功、s3に置いた画像を表示させることに成功したので、いざ、最新のプロジェクトに追加して、確認してみたところ、cognito認証していないゲストユーザは画像が表示出来る、また、cognitoで認証した一般ユーザも画像の表示はできる、しかし、cognitoのgroup登録したユーザー(自分の場合は管理者グループ)では画像は表示されないという、症状が発生しました。

想定しているユーザの種類

つまり、自分のプロジェクトにおいては、ユーザは3種類を想定していて、ゲスト(cognito認証していないユーザ)、会員ユーザ(cognito認証しているユーザ)、管理者(cognito認証している、かつ、cognitoのグループでadminiとなっている)ということです。再度状況を確認すると、「ゲストと会員ユーザは問題なくs3の画像が表示できている、しかし、adminiグループ所属ユーザのみ403で表示されない」ということなので、cognitoの設定は問題なくて、グループが付与されている場合に、403で表示されなくなるという点に注目すべきです。

解決方法

ある程度考えると、次第に解決方法がわかって来るのかと思いますが、この場合、amplify update storage で正しく設定し直すことで解決します。以下の通りです。

amplify update storage

? Select from one of the below mentioned services: Content (Images, audio, video, etc.)

// ここでBothを選択することで、cognito認証とgroupの両方の設定ができる(ここがポイント)
✔ Restrict access by? · Both
✔ Who should have access: · Auth and guest users
✔ What kind of access do you want for Authenticated users? · read
✔ What kind of access do you want for Guest users? · read
✔ Select groups: · admini
✔ What kind of access do you want for admini users? · create/update, read, delete
✔ Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) · no 


amplify push

(これで解決したはず)

npm run dev

403が出ずに、s3の画像がうまく表示されました。
めでたし、めでたし。