Session Callback Not Triggering in NextAuth Integration with tRPC

[wilsuriel03]

Hello everyone,

I'm currently experiencing an issue with my Next.js application where the session callback in NextAuth is not being triggered as expected when using tRPC. I have a monorepo setup with two apps: an e-commerce app and an admin panel for managing the e-commerce app. The problem seems to be isolated to the admin panel, and the session callback works correctly when logging in with the Google provider but not with credentials.

Project Setup:

• Monorepo: Yes
• Apps: E-commerce (nextjs) and Admin Panel (nextjs)
• Packages:
• @acme/auth: Handles authentication using NextAuth (separate configurations for admin and customers)
• @acme/api: Handles tRPC configuration and API routes
• @acme/db: Database interactions using Drizzle ORM
• @acme/utils: Utility functions

Problem Description:

The session callback is not being triggered when logging in with credentials, resulting in undefined session data being passed to tRPC context. However, when logging in with the Google provider, the session callback works correctly, and the session data is properly logged.

Logs:

Credentials Login Attempt:

Middleware - auth: null
>>> tRPC Request from nextjs-react by undefined
Query: select "id", "name", "email", "emailVerified", "password", "image", "userType", "role" from "users" where ("users"."email" = $1 and "users"."userType" = $2) limit $3 -- params: ["[email protected]", "admin", 1]
JWT callback - token: { ... }

Google Login Attempt:

Middleware - auth: null
Query: select "accounts"."userId", ... where ("accounts"."provider" = $1 and "accounts"."providerAccountId" = $2) -- params: ["google", "1234567890"]
Query: select "id", "name", "email", "emailVerified", "password", "image", "userType", "role" from "users" where "users"."email" = $1 -- params: ["[email protected]"]
JWT callback - token: { ... }
Session callback - token: { ... }
Session callback - session: { ... }
Middleware - auth: { user: { ... }, expires: '...' }

Code :

Sign-In Page Using Credentials (with tRPC):

"use client";

import type { z } from "zod";
import { useState } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";

import { Button } from "@acme/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  useForm,
} from "@acme/ui/form";
import { Input } from "@acme/ui/input";
import { SignInSchema } from "@acme/validators";

import FormError from "~/app/_components/forms/form-error";
import Icon from "~/app/_components/icon";
import { api } from "~/trpc/react";

