Session/User augmentation not working

[krinklesaurus]

Question 💬

Hi,
I tried to follow https://next-auth.js.org/getting-started/typescript and https://next-auth.js.org/getting-started/example#extensibility but augmenting the user with custom properties is not working for me. It seems like my app is not even recognizing my augmented type since making breaking changes to types/next-auth.d.ts does not make any difference at all.

Here's what I have:

types/next-auth.d.ts

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 {
    user: {
      /** The user's postal address. */
      id: string
      username: string
    } & DefaultSession["user"]
  }
}

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

import CredentialsProvider from "next-auth/providers/credentials"
import NextAuth from "next-auth"

export const authOptions = { 
  callbacks: {
    session({ session, token, user }) {
      return session // The return type will match the one returned in `useSession()`
    },
  },    
  // Configure one or more authentication providers
  providers: [
    CredentialsProvider({
        // The name to display on the sign in form (e.g. "Sign in with...")
        name: "Credentials",
        // `credentials` is used to generate a form on the sign in page.
        // You can specify which fields should be submitted, by adding keys to the `credentials` object.
        // e.g. domain, username, password, 2FA token, etc.
        // You can pass any HTML attribute to the <input> tag through the object.
        credentials: {
            username: { 
                label: "Username", 
                type: "text", 
                placeholder: "" 
            },
            password: { 
                label: "Password", 
                type: "password" 
            }
        },        
        async authorize(credentials, req) {
            const user = {
                id: "e86daa69-1851-44d9-aa17-6802b7e389c7", 
                username: "blubb", 
                password: "blubb",
                name: "Lordius Blubb",
                email: "[email protected]" 
            }

            console.log("returning "+JSON.stringify(user))              
            if (user) {
                // Any object returned will be saved in `user` property of the JWT
                return user
            } else {
                // If you return null then an error will be displayed advising the user to check their details.
                return null

            // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
            }
        }
    })    
    // ...add more providers here
  ],
}

export default NextAuth(authOptions)

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/next-auth.d.ts"],
  "exclude": ["node_modules"]
}

./pages/_app.tsx

import * as React from 'react';

import { CacheProvider, EmotionCache } from '@emotion/react';

import { AppProps } from 'next/app';
import Copyright from '../src/Copyright';
import CssBaseline from '@mui/material/CssBaseline';
import Head from 'next/head';
import NavBar from '../src/NavBar';
import { Session } from 'next-auth';
import { SessionProvider } from "next-auth/react"
import { ThemeProvider } from '@mui/material/styles';
import createEmotionCache from '../src/createEmotionCache';
import theme from '../src/theme';

const clientSideEmotionCache = createEmotionCache();

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache;
  session?: Session;
}

export default function MyApp(props : MyAppProps) {
  
  const pageProps = props;
  const emotionCache = clientSideEmotionCache
  const Component = props.Component
  const session = props.session

  return (
    <CacheProvider value={emotionCache}>
      <Head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <SessionProvider session={session}>
        <NavBar />
        <Component {...pageProps} />
        <Copyright />
        </SessionProvider>
      </ThemeProvider>
    </CacheProvider>
  );
}

Output of authorize is

    returning {"id":"e86daa69-1851-44d9-aa17-6802b7e389c7","username":"blubb","password":"blubb","name":"Lordius Blubb","email":"[email protected]"}

but output of

export async function getServerSideProps(context) {
    const session = await getServerSession(context.req, context.res, authOptions)
    console.log("getServerSideProps session: "+JSON.stringify(session))
  
    return { props: {} }
  }

is just

getServerSideProps session: {"user":{"name":"Lordius Blubb","email":"[email protected]"},"expires":"2023-04-20T04:52:26.628Z"}

How to reproduce ☕️

see above

Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[arnekolja]

Same here. I've been trying to debug this for hours and hours …

[krinklesaurus]

here's a sample repo illustrating the issue: https://github.com/krinklesaurus/next-auth-test

@lluia @balazsorban44

[codinesh]

In facing same issue, type is not recognised by typescript in server components.

However new property appended to session is available in useSession on client components. But it's not available on getServerSession on server components

[balazsorban44]

This is unrelated to TypeScript. Check out the docs:

https://next-auth.js.org/getting-started/example#extensibility
https://next-auth.js.org/configuration/callbacks
https://next-auth.js.org/configuration/nextjs#getserversession

[krinklesaurus]

@balazsorban44 I've been reading the docs for days....could you be more specific please? Just a RTFM is not really helpful 😞

[arnekolja]

I agree with @krinklesaurus. I've read the docs and the issues over here for days, but whenever it's getting close to a solution, it just says RTFM. It's an endless loop.

[balazsorban44]

Modifying declaration files/types has nothing to do with the runtime values, this is by the nature of TypeScript.

I linked to the documentation that explains how you can extend the session via the callbacks, in this case, jwt and session is necessary as shown in the linked documentation.

