next-auth credential doesnt invoke the session callback, though google/github provider does

[anirbanchowdhury]

Question 💬

Both github provider and credential (via checking a Mysql db) works. .
As per documentation, Session is not automatically persisted out of the box when it comes to CredentialProvider which is all good.
However, the session callback doesnt get invoked when it comes to CredentialProvider i.e it still queries the database, obviously doesnt find the session and thus the redirect url thinks there is no session.
Using next-auth(4.1.2) with Prisma(3.9.0)
How do I stop the session database query for Credential but continue using it for google/other providers ?

[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import GithubProvider from "next-auth/providers/github"

import { PrismaAdapter } from "@next-auth/prisma-adapter"
import CredentialsProvider from "next-auth/providers/credentials"
import { PrismaClient } from "@prisma/client"
import { log } from "console"
// import AppleProvider from "next-auth/providers/apple"
// import EmailProvider from "next-auth/providers/email"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
const prisma = new PrismaClient({
  log: ['query', 'info', 'warn', 'error'],
}
)

const options = {
  adapter: PrismaAdapter(prisma),
  secret: "TEST-DEV",//process.env.SECRET,
  
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'Credentials',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // 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" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // You need to provide your own logic here that takes the credentials
        // submitted and returns either a object representing a user or value
        // that is false/null if the credentials are invalid.
        // e.g. return { id: 1, name: 'J Smith', email: '[email protected]' }
        // You can also use the `req` object to obtain additional parameters
        // (i.e., the request IP address)

        const prisma = new PrismaClient({
          log: [
            { level: 'warn', emit: 'event' },
            { level: 'info', emit: 'event' },
            { level: 'error', emit: 'event' },
          ],
        })
        prisma.$on('warn', (e) => {
          console.log(e)
        })

        prisma.$on('info', (e) => {
          console.log(e)
        })

        prisma.$on('error', (e) => {
          console.log(e)
        })

        //console.log(req)

        const result = await prisma.user_details.findFirst({
          select: {
            pwd: true,
            email_address: true,
          },
          where: {
            email_address: credentials.username,
            pwd: credentials.password,
          },
        })
        console.log(result)

        if (result) {

          //return credentials.username;
          return {
            id: 2,
            name: "John",
            email: credentials.username,
          };
        } else {
          return null;
        }

      }
    }),


  ],
  /*pages: {
  signIn: '/auth/signin',
  signOut: '/auth/signout',
  error: '/auth/error', // Error code passed in query string as ?error=
  verifyRequest: '/auth/verify-request', // (used for check email message)
  newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
}*/
  callbacks: {

    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    async session({ session, token, user }) {
      console.log("in session callback,", session, token, user)
      if (token) {
        session.id = token.id;
      }
      return session

    },
    async jwt({ token, user, account, profile, isNewUser }) {
      console.log("in jwt user =", user, account, profile, isNewUser)
      console.log(user)
      if (user) {
        token.id = user.id;
      }

      return token
    }

  },
  
  session: {
    jwt: true,
  },
  jwt: {
    secret: "test",
    encryption: true,
  },
};

export default (req, res) => NextAuth(req, res, options);

index.tsx

import Head from 'next/head'
import Image from 'next/image'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Results from '../components/Results'
import requests from "../utils/requests";
import {signIn,signOut,useSession} from "next-auth/react";