export default function SignInForm() {
  const searchParams = useSearchParams();
  const email = searchParams.get("email") || "";

  const [showPassword, setShowPassword] = useState(false);

  const form = useForm({
    schema: SignInSchema,
    defaultValues: {
      email: email,
      password: "",
    },
  });

  const signIn = api.auth.adminSignIn.useMutation();

  const onSubmit = async (values: z.infer<typeof SignInSchema>) => {
    try {
      await signIn.mutateAsync(values);
    } catch (err) {
      console.log("Sign-In error:", err);
    }
  };

  return (
    <>
      <FormError message={signIn.error?.message} />

      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="flex flex-col gap-3"
        >
          <div className="flex flex-col flex-wrap gap-2">
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel
                    htmlFor="account_password"
                  >
                    Password
                  </FormLabel>
                  <FormControl>
                      <Input
                        {...field}
                        disabled={signIn.isPending}
                        type={showPassword ? "text" : "password"}
                        autoFocus
                      />
                  </FormControl>
                  <FormDescription className="text-white hover:underline">
                    <Link href={"/password-reset/new"}>Forgot password?</Link>
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button
              type="submit"
              disabled={signIn.isPending}
            >
              Sign in
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
}

Google Sign-In Page (without tRPC):

import { signIn } from "@acme/auth/admin";
import { Button } from "@acme/ui/button";

import Icon from "~/app/_components/icon";

export default function GoogleSignIn() {
  return (
              <form className="w-full">
                <Button
                  type="submit"
                  variant={"outline"}
                  formAction={async () => {
                    "use server";
                    await signIn("google", {
                      redirectTo: "/dashboard",
                    });
                  }}
                  className="h-auto min-h-8 w-full min-w-8 border-neutral-500 px-4 py-3 text-white"
                >
                  <Icon name="Google"  />
                  <span className="flex-1"> Sign in With Google </span>
                </Button>
              </form>
  );
}

NextAuth Configuration:

//packages/auth/src/configs/auth.admin.config

import type { NextAuthConfig } from "next-auth";
import { DrizzleAdapter } from "@auth/drizzle-adapter";
import Credentials from "next-auth/providers/credentials";
import Google from "next-auth/providers/google";
import { db, schema } from "@acme/db";
import { getUserById, validateCredentials } from "@acme/utils";
import { SignInWithUserTypeSchema } from "@acme/validators";

const { users, accounts, verificationTokens } = schema;

const adapter = DrizzleAdapter(db, {
  usersTable: users,
  accountsTable: accounts,
  verificationTokensTable: verificationTokens,
});

export const adminAuthConfig = {
  adapter,
  session: { strategy: "jwt" },
  providers: [
    Google({ allowDangerousEmailAccountLinking: true }),
    Credentials({
      async authorize(credentials) {
        if (!credentials) return null;
        const parsedCredentials = SignInWithUserTypeSchema.parse(credentials);
        return validateCredentials(parsedCredentials);
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
        token.role = user.role;
      }
      console.log("JWT callback - token:", token);
      return token;
    },
    async session({ session, token }) {
      console.log("Session callback - token:", token);  
      session.user.id = token.id;
      session.user.role = token.role;
      console.log("Session callback - session:", session); 
      return session;
    },
  },
} satisfies NextAuthConfig;

NextAuth export:

//packages/auth/src/index.admin.rsc.ts

import { cache } from "react";
import NextAuth from "next-auth";

import { adminAuthConfig } from "./configs/auth.admin.config";

export type { Session } from "next-auth";

const {
  handlers: { GET, POST },
  auth: defaultAuthAdmin,
  signIn,
  signOut,
} = NextAuth(adminAuthConfig);

/**
 * This is the main way to get session data for your RSCs.
 * This will de-duplicate all calls to next-auth's default `auth()` function and only call it once per request
 */
const auth = cache(defaultAuthAdmin);

export { GET, POST, auth, signIn, signOut };

//packages/auth/src/index.admin.ts

import NextAuth from "next-auth";

import { adminAuthConfig } from "./configs/auth.admin.config";

export type { Session } from "next-auth";
const {
  handlers: { GET, POST },
  auth,
  signIn,
  signOut,
} = NextAuth(adminAuthConfig);
export { GET, POST, auth, signIn, signOut };

Auth Package Export:

//packages/auth/package.json

"exports": {
    ".": {
      "react-server": "./src/index.rsc.ts",
      "default": "./src/index.ts"
    },
    "./admin": {
      "react-server": "./src/index.admin.rsc.ts",
      "default": "./src/index.admin.ts"
    },
    "./env": "./env.ts"
  },
  

Middleware Configuration:

//apps/admin-panel/src/middleware.ts

import { NextResponse } from "next/server";
import { auth } from "@acme/auth/admin";

export default auth(async (req) => {
  const { nextUrl, auth } = req;
  const isLoggedIn = !!auth;
  const userRole = auth?.user?.role;
  const pathname = nextUrl.pathname;
  const email = nextUrl.searchParams.get("email");

  console.log("Middleware - auth:", auth);  

  // middleware logic...

  return NextResponse.next();
});

export const config = {
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

API Route Handling:

//apps/admin-panel/app/api/trpc/[trpc]/route.ts

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter, createTRPCContext } from "@acme/api";
import { auth } from "@acme/auth/admin";

function setCorsHeaders(res: Response) {
  res.headers.set("Access-Control-Allow-Origin", "*");
  res.headers.set("Access-Control-Request-Method", "*");
  res.headers.set("Access-Control-Allow-Methods", "OPTIONS, GET, POST");
  res.headers.set("Access-Control-Allow-Headers", "*");
}

export function OPTIONS() {
  const response = new Response(null, {
    status: 204,
  });
  setCorsHeaders(response);
  return response;
}

const handler = auth(async (req) => {
  const response = await fetchRequestHandler({
    endpoint: "/api/trpc",
    router: appRouter,
    req,
    createContext: () =>
      createTRPCContext({
        session: req.auth,
        headers: req.headers,
      }),
    onError({ error, path }) {
      console.error(`>>> tRPC Error on '${path}'`, error);
    },
  });

  setCorsHeaders(response);
  return response;
});

export { handler as GET, handler as POST };

tRPC Context Creation:

//packages/api/src/trpc.ts

export const createTRPCContext = async (opts: {
  headers: Headers;
  session: Session | null;
}) => {
  const session = opts.session;
  const source = opts.headers.get("x-trpc-source") ?? "unknown";

  console.log(">>> tRPC Request from", source, "by", session?.user);

  return {
    session,
    db,
  };
};

tRPC authRouter:

//packages/api/src/router/auth.ts

import bcrypt from "bcryptjs";
import { AuthError } from "next-auth";
import { v4 as uuidv4 } from "uuid";
import type { TRPCRouterRecord } from "@trpc/server";
import { signIn as customerSignIn } from "@acme/auth";
import { signIn as adminSignIn } from "@acme/auth/admin";
import { eq, schema } from "@acme/db";
import { getUser, validateCredentials } from "@acme/utils";
import {
  SignInSchema,
} from "@acme/validators";

import { protectedProcedure, publicProcedure } from "../trpc";

export const authRouter = {
  customerSignIn: publicProcedure
    .input(SignInSchema)
    .mutation(async ({ ctx, input }) => {
      const { email, password } = input;

      try {
        const user = await validateCredentials({
          email,
          password,
          userType: "customer",
        });
        if (!user) throw new Error("Invalid email or password.");
        await customerSignIn("credentials", {
          email,
          password,
          userType: "customer",
          redirectTo: "/",
        });
      } catch (err) {
        if (err instanceof AuthError && err.type === "CredentialsSignin") {
          throw new Error("Invalid email or password.");
        }
        throw err;
      }
    }),

  adminSignIn: publicProcedure
    .input(SignInSchema)
    .mutation(async ({ ctx, input }) => {
      const { email, password } = input;

      try {
        const user = await validateCredentials({
          email,
          password,
          userType: "admin",
        });
        if (!user) throw new Error("Invalid email or password.");
        await adminSignIn("credentials", {
          email,
          password,
          userType: "admin",
          redirect: false,
        });
      } catch (err) {
        if (err instanceof AuthError && err.type === "CredentialsSignin") {
          throw new Error("Invalid email or password.");
        }
        throw err;
      }
    }),
  
  getSecretMessage: protectedProcedure.query(() => {
    // testing type validation of overridden next-auth Session in @acme/auth package
    return "you can see this secret message!";
  }),
} satisfies TRPCRouterRecord;

Help Needed:

I'm seeking assistance to understand why the session callback is not being triggered when using credentials and why the session data is not being correctly passed to tRPC context. Any insights or suggestions on what might be going wrong would be greatly appreciated.

Thank you!

[wilsuriel03]

@balazsorban44 @ThangHuuVu I am using the jwt session strategy but facing issues with triggering the session callback.