The following links explicitly explain how to make an id available.
https://next-auth.js.org/configuration/callbacks#jwt-callback
https://next-auth.js.org/configuration/callbacks#session-callback

There is also https://next-auth.js.org/providers/credentials which I forgot to link, mentioning that the authorize callback's value is saved in the JWT.

We do not expose id by default, as mentioned in the docs above.

Hope this helps.

[krinklesaurus]

Thank you.

I do have the CredentialsProvider authorize() call in my example though: https://github.com/krinklesaurus/next-auth-test/blob/main/pages/api/auth/%5B...nextauth%5D.js#L19-L30

The CredentialsProvider docs say

// Any object returned will be saved in user property of the JWT

so my assumption was/is that I just need to augment the Session/User type to have my custom properties available but this is not the case.

After adding the jwt/session callback, I still dont have the custom properties available in either of the callbacks. Illustrated in this PR: krinklesaurus/next-auth-test#1 The output is just

jwt callback
token: {"name":"Lordius Zwackelbart","email":"[email protected]","sub":"123","id":"some-id","iat":1679500778,"exp":1682092778,"jti":"063644f3-794a-4d28-b4fa-0c61bc031b66"}
account: undefined
profile: undefined
session callback
session: {"user":{"name":"Lordius Zwackelbart","email":"[email protected]"},"expires":"2023-04-21T15:59:39.466Z"}
token: {"name":"Lordius Zwackelbart","email":"[email protected]","sub":"123","id":"some-id","iat":1679500778,"exp":1682092778,"jti":"063644f3-794a-4d28-b4fa-0c61bc031b66"}
user: undefined

My understanding is that the user parameter in the callbacks should have my custom properties so I can write them into the jwt/session

[krinklesaurus]

@balazsorban44 @lluia friendly ping :-)

[balazsorban44]

Please refrain from pinging, unless you decide to sponsor the project, then feel free to reach out in a DM and I can sort the problem out together with you.

so my assumption was/is that I just need to augment the Session/User type to have my custom properties available but this is not the case.

As mentioned before, TypeScript types does not modify runtime behavior. This has nothing to do with NextAuth.js though, I recommend checking out the TypeScript documentation to learn more about its goals. You might have a wrong understanding of what TypeScript is. (which is fine 💚, just letting you know because the misunderstanding seems to originate from this)

user should be populated, you can refer to the source code here:

next-auth/packages/next-auth/src/core/routes/callback.ts

Line 325 in bb8d826

user = await provider.authorize(credentials, {

and here:

next-auth/packages/next-auth/src/core/routes/callback.ts

Line 392 in bb8d826

user,

Remenebr, it's only available on the first call as explained under https://next-auth.js.org/configuration/callbacks#jwt-callback

Looks like your PR didn't check if user is available so it gets overridden by subsequent jwt invocations.

This issue most likely comes from misinterpreting the docs/misunderstanding the goals of TypeScript.

If you have any actionable feedback on how we can improve the docs, I'm open to it.

[krinklesaurus]

ok, gonna check over the next couple of days sometime. Thank you, appreciate the support ❤️

[krinklesaurus]

Ok I got it finally working (and I admit I feel a little stupid).

In my jwt callback method I had arguments

https://github.com/krinklesaurus/next-auth-test/blob/bc03bcd5db483bce64a36e26f9208bb0bff2338e/pages/api/auth/%5B...nextauth%5D.js#L14

which were wrapped in {}. So a JS object with properties token, account, and profile. Coming from Java, I naturally expected the 2nd parameter to be the user and just did not see the {}. I thought account is the user but with a different parameter name here. That's the stupid part.

The callback had the user object under property user though, so I had to change this to

https://github.com/krinklesaurus/next-auth-test/blob/19614f75fc39d1d7c1d587bdc81f23e673a7426b/pages/api/auth/%5B...nextauth%5D.js#L22

What confused me here was that the code snippet from the documentation just has

jwt({ token, account, profile })

but the docs clearly says

The arguments user, account, profile and isNewUser are only passed the first time this callback is called on a new session, after the user signs in. In subsequent calls, only token will be available.

IMO it would be less confusing is the snippet would just have all possible properties, similar to the session callback documentation which lists both user AND token.

My proposal would be this v4...krinklesaurus:next-auth:patch-2

Thanks again for helping me out here 😄

[Frikki]

This really helped!

[BenSeymourODB]

Commenting because I ran into these exact same compiler errors (using Auth.js, aka next-auth v5 beta), and the fix here did not work for me.

What finally did work was realizing that some example / Copilot output I blindly accepted introduced the satisfies AuthConfig directive at the end of my authConfig object declaration. What I needed was to delete that directive and specify the object's type like this:

export const authConfig: NextAuthConfig = { ... }

Once I did that, suddenly my type augmentation was recognized with no issues.