Amplify + React で Authenticator 使用時にアクセストークンとIDトークンを取得するメモ

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 が残る。

参考

ありがとうございました。

本サイトはUXを悪くするevilなGoogle広告を消しました。応援してくださる方は おすすめガジェット を見ていってください!
よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

目次