JWTトークンを取得できていることを確認

[TsubasaOura]

概要

JWTトークンを取得しCookieに保存されていることを確認

開発手順

• Lotteryの以下を参考にJWTを取得
  • app/src/pages/api/auth/[...nextauth].ts
  • app/src/pages/home.tsx
  • app/src/types/next-auth.d.ts
• CookieにTokenを保存されていることを確認

以下ChatGPT

NextAuth.jsはセッションの状態管理にCookieを使用します。デフォルトでは、NextAuth.jsはセッショントークンをクライアントのCookieに保存します。Cookieの名前はデフォルトでは"next-auth.session-token"ですが、設定に応じて変更することもできます。

TokenをHeaderに含めて別のAPIを呼び出す方法は、次のようなコード例で実現できます。

import { useEffect, useState } from 'react';
import { useSession } from 'next-auth/client';

const MyComponent: React.FC = () => {
  const [session, loading] = useSession();
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      if (session) {
        try {
          const response = await fetch('/api/my-api', {
            headers: {
              Authorization: `Bearer ${session.accessToken}`,
            },
          });
          const data = await response.json();
          setApiData(data);
        } catch (error) {
          console.error(error);
        }
      }
    };

    fetchData();
  }, [session]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (!session) {
    return <div>Please sign in</div>;
  }

  return (
    <div>
      {/* APIのデータを表示 */}
      {apiData && <div>{apiData}</div>}
    </div>
  );
};

export default MyComponent;

上記の例では、useSessionフックを使用して現在のセッションを取得し、session.accessTokenを使ってJWTトークンを取得しています。それをHeaderの"Authorization"フィールドにBearerスキーマとともに追加して、axiosを使ってAPIを呼び出しています。/api/my-apiは実際のエンドポイントに置き換える必要があります。

このコードはReactとTypeScriptを使用していますが、Next.jsのプロジェクト内であればほぼ同様の方法で利用できます。ただし、/api/my-apiのエンドポイントはNext.jsのAPIルートとして作成する必要があります。