You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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;
}
}
})
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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 theaccess_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?
Beta Was this translation helpful? Give feedback.
All reactions