Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Session with all null values on user with jwt, how does it work ?

See original GitHub issue

Your question I’m using JWT, the object return by useSession is always empty (it exists, but with all null values on the user object ex: { name: null, email: null, picture: null } even tho the debug logs everything correctly.

What are you trying to do I customized the callbacks to return the user, I expected it to this by default, it took me a while to realize how to to it

this is my code

import NextAuth, { InitOptions } from 'next-auth'
import Adapters from 'next-auth/adapters'
import Providers from 'next-auth/providers'
import { prismaClient } from '../../../../graphql/configs/prismaClient'

const options: any = {
  providers: [
    Providers.Facebook({
      clientId: process.env.FACEBOOK_CLIENT_ID,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
    }),
  ],
  database: process.env.DATABASE_URL,
  jwt: {
    encryption: true,
    // secret: process.env.AUTH_SECRET,
  },
  session: {
    jwt: true,
    updateAge: 1000 * 60 * 60 * 24,
  },
  secret: process.env.AUTH_SECRET,
  useSecureCookies: process.env.NODE_ENV === 'production',
  adapter: Adapters.Prisma.Adapter({ prisma: prismaClient }),
  debug: true,
 // these callbacks are what makes the user work as expected, otherwise it returns empty values
  callbacks: {
    session(session, payload) {
      if (payload.account) session.user = payload.account
      return session
    },
    jwt(token, account, user, userInfo) {
      if (userInfo) token.account = userInfo
      return token
    },
  },
}

export default (req, res) => {
  return NextAuth(req, res, options)
}

// _app.tsx
 <Provider session={pageProps.session} options={{ keepAlive: TEN_MINUTES, clientMaxAge: ONE_WEEK }}>
        <Component {...pageProps} />
   </Provider>

// index.tsx

function Home() {
  const { data, loading: queryLoading } = useMyQueryQuery({ ssr: true, fetchPolicy: 'cache-first' })
  const [session, sessionLoading] = useSession()
  return (
    <Layout>
      <Head>
        <title>Next.js × Nexus Todo App</title>
      </Head>
      {session && JSON.stringify(session)}
      {sessionLoading}
      <a href="/api/auth/signin">Sign in</a>
      <a href="/api/auth/signout">Sign out</a>
    </Layout>
  )
}

Feedback

[-] Found the documentation helpful // meh, kinda, the callbacks doc surely helped, but took me a while to realize I had to use them
Found documentation but was incomplete
[] Could not find relevant documentation
[] Found the example project helpful
Did not find the example project helpful // it didnt have callbacks, but worked fine appearently

Seems like a great library btw ! 😄, I probably just misunderstood something I suppose