実現したいこと

• Django REST Framework + NextJS + Google認証システム構築 で作成した認証機能を用いて、DRFのAPIを実行したい。

発生している問題

• Google認証で認証でログイン後、取得したaccessTokenを用いてDRFのAPIを叩いても認証エラーになってしまう。
• ChromeののDevtoolsは下記の通りで、DRFからは401エラーが返ってきております。

code: "token_not_valid"
detail: "Given token not valid for any token type"

ソースコード

• 認証機能周りはDjango REST Framework + NextJS + Google認証システム構築に準拠しています。
• 一部、記事のとおりでは動かない部分があったので修正しています。

component.tsx (抜粋です)

import { getSession } from 'next-auth/react';

const DatasourceTableView: FC = () => {
  useEffect(() => {
    const fetchData = async () => {
      if (!data.length) {
        setIsLoading(true);
      } else {
        setIsRefetching(true);
      }
      const session = await getSession();
      // console.log(session.accessToken)
    
      const url = new URL(
        'api/v1/datamanagement/',
        process.env.NODE_ENV === 'production'
          ? 'https://www.material-react-table.com'
          : 'http://localhost:8000',
      );
      try {
        const response = await fetch(url.href,
          {
            headers: {
              'Authorization': 'JWT ' + session.accessToken,
            },
          }
          )

pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth'
import GoogleProvider from "next-auth/providers/google";
import axios from 'axios'

const settings = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      secret: process.env.SECRET,
    }),
  ],
  callbacks: {
    async signIn({user, account}) {
      if (account.provider === 'google') {
        const accessToken = account.access_token;
        const idToken = account.id_token;
        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/v1/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          )

          const { access_token } = response.data
          console.log(access_token)
          user.accessToken = access_token
          return true
        } catch (error) {
          return false
        }
      }
      return false
    },

    async jwt({ token, account }) {
      if (account) {
          token.accessToken = account.access_token
      }
      // console.log(token)
      return token
    },

    async session({ session, token }) {
      session.accessToken = token.accessToken
      return session
  }
  },
}

export default (req, res) => NextAuth(req, res, settings)

自分で試したこと

• 表示されたaccessTokenをこのサイトでエンコードしようと思ってもinvalid Signatureになる
• curl -X GET http://localhost:8000/api/v1/datamanagement/ -H 'Authorization: JWT mytoken'　と送っても同様のエラーが起きる

補足情報