export default function Home({results}) {

  const { data: session } = useSession()
  console.log("session in index",session)  // comes as undefined 

_app.tsx

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

Google authentication logs

prisma:query SELECT `blitzbot`.`Account`.`id`, `blitzbot`.`Account`.`userId` FROM `blitzbot`.`Account` WHERE (`blitzbot`.`Account`.`provider` = ? AND `blitzbot`.`Account`.`providerAccountId` = ?) LIMIT ? OFFSET ?
prisma:query SELECT `blitzbot`.`User`.`id`, `blitzbot`.`User`.`name`, `blitzbot`.`User`.`email`, `blitzbot`.`User`.`emailVerified`, `blitzbot`.`User`.`image` FROM `blitzbot`.`User` WHERE `blitzbot`.`User`.`id` IN (?)
prisma:query SELECT `blitzbot`.`Account`.`id`, `blitzbot`.`Account`.`userId` FROM `blitzbot`.`Account` WHERE (`blitzbot`.`Account`.`provider` = ? AND `blitzbot`.`Account`.`providerAccountId` = ?) LIMIT ? OFFSET ?
prisma:query SELECT `blitzbot`.`User`.`id`, `blitzbot`.`User`.`name`, `blitzbot`.`User`.`email`, `blitzbot`.`User`.`emailVerified`, `blitzbot`.`User`.`image` FROM `blitzbot`.`User` WHERE `blitzbot`.`User`.`id` IN (?)
prisma:query BEGIN
prisma:query INSERT INTO `blitzbot`.`Session` (`id`,`sessionToken`,`userId`,`expires`) VALUES (?,?,?,?)
prisma:query SELECT `blitzbot`.`Session`.`id`, `blitzbot`.`Session`.`sessionToken`, `blitzbot`.`Session`.`userId`, `blitzbot`.`Session`.`expires` FROM `blitzbot`.`Session` WHERE `blitzbot`.`Session`.`id` = ? LIMIT ? OFFSET ?
prisma:query COMMIT
session in index undefined
prisma:query SELECT `blitzbot`.`Session`.`id`, `blitzbot`.`Session`.`sessionToken`, `blitzbot`.`Session`.`userId`, `blitzbot`.`Session`.`expires` FROM `blitzbot`.`Session` WHERE `blitzbot`.`Session`.`sessionToken` = ? LIMIT ? OFFSET ?
prisma:query SELECT `blitzbot`.`User`.`id`, `blitzbot`.`User`.`name`, `blitzbot`.`User`.`email`, `blitzbot`.`User`.`emailVerified`, `blitzbot`.`User`.`image` FROM `blitzbot`.`User` WHERE `blitzbot`.`User`.`id` IN (?)
in session callback, {
  user: {
    name: 'ABCD',
    email: '[email protected]',
    image: 'valid url'
  },
  expires: '2022-03-04T11:26:18.569Z'
} undefined {
  id: 'ckz42xf0a0006e8lzww6k7m4w',
  name: 'ABCD',
  email: '[email protected]',
  emailVerified: null,
  image: 'valid url'
}

Credential Auth logs

{
  timestamp: undefined,
  message: 'Starting a mysql pool with 9 connections.',
  target: undefined
}
{ pwd: 'abcd', email_address: '[email protected]' }
in jwt user = { id: 2, name: 'John', email: '[email protected]' } { providerAccountId: 2, type: 'credentials', provider: 'credentials' } undefined false
{ id: 2, name: 'John', email: '[email protected]' }
session in index undefined
prisma:info Starting a mysql pool with 9 connections.
prisma:query SELECT `blitzbot`.`Session`.`id`, `blitzbot`.`Session`.`sessionToken`, `blitzbot`.`Session`.`userId`, `blitzbot`.`Session`.`expires` FROM `blitzbot`.`Session` WHERE `blitzbot`.`Session`.`sessionToken` = ? LIMIT ? OFFSET ?

How to reproduce ☕️

[...nextauth].js

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import GithubProvider from "next-auth/providers/github"

import { PrismaAdapter } from "@next-auth/prisma-adapter"
import CredentialsProvider from "next-auth/providers/credentials"
import { PrismaClient } from "@prisma/client"
import { log } from "console"
// import AppleProvider from "next-auth/providers/apple"
// import EmailProvider from "next-auth/providers/email"

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
const prisma = new PrismaClient({
  log: ['query', 'info', 'warn', 'error'],
}
)

const options = {
  adapter: PrismaAdapter(prisma),
  secret: "TEST-DEV",//process.env.SECRET,
  
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    CredentialsProvider({
      // The name to display on the sign in form (e.g. 'Sign in with...')
      name: 'Credentials',
      // The credentials is used to generate a suitable form on the sign in page.
      // You can specify whatever fields you are expecting to be submitted.
      // 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" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        // You need to provide your own logic here that takes the credentials
        // submitted and returns either a object representing a user or value
        // that is false/null if the credentials are invalid.
        // e.g. return { id: 1, name: 'J Smith', email: '[email protected]' }
        // You can also use the `req` object to obtain additional parameters
        // (i.e., the request IP address)

        const prisma = new PrismaClient({
          log: [
            { level: 'warn', emit: 'event' },
            { level: 'info', emit: 'event' },
            { level: 'error', emit: 'event' },
          ],
        })
        prisma.$on('warn', (e) => {
          console.log(e)
        })

        prisma.$on('info', (e) => {
          console.log(e)
        })

        prisma.$on('error', (e) => {
          console.log(e)
        })

        //console.log(req)

        const result = await prisma.user_details.findFirst({
          select: {
            pwd: true,
            email_address: true,
          },
          where: {
            email_address: credentials.username,
            pwd: credentials.password,
          },
        })
        console.log(result)

        if (result) {

          //return credentials.username;
          return {
            id: 2,
            name: "John",
            email: credentials.username,
          };
        } else {
          return null;
        }

      }
    }),


  ],
  /*pages: {
  signIn: '/auth/signin',
  signOut: '/auth/signout',
  error: '/auth/error', // Error code passed in query string as ?error=
  verifyRequest: '/auth/verify-request', // (used for check email message)
  newUser: '/auth/new-user' // New users will be directed here on first sign in (leave the property out if not of interest)
}*/
  callbacks: {

    async redirect({ url, baseUrl }) {
      return baseUrl
    },
    async session({ session, token, user }) {
      console.log("in session callback,", session, token, user)
      if (token) {
        session.id = token.id;
      }
      return session

    },
    async jwt({ token, user, account, profile, isNewUser }) {
      console.log("in jwt user =", user, account, profile, isNewUser)
      console.log(user)
      if (user) {
        token.id = user.id;
      }

      return token
    }

  },
  
  session: {
    jwt: true,
  },
  jwt: {
    secret: "test",
    encryption: true,
  },
};

export default (req, res) => NextAuth(req, res, options);

index.tsx

import Head from 'next/head'
import Image from 'next/image'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Results from '../components/Results'
import requests from "../utils/requests";
import {signIn,signOut,useSession} from "next-auth/react";

export default function Home({results}) {

  const { data: session } = useSession()
  console.log("session in index",session)  // comes as undefined 

_app.tsx

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

### Contributing 🙌🏽

No, I am afraid I cannot help regarding this

[anirbanchowdhury]

Any ideas on this one ?

[bogdansoare]

also having this issue

[ThangHuuVu]

Since you're using next-auth v4, try to change the session configuration like the following:
As-is:

session: {
  jwt: true,
}

To-be:

session: {
  strategy: "jwt",
}

See upgrade guide.