Session Callback Not Triggering in NextAuth Integration with tRPC #1142

wilsuriel03 · 2024-08-08T19:47:00Z

wilsuriel03
Aug 8, 2024

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 · 2024-08-08T19:48:01Z

wilsuriel03
Aug 8, 2024
Author

@juliusmarminge 🙏

4 replies

juliusmarminge Aug 8, 2024
Maintainer

Put all those files into a runnable reproduction repo and I can take a look when I have time.

wilsuriel03 Aug 9, 2024
Author

@juliusmarminge ,

I've created a runnable reproduction repo based on my application. You can find it here: Nextauth-tRPC-MonoRepo.

Steps to Reproduce the Issue:

Connect a Postgres DB:

You'll need to connect the project to a Postgres database. I used Neon for my setup.

Generate the Tables:

Once connected, you'll need to generate the necessary tables in the database. The schema for the tables is already set up in the repo.

Seed the Database:

After the tables are generated, you can run the seed command found inside the db package to insert the founder user. This user will be used to test the sign-in process.

Reproduce the Issue:

Try signing in with the founder user's credentials (email and password). You should notice that the logs indicate the session isn't being correctly handled, and the session callback isn't triggered.

Google Sign-In Test:

After testing with credentials, sign out and try signing in with the Google provider. Here, you should see that the session works correctly, with successful redirection and session logs.

Additional Request:

Beyond just figuring out the issue, I would greatly appreciate any advice on improving the setup. If you notice anything that could be better structured or if tRPC might not be the best tool for handling authentication in this context, I'm open to suggestions and help.

Thank you again for your time and assistance!

noxify Aug 10, 2024

Sounds like this: nextauthjs/next-auth#3970

Maybe it helps to set the strategy to jwt for the credentials provider?

wilsuriel03 Aug 10, 2024
Author

@noxify, im using the jwt session, but still seems like the session callback is not firing.

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;

wilsuriel03 · 2024-08-10T05:59:45Z

wilsuriel03
Aug 10, 2024
Author

@juliusmarminge ,

I wanted to share another discovery I made. When I added the redirectTo option inside the adminSignIn mutation, I encountered an error, but the logs showed the correct headers, including the necessary cookies. This leads me to believe that tRPC might be blocking or interfering with how the cookies are being set.

 Middleware - auth: null
│  ○ Compiling /api/trpc/[trpc] ...
│  ✓ Compiled /api/trpc/[trpc] in 2.3s (1096 modules)
│ >>> tRPC Request from admin-panel 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]
│ 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]
│ Query: select "id", "name", "email", "emailVerified", "password", "image", "userType", "role" from "users" where "u
│ sers"."id" = $1 limit $2 -- params: ["8a3195a0-3cb2-048e-a613-412345539d782", 1]
│ JWT callback - token: {
│   name: 'Test Accountl',
│   email: '[email protected]',
│   picture: null,
│   sub: '8a3195a0-3cb2-048e-a613-412345539d782',
│   role: 'admin'
│ }
│ >>> tRPC Error on 'auth.adminSignIn' Error: NEXT_REDIRECT
│     at getRedirectError (webpack-internal:///(rsc)/../../node_modules/next/dist/client/components/redirect.js:49:19
│ )
│     ... 8 lines matching cause stack trace ...
│     at async eval (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-import/http/
│ resolveResponse.mjs:359:45) {
│   code: 'INTERNAL_SERVER_ERROR',
│   name: 'TRPCError',
│   [cause]: Error: NEXT_REDIRECT
│       at getRedirectError (webpack-internal:///(rsc)/../../node_modules/next/dist/client/components/redirect.js:49:
│ 19)
│       at redirect (webpack-internal:///(rsc)/../../node_modules/next/dist/client/components/redirect.js:60:11)
│       at signIn (webpack-internal:///(rsc)/../../node_modules/next-auth/lib/actions.js:59:76)
│       at async eval (webpack-internal:///(rsc)/../../packages/api/src/router/auth.ts:56:13)
│       at async resolveMiddleware (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-n
│ ot-import/procedureBuilder.mjs:110:30)
│       at async callRecursive (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-i
│ mport/procedureBuilder.mjs:160:32)
│       at async callRecursive (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-i
│ mport/procedureBuilder.mjs:160:32)
│       at async procedure (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-impor
│ t/procedureBuilder.mjs:190:24)
│       at async eval (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-import/htt
│ p/resolveResponse.mjs:207:30)
│       at async eval (webpack-internal:///(rsc)/../../node_modules/@trpc/server/dist/unstable-core-do-not-import/htt
│ p/resolveResponse.mjs:359:45) {
│     digest: 'NEXT_REDIRECT;replace;http://localhost:3000/dashboard;307;',
│     mutableCookies: f {
│       _parsed: [Map],
│       _headers: Headers {
│         'set-cookie': 'authjs.callback-url=http%3A%2F%2Flocalhost%3A3000%2Fdashboard; Path=/; HttpOnly; SameSite=la
│ x, authjs.csrf-token=94b93310960146614352345231e16d3d24abdef2b89665a2d44a93ad35462d459d%7Cca2644451dfdfe84fd38d431de9
│ 4df44119df5df43bc7876af48c019885ffce5; Path=/, authjs.session-token=eyJhbGciOiJkaXIiLCJlbSDFSfdsSDFSQ0JDLUhTNTEyIiw
│ ia2lkIjoicHhfZVVOSUdvWnNBeEFsTUxtSmNjZjNWWVdkcFhzZ2cwOFdRVTBHN3UzM0tvem5vS1Q2asdfasdasdfasdfaafdahSRE
│ pfMFo2aUEifQ..W-7nOie__RAZ1kbagblw4g.cR7U5n8epiQPETinH3T-xtaag7WzRJ4u_8cZAw02oWR28L1VQ2Sg_zD8sYf-UyNH7enbqILGg9iqwY
│ S9pJSLZ6LyjEdh3VtsX5YOxlGFkc5vbrMGvcmLMlUwEJZ0QaX518oWxdmXMH5d1AmsS9NYagYrctRiPyjpcm3smVZwGJbaLb2cSXLi2qJIs0xQQk9Ci
│ AssSZ6ukKhtMHv7kMmr-hhMVeSiQUspA2dLnGVo92wd0RZRgcT7sNtthownvL7wHKoXC3PRIBZJFyRd4h0paUxF-lVPTJmwtWk0Uvgv_ts.19F_aU0x
│ TlVPwvHXBr2fKS-JrSk1v3LqCCKFqaEopTA; Path=/; Expires=Sun, 08 Sep 2024 23:18:14 GMT; HttpOnly; SameSite=lax'
│       }
│     }
│   }
│ }
│  POST /api/trpc/auth.adminSignIn?batch=1 200 in 3603ms

Additionally, I tried printing the response.header inside [trpc]/route.ts like this:

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

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);
    },
  });

  console.log("Response header:", response.headers);
  setCorsHeaders(response);
  return response;
});

export { handler as GET, handler as POST };

The headers don’t include the set-cookie property, which is likely why the session isn’t being set correctly.

Since we can't do any redirects inside tRPC, I moved the redirect logic to the client, but I just wanted to share these findings with you. Let me know if you have any thoughts or if there's something specific you'd like me to try next.

1 reply

wilsuriel03 Aug 10, 2024
Author

I have come across these two issues as well, although I am uncertain if they are related to the same problem. You can find them here: /trpc/discussions/4800 and /trpc/discussions/4792

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Session Callback Not Triggering in NextAuth Integration with tRPC #1142

{{title}}

Replies: 2 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Session Callback Not Triggering in NextAuth Integration with tRPC #1142

wilsuriel03 Aug 8, 2024

Project Setup:

Problem Description:

Code :

Help Needed:

Replies: 2 comments · 5 replies

wilsuriel03 Aug 8, 2024 Author

juliusmarminge Aug 8, 2024 Maintainer

wilsuriel03 Aug 9, 2024 Author

Steps to Reproduce the Issue:

Additional Request:

noxify Aug 10, 2024

wilsuriel03 Aug 10, 2024 Author

wilsuriel03 Aug 10, 2024 Author

wilsuriel03 Aug 10, 2024 Author

wilsuriel03
Aug 8, 2024

Replies: 2 comments 5 replies

wilsuriel03
Aug 8, 2024
Author

juliusmarminge Aug 8, 2024
Maintainer

wilsuriel03 Aug 9, 2024
Author

wilsuriel03 Aug 10, 2024
Author

wilsuriel03
Aug 10, 2024
Author

wilsuriel03 Aug 10, 2024
Author