Theo's Typesafe Cult•2y ago

Next Auth With username and password

Im trying to set up a simple username and password auth on a website for my portfolio. I have google auth working but I just want a [email protected] user that I can fill with dummy data to display. I tired playing around and following this tutorial https://www.youtube.com/watch?v=im8o328q6EI&t=361s to set it up to no avail. Not sure what im doing wrong auth.ts

 
export const authOptions: NextAuthOptions = {
  callbacks: {
    jwt: ({ token, user }) => {
      console.log("jwt callback user:", user);
      if (user) {
        token.id = user.id;
      }
      console.log("jwt callback token:", token);
      return token;
    },
    session: ({ session, user }) => {
      console.log("session user", { user, session });
      return {
        ...session,
        user: {
          ...session.user,
          id: user.id,
        },
      };
    },
  },
  providers: [
    CredentialsProvider({
      credentials: {
        email: { label: "Email", type: "email", placeholder: "[email protected]" },
        password: { label: "Password", type: "text" },
      },
      async authorize(credentials, req) {
        try {
          const user = await prisma.user.findUnique({
            where: { email: credentials?.email },
          });

          if (credentials?.password === user?.password) {
            console.log({ credentials, user });
            return user;
          } else {
            return null;
          }
        } catch (error) {
          return null;
        }
      },
    }),
  ],
  secret: "test",
  jwt: {
    secret: "test",
  },
};

 
export const authOptions: NextAuthOptions = {
  callbacks: {
    jwt: ({ token, user }) => {
      console.log("jwt callback user:", user);
      if (user) {
        token.id = user.id;
      }
      console.log("jwt callback token:", token);
      return token;
    },
    session: ({ session, user }) => {
      console.log("session user", { user, session });
      return {
        ...session,
        user: {
          ...session.user,
          id: user.id,
        },
      };
    },
  },
  providers: [
    CredentialsProvider({
      credentials: {
        email: { label: "Email", type: "email", placeholder: "[email protected]" },
        password: { label: "Password", type: "text" },
      },
      async authorize(credentials, req) {
        try {
          const user = await prisma.user.findUnique({
            where: { email: credentials?.email },
          });

          if (credentials?.password === user?.password) {
            console.log({ credentials, user });
            return user;
          } else {
            return null;
          }
        } catch (error) {
          return null;
        }
      },
    }),
  ],
  secret: "test",
  jwt: {
    secret: "test",
  },
};

From the logs I can see that the session callback never gets called when I sign in, but I can confirm that the jwt callback and the authorize functions are logging the correct data

Jonas Grøndahl

YouTube

Next Auth 4 - Credentials provider (username/password)

In this video I'll show how to setup username/email + password authentication for Next apps using the latest version of next auth. The official documentation on Next Auth covers it quite well but fails to show a complete working example. Next auth: https://next-auth.js.org/ Github: https://github.com/jonasgroendahl/yt-nextauth-credentials-provider

3 Replies

lijuanma1331•2y ago

Hi, im pretty new to this but ill try😀. Check the docs https://next-auth.js.org/providers/credentials the danger section.

Credentials | NextAuth.js

Overview

lijuanma1331•2y ago

I think this is the reason why you cant make it work.

Morraez•2y ago

For anyone who cares I solved the issue myself here: https://github.com/nextauthjs/next-auth/issues/3970#issuecomment-1046347097

GitHub

Credentials Provider Not Firing Session Callback · Issue #3970 · n...

Description 🐜 Hello, I'm having trouble with using Credentials Provider where it's not firing the session callback. I've logged the whole process from signin and output with logger func...

Gaming

Programming

Next Auth With username and password