Amplify v6を使ってidTokenを取得し、headerに含めるやり方

はじめに

新人研修でWebアプリケーションをチームで開発しています。
APIが叩き放題だったため、Cognitoを使ってAPI Gatewayのアクセス認証をすることにしました。

発生した問題

• Amplify v6では、idTokenの取得など、Amplify v5から変更があった。
• 調べてもAmplify v5の記事しかなく、苦戦した。

結論

import { fetchAuthSession } from "aws-amplify/auth";

//idTokenを取得
const session = await fetchAuthSession();
const token = session?.tokens?.idToken?.toString();

//headerに含める
const headers = { headers: { Authorization: token } };
//GETする際にheaderを含める例
const response = await axios.get(ENDPOINT_URL, headers);

さいごに

これからAmplify v6を使う人の助けになれたら嬉しいです。
100%正しいとは言い切れないので、もっと良い方法などがあったらぜひ教えてください！
次は、Amplifyを使って簡単にサインイン、サインアップを実装する記事を書こうと思います。

参考

Amplify公式ドキュメント
Cognitoを使ってAPI Gatewayのアクセス認証をしてみた