トークン渡しているのに、no token provided(401error)が出る

Question

Next.jsでSpotify APIを使ってデータを取得しようとしたところ no token provided(401error)が出る。
認証にはNextAuthを使っている。

//一部省略
import {prisma} from "..";//省略
import {getSession} from "next-auth/client";

const Search:NextPage = ({token}) => {
const [value,setValue] = useState<string>("");//inputの値

const clickHandler = () => {
//ここでエラー
 axios
      .get(`https://api.spotify.com/v1/search?q=${value}&type=track&limit=20`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => {
        let data = res.data;
        console.log(data.tracks.items);
      });
}

return(
//省略
)
}

export const getServerSideProps:GetServerSideProps = async (ctx) => {
//認証ない時リダイレクト
 const session = await getSession(ctx);
  if (!session) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    };
  }
//sessionのacccessTokenからログイン中のユーザー取得
  const user = await prisma.session.findFirst({
    where: {
      accessToken: String(session.accessToken),
    },
  });
//userIdからaccount取得
  const account = await prisma.account.findFirst({
    where: {
      userId: user?.userId,
    },
  });
//accountのaccessTokenを返す
  return {
    props: {
      token: account.accessToken,
    },
  };
}

<試したこと>
・sessionのaccessTokenでも試してみたが同様に401のエラーが出る。
・console.logで確認したところ、tokenの値はしっかりとSearchコンポーネントまで届いている。

協力よろしくお願いします。

Answer 1

どうやらNextAuth.js の設定が間違っていたようです。tokenをRefreshするロジックが抜けておりました。

＜参考にしたサイト＞
・https://next-auth.js.org/tutorials/refresh-token-rotation(NextAuth公式)
・https://github.com/nextauthjs/next-auth/discussions/1053(GitHub discussion)

協力しようとして下さった方、ありがとうございました。