Next.js Discord

Discord Forum

Error while trying to use signIn() from "@/auth.ts"

Unanswered
Japanese flying squid posted this in #help-forum
Open in Discord
Japanese flying squidOP
Hi, I'm trying to use signIn() function provided by @/auth.ts in next-auth(now auth.js) but I'm unable to do so. I keep getting this error : 
 ⨯ Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
, this is my @/auth.ts: 
import NextAuth, { NextAuthConfig } from "next-auth";
import Credentials from "next-auth/providers/credentials";
import db from "./lib/prisma";
import { PrismaAdapter } from "@auth/prisma-adapter";
import bcrypt from "bcryptjs";
import { LoginSchema } from "./lib/schema";
import { ZodError } from "zod";

const CredentialsConfig = Credentials({
  credentials: {
    email: {
      label: "Email",
      type: "text",
      placeholder: "Your email",
    },
    password: {
      label: "Password",
      type: "password",
      placeholder: "Your password",
    },
  },
  name: "Credentials",
  type: "credentials",
  authorize: async (creds) => {
    try {
      let user = null;
      const { email, password } = await LoginSchema.parseAsync(creds);

      user = await db.user.findUnique({
        where: {
          email: email.toLowerCase(),
        },
      });

      if (!user) return null;

      const isMatch = await bcrypt.compare(password, user.password);

      if (!isMatch) return null;

      return user;
    } catch (err: unknown) {
      if (err instanceof ZodError) {
        return null;
      }
      console.log(`Authorization error: ${err}`);
      return null;
    }
  },
});

const authConfig = {
  providers: [CredentialsConfig],
  adapter: PrismaAdapter(db),
  pages: {
    signIn: "/login",
    signOut: "",
  },
  session: {
    strategy: "jwt",
  },
} satisfies NextAuthConfig;

export const { handlers, auth, signOut, signIn } = NextAuth(authConfig);
, I'm using the signIn function exported from @/auth.ts in server action file and using that server action function in my client component form.

5 Replies

@Japanese flying squid Hi, I'm trying to use signIn() function provided by `@/auth.ts` in next-auth(now auth.js) but I'm unable to do so. I keep getting this error : ⨯ Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported. , this is my `@/auth.ts`: import NextAuth, { NextAuthConfig } from "next-auth"; import Credentials from "next-auth/providers/credentials"; import db from "./lib/prisma"; import { PrismaAdapter } from "@auth/prisma-adapter"; import bcrypt from "bcryptjs"; import { LoginSchema } from "./lib/schema"; import { ZodError } from "zod"; const CredentialsConfig = Credentials({ credentials: { email: { label: "Email", type: "text", placeholder: "Your email", }, password: { label: "Password", type: "password", placeholder: "Your password", }, }, name: "Credentials", type: "credentials", authorize: async (creds) => { try { let user = null; const { email, password } = await LoginSchema.parseAsync(creds); user = await db.user.findUnique({ where: { email: email.toLowerCase(), }, }); if (!user) return null; const isMatch = await bcrypt.compare(password, user.password); if (!isMatch) return null; return user; } catch (err: unknown) { if (err instanceof ZodError) { return null; } console.log(`Authorization error: ${err}`); return null; } }, }); const authConfig = { providers: [CredentialsConfig], adapter: PrismaAdapter(db), pages: { signIn: "/login", signOut: "", }, session: { strategy: "jwt", }, } satisfies NextAuthConfig; export const { handlers, auth, signOut, signIn } = NextAuth(authConfig); , I'm using the signIn function exported from `@/auth.ts` in server action file and using that server action function in my client component form.
joulev
The code looks good. Could you share how you use the signIn() exported here?
Japanese flying squidOP
@joulev at @/actions/login.ts code : 
"use server";

import { signIn } from "@/auth";
import db from "@/lib/prisma";
import { LoginSchema } from "@/lib/schema";
import { z } from "zod";

export const login = async (values: z.infer<typeof LoginSchema>) => {
  try {
    const user = await db.user.findUnique({
      where: {
        email: values.email,
      },
    });

    if (!user)
      return {
        success: false,
        message: "User not found !",
        error: "CERROR",
      };

    if (!user.emailVerified)
      return {
        success: false,
        message: "Email not verified !",
        error: "VERROR",
      };

    await signIn("credentials", {
      email: values.email,
      password: values.password,
      redirect: false,
    });
  } catch (err: any) {
    return {
      success: false,
      message: err.message ? err.message : `Unknown server error !`,
      error: err,
    };
  }
};
Japanese flying squidOP
this is the entire error
@Japanese flying squid this is the entire error
joulev
https://authjs.dev/reference/core/errors#callbackrouteerror

for your case, it's the credentials provider, so either of these two has happened. check them.

* The authorize method threw an uncaught error: Check the provider’s authorize method.
* The signIn or jwt callback methods threw an uncaught error: Check the callback method implementations.