背景
結構前の自分の記事でCognitoのIDプールでユーザー毎フォルダにアクセスしていました。最近、このプロジェクトをVue2からVue3に移行したり、TypeScriptに変えたり、ログイン画面でAmplifyUIコンポーネントを使うように移行したりしました。
今回はTypeScriptの移行ではまった部分があり、原因と解消方法はシンプルだったのですが、なかなかそれらしき記事が無く時間かかってしまったので、同じ現象にはまっている方の手助けになればと思って小ネタ記事を書いてみます。
エラー発生個所と解消方法
S3にアクセスする際、ユーザー毎のフォルダ制限はRoleにおいてidentityId
で指定します。
移行前のjavaScriptのソースは以下の感じです。
import AWS from 'aws-sdk'
const PROVIDER_KEY = 'cognito-idp.' + awsconfig.Region + '.amazonaws.com/' + awsconfig.UserPoolId
//・・中略・・
// Initialize the Amazon Cognito credentials provider
AWS.config.region = awsconfig.Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: awsconfig.IdentityPoolId,
Logins: {
[PROVIDER_KEY]: ${JWTトークン}
}
})
var identityId = AWS.config.credentials.identityId
var s3key = 'cognito/myhome-account/' + identityId + '/testfile.txt'
そのままTypeScriptとしてビルドすると以下エラーが発生します。
TS2339: Property 'identityId' does not exist on type 'Credentials | CredentialsOptions'.
Property 'identityId' does not exist on type 'Credentials'.
> 75 | const identityId = AWS.config.credentials.identityId;
| ^^^^^^^^^^
CognitoIdentityCredentialsにはちゃんとidentityIdが存在します。
原因
エラーメッセージを見るとわかりますが、type 'Credentials | CredentialsOptions'
とあり、AWS.config.credentials
はCognitoIdentityCredentials
でなくCredentials
である事が解ります。
CognitoIdentityCredentials
はCredentials
の継承クラスでした。
対応
const credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: awsConfig.Auth.identityPoolId,
Logins: {
[PROVIDER_KEY]: idToken
}
});
AWS.config.credentials = credentials;
const identityId = credentials.identityId;
一度、CognitoIdentityCredentials
クラスのインスタンスとしてcredentials
を作成し、それをAWS.config.credentials
に設定する事で設定を行い、identityIdの取得時にもcredentials
変数から取得する様にしました。
まとめ
TypeScriptの型指定に引っかかったという話でした。javaScriptだとコンパイルエラーにもならず動作もするので最初凄く深く考えてしまいました。ちゃんとエラーメッセージをよく読んで何が起きているのか落ち着いて考えればもっと早く気付いたと思います。