Theo's Typesafe Cult•2y ago

Nextauth Credentials provider

I setup up the Github provider and added the Credentials provider to login with an email and password. The Github provider works fine, but now I tried to add the Credentials provider with jwt, but I can't make it work. Currently I get this error if I try to sign in:

[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error Cannot read property 'id' of undefined {

[next-auth][error][JWT_SESSION_ERROR]
https://next-auth.js.org/errors#jwt_session_error Cannot read property 'id' of undefined {

Currently I am signin it doing this in my form:

  const onSubmit = useCallback(async (data: Login) => {
    await signIn('credentials', { ...data, callbackUrl: '/dashboard' })
  }, [])

  const onSubmit = useCallback(async (data: Login) => {
    await signIn('credentials', { ...data, callbackUrl: '/dashboard' })
  }, [])

5 Replies

utdev•2y ago

My [...nextauth].ts looks like this:

export const authOptions: NextAuthOptions = {
  session: {
    strategy: 'jwt',
  },
  secret: env.JWT_SECRET,
  jwt: {
    secret: env.JWT_SECRET,
    maxAge: 15 * 24 * 30 * 60, // 15 days
  },
  pages: {
    signIn: "/sign-in",
    newUser: "/sign-up",
  },
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) {
        token.id = user.id;
        token.email = user.email;
      }
      return token;
    },
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GitHubProvider({
      clientId: env.GITHUB_ID,
      clientSecret: env.GITHUB_SECRET
    }),
    CredentialsProvider({
      name: "Credentials",
      // credentials provider logic for postgreSQL auth
      credentials: {
        email: { label: "Email", type: "email", placeholder: "Email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const creds = await loginSchema.parseAsync(credentials);

        const user = await prisma.user.findFirst({
          where: {
            email: creds.email,
          },
        });

        if (!user) {
          throw new Error("Invalid email or password");
        }

        const isValidPassword = await verify(user.password as string, creds.password);

        if (!isValidPassword) {
          throw new Error("Invalid email or password");
        }

        console.log("auth credentials", user)

        return {
          id: user.id,
          email: user.email,
        };
      }
    })
  ],
};

export default NextAuth(authOptions);

export const authOptions: NextAuthOptions = {
  session: {
    strategy: 'jwt',
  },
  secret: env.JWT_SECRET,
  jwt: {
    secret: env.JWT_SECRET,
    maxAge: 15 * 24 * 30 * 60, // 15 days
  },
  pages: {
    signIn: "/sign-in",
    newUser: "/sign-up",
  },
  callbacks: {
    jwt: async ({ token, user }) => {
      if (user) {
        token.id = user.id;
        token.email = user.email;
      }
      return token;
    },
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GitHubProvider({
      clientId: env.GITHUB_ID,
      clientSecret: env.GITHUB_SECRET
    }),
    CredentialsProvider({
      name: "Credentials",
      // credentials provider logic for postgreSQL auth
      credentials: {
        email: { label: "Email", type: "email", placeholder: "Email" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials) {
        const creds = await loginSchema.parseAsync(credentials);

        const user = await prisma.user.findFirst({
          where: {
            email: creds.email,
          },
        });

        if (!user) {
          throw new Error("Invalid email or password");
        }

        const isValidPassword = await verify(user.password as string, creds.password);

        if (!isValidPassword) {
          throw new Error("Invalid email or password");
        }

        console.log("auth credentials", user)

        return {
          id: user.id,
          email: user.email,
        };
      }
    })
  ],
};

export default NextAuth(authOptions);

Unknown User•2y ago

Message Not Public

utdev•2y ago

I was able to login with credentials but after I login I get redirected here: http://localhost:3000/sign-in?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fdashboard Basically removed the session callback, also it seems that the github provider still works if I remove dashboard from the matcher it works, seems like the middleware does not properly work: This redirects but I can view the page also not being logged in

export { default } from "next-auth/middleware"

export const config = { matcher: ["/", "/me", "/files"] }

export { default } from "next-auth/middleware"

export const config = { matcher: ["/", "/me", "/files"] }

If I add dashboard like this, I get this strange redirect url http://localhost:3000/sign-in?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fdashboard

export const config = { matcher: ["/dashboard", "/me", "/files"] }

export const config = { matcher: ["/dashboard", "/me", "/files"] }

Unknown User•2y ago

Message Not Public

utdev•2y ago

Works now I think

Gaming

Programming

Nextauth Credentials provider