How do I get the access token in client-side components? (v5)

[christopherhan]

I have a NextJS frontend and backend APIs written in FastAPI / Python. My backend is using my own User / Account database table (postgres) and not relying on any Adapters. I'm primarily using Google login

I want to pass the auth provider JWT token (id_token) in every request to my API inside my client-side components, which I'll then validate on the Python server-side. (see example API call below).

It seems like useSession no longer contains the access_token is not available on the client side.

How can I get the access_token within my client side components so I can send them in my API requests? Or am I thinking about the flow incorrectly / is there a better way to do this?

// app/api/auth/[...nextauth]/route.ts

import { handlers } from "auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

// auth.ts
import NextAuth from "next-auth"
import Google from "next-auth/providers/google"
import { buildApiUrl } from "./utils/api"
import { Provider } from "next-auth/providers"
import { useSession } from "next-auth/react"
import User from "./components/AddChatList/User"

const providers: Provider[] = [
    Google({
        clientId: process.env.NEXT_PUBLIC_GOOGLE_CLOUD_CLIENT_ID as string,
        clientSecret: process.env.GOOGLE_CLOUD_CLIENT_SECRET as string,
    })
]

export const providerMap = providers.map((provider: any) => {
  if (typeof provider === "function") {
    const providerData = provider()
    return { id: providerData.id, name: providerData.name }
  } else {
    return { id: provider.id, name: provider.name }
  }
})
 
export const { handlers, signIn, signOut, auth } = NextAuth({
    providers: providers,
    pages: {
      signIn: "/login",
    },
    callbacks: {
        async redirect({ url, baseUrl}) {
            if (url.startsWith("/")) return `${baseUrl}/${url}`

            // Allows callback URLs on the same origin
            if (new URL(url).origin === baseUrl) return url

            return baseUrl
        },
        async jwt({ token, user, account, profile }) {
          // this is called after sign-in or page refresh

          if (profile) {
            const payload = {
              email: profile?.email,
              name: profile?.name,
              type: account?.type,
              provider: account?.provider,
              provider_account_id: account?.providerAccountId,
              refresh_token: account?.refresh_token,
              access_token: account?.access_token,
              expires_at: account?.expires_at,
              id_token: account?.id_token,
              scope: account?.scope,
              token_type: account?.token_type
            }
            // create the user
            const response = await fetch(buildApiUrl('/v2/user/register'), {
              method: "POST",
              headers: {
                'Content-Type': 'application/json',
                'X-API-Key': 'Bearer ' + process.env.API_KEY,
                'X-Auth-Provider': '' + account?.provider, // excluding the empty string lead to an error with headers
                'Authorization': 'Bearer ' + account?.id_token
              },
              body: JSON.stringify(payload),
            }).then((response) => {
              if(!response.ok) {
                // TODO handle more gracefully
                // or load 500 error page
                throw new Error('Failed to register user');
              }

            }
          )

          }
          return token;
        },
        async signIn({ account, profile, user }) {
          if (profile?.email?.endsWith("@email.com") || 
              profile?.email?.endsWith("@email2.com") ||
              profile?.email == "email@email3.com") {
              return true; // true allows the user to signin
          }
          return false;
        }
    }
})