Next.js Discord

Discord Forum

Next-Auth: Anyone got an example of extending the Next-Auth Session object so I can get to the JWT?

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
I'm using Next-auth with Typescript which might just be a form extreme self-flagellation.

This page talks about extending the 'Session' type to get custom fields - https://next-auth.js.org/getting-started/typescript

I'm trying to get hold of the JWT that comes back from the provider, it seems the next-auth hides this pretty thoroughly. Ideally I want it on the client side.

I tried making a app/types/next-auth.d.ts with:

import NextAuth, { DefaultSession } from "next-auth"

declare module "next-auth" {
    /**
     * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
     */
    interface Session {
        token: string & DefaultSession["user"]
    }
}


and adding to my tsconfig.json in the include key under compilerOptions:

  "include": [
    "process.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "app/types/next-auth.d.ts"
  ],


But this has had no effect, it compiles and runs but token is always blank

I feel like a critical paragraph's missing from the instructions - has anyone got any pointers?

I'm using the next-auth-example project which means next-auth v5 Beta but I'll take examples for v4 happily as well

33 Replies

Brown bearOP
Since posting this I've figured out how to log token as in the variable of type JWT

But what I want is the raw token as it came from the provider and further reading this evening has led me to believe that Next Auth makes this impossible to get intentionally, enormously frustrating if I'm right? WDYT?
aardani
you should be able to get it from the param at sign in
like user profile and account
if ure using OAuth it should be profile and account
if ure using Database Provider, user should be present
this is accessible in the jwt() call back during sign in
Brown bearOP
Yes I'm using oauth, but as I say I don't want the information that's in the token (e.g. user) I want the token itself exactly as it came from the provider i.e. the raw JWT
aardani
i dont think the provider sends raw jwt, iirc thats not how oauth works
Brown bearOP
It sends an Auth code that the client exchanges for an access token (which is a jwt in Okta's case) - the access token is what I want
aardani
try console.logging profile or account in the jwt callback
maybe the jwt is already decoded there
and the information you needed might already be there
Brown bearOP
I guess I want decrypted (not stored in next's special format) but not decoded (parsed into fields) - I just want the raw access token from the provider so I can pass it to my backend
aardani
hmmmmm
Brown bearOP
It must be a really common request, I don't know what I'm missing
Surely lots of people have APIs not also written in Next.js that require an Authorization header / Bearer token
aardani
what auth provider are you using?
Brown bearOP
Okta
aardani
maybe just hit "https://${yourOktaDomain}/oauth2/default/v1/token" again after logged in and store that in Next-Auth's jwt? :v
Brown bearOP
Hmm I'd rather not have to bastardise the oauth standard to make it work when it really should be a standard feature 😅
aardani
but do try console logging { profile, account } ? maybe there is something there
Brown bearOP
Nothing that looks like the access token from the provider I'm afraid
aardani
because in this example the access_token seem to be available in account
dang
Brown bearOP
Hmm you know what let me take another look at that
token.accessToken doesn't sound like a field I've seen but Typescript Next Auth is a hard slog and clearly lots of things get hidden
aardani
yeah hence why i suggest console logging :v
TypeScript is a mess in Next-auth, that will come later though
Brown bearOP
Ok thanks, annoyingly I'd just shut down for the evening but will look at this in the morning!
aardani
No worries, lmk if you found something, its 5am here lol
@Brown bear token.accessToken doesn't sound like a field I've seen but Typescript Next Auth is a hard slog and clearly lots of things get hidden
aardani
No that is self-defined as new property, but do check for account.access_token
Brown bearOP
Nice! So I see it in my /api/auth/[...nextauth]/route.ts (appDir) in the JWT callback only, thanks for this tip

so even if next-auth won't give it to me I can grab it and put it in a cookie or storage or something here, thanks!