Amplify で Authenticatior
を使うとサクッと認証の仕組みが出来て良いのだが、外部サービスとの連携なんかでアクセストークンやIDトークンが欲しいときがあるかもしれない。そんなときのスニペットメモ。Gen2でも使えた。
目次
コード
といっても例によって「How to get user access token in AWS Amplify UI Authenticator - Stack Overflow」に記事があり、これ以上言うことはないのだが、昨今メモっておかないとあっという間にネットの海に消えてしまうのでメモ的に。
以下は App.tsx
の中身。
import { fetchAuthSession } from "@aws-amplify/auth";
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
function App() {
return (
<Authenticator>
{({ signOut, user }) => {
// Function to print access token and id token
const printAccessTokenAndIdToken = async () => {
try {
const session = await fetchAuthSession(); // Fetch the authentication session
console.log(
"Access Token:",
session.tokens?.accessToken.toString()
);
console.log("ID Token:", session.tokens?.idToken?.toString());
} catch (e) {
console.log(e);
}
};
return (
<main>
<h1>{user?.signInDetails?.loginId}'s todos</h1>
<h1>My App</h1>
<div>
App successfully hosted.
<br />
<a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
Review next step of this tutorial.
</a>
</div>
<button onClick={signOut}>Sign out</button>
<button onClick={printAccessTokenAndIdToken}>Print Tokens</button>
</main>
);
}}
</Authenticator>
);
}
export default App;
コード内の printAccessTokenAndIdToken()
の部分がそう。実行すると、コンソールログにAccess Tokenと ID Token が残る。
参考
ありがとうございました。
- How to get user access token in AWS Amplify UI Authenticator - Stack Overflow
- 手を動かして0から理解するAmplify Gen2 #AWS - Qiita
- Lambda関数との連携で同様にクレデンシャル情報を取得してます
コメント