fix: credential auth

apps/nextjs/package.json

@@ -25,6 +25,7 @@
     "@trpc/next": "^10.40.0",
     "@trpc/react-query": "^10.40.0",
     "@trpc/server": "^10.40.0",
+    "argon2": "^0.31.2",
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "emoji-picker-react": "^4.5.7",

apps/nextjs/src/app/_components/credential-auth.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signIn } from "next-auth/react";
+import type { SubmitHandler } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
+import { toast } from "react-toastify";
+import * as z from "zod";
+
+import Button from "./button";
+import Field from "./form/Field";
+
+/* Local constants & types
+============================================================================= */
+export type FormData = z.infer<typeof schemaValidation>;
+
+const schemaValidation = z.object({
+  email: z.string(),
+  password: z.string(),
+});
+
+const CredentialAuth = () => {
+  const router = useRouter();
+  const methods = useForm<FormData>({
+    resolver: zodResolver(schemaValidation),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit: SubmitHandler<FormData> = async (data: FormData) => {
+    try {
+      const response = await signIn("credentials", {
+        ...data,
+        redirect: false,
+      });
+
+      console.log({ response });
+      if (!response?.error) {
+        router.push("/workspaces");
+        router.refresh();
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Invalid email or password");
+    }
+  };
+
+  return (
+    <form
+      method="post"
+      className="flex w-full flex-col gap-4"
+      onSubmit={methods.handleSubmit(onSubmit)}
+    >
+      <FormProvider {...methods}>
+        <Field label="Email:" name="email" type="email" />
+        <Field label="Password:" name="password" type="password" />
+
+        <Button type="submit" variant="secondary">
+          Sign In
+        </Button>
+      </FormProvider>
+    </form>
+  );
+};
+
+export default CredentialAuth;

apps/nextjs/src/app/page.tsx

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
 import { auth } from "@acme/auth";
 
 import { AuthShowcase } from "./_components/auth-showcase";
+import CredentialAuth from "./_components/credential-auth";
 import Heading from "./_components/heading";
 import { Meteors } from "./_components/meteors";
 import routes from "./_lib/routes";
@@ -27,6 +28,8 @@ export default async function HomePage() {
           with 2day.report!
         </p>
 
+        <CredentialAuth />
+
         <p
           className="my-6 flex items-center overflow-hidden text-center text-xs uppercase before:relative 
            before:right-2 before:inline-block before:h-[1px] before:w-1/2 

packages/api/src/router/user.ts

@@ -26,6 +26,11 @@ export const userRouter = createTRPCRouter({
     .query(({ ctx, input }) => {
       return ctx.prisma.user.findFirst({ where: { id: input.id } });
     }),
+  byEmail: protectedProcedure
+    .input(z.object({ email: z.string().min(1) }))
+    .query(({ ctx, input }) => {
+      return ctx.prisma.user.findFirst({ where: { email: input.email } });
+    }),
   create: publicProcedure
     .input(
       z.object({

packages/auth/index.ts

@@ -1,7 +1,9 @@
+import Credentials from "@auth/core/providers/credentials";
 import Github from "@auth/core/providers/github";
 import Google from "@auth/core/providers/google";
 import type { DefaultSession } from "@auth/core/types";
 import { PrismaAdapter } from "@auth/prisma-adapter";
+import { verify } from "argon2";
 import NextAuth from "next-auth";
 
 import { prisma } from "@acme/db";
@@ -22,6 +24,25 @@ declare module "next-auth" {
   }
 }
 
+// Function to exclude user password returned from prisma
+// const exclude = (user, keys) => {
+//   for (let key of keys) {
+//     delete user[key];
+//   }
+//   return user;
+// };
+
+const validatePassword = async (
+  plainPassword: string,
+  hashedPassword?: string | null,
+) => {
+  if (!hashedPassword) {
+    return false;
+  }
+
+  return await verify(hashedPassword, plainPassword);
+};
+
 export const {
   handlers: { GET, POST },
   auth,
@@ -42,15 +63,130 @@ export const {
       clientSecret: env.GITHUB_CLIENT_SECRET,
       allowDangerousEmailAccountLinking: true,
     }),
-  ],
-  callbacks: {
-    session: ({ session, user }) => ({
-      ...session,
-      user: {
-        ...session.user,
-        id: user.id,
+    Credentials({
+      name: "Credentials",
+      credentials: {
+        email: {
+          label: "Email: ",
+          type: "text",
+        },
+        password: {
+          label: "Password: ",
+          type: "password",
+        },
       },
+
+      async authorize(credentials) {
+        const { email, password } = credentials as {
+          email: string;
+          password: string;
+        };
+
+        const user = await prisma.user.findFirst({
+          where: {
+            email: {
+              equals: email,
+              mode: "insensitive",
+            },
+          },
+        });
+
+        const isValidPassword = await validatePassword(
+          password,
+          user?.password,
+        );
+
+        if (!user || !isValidPassword) {
+          throw new Error("Invalid email or password");
+        }
+
+        // TODO: exclude password field
+        return user;
+      },
+
+      // This is where you need to retrieve user data
+      // to verify with credentials
+      //   await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      //   if (
+      //     credentials.email === user.email &&
+      //     credentials.password === user.password
+      //   ) {
+      //     return user;
+      //   }
+
+      //   return null;
+      // },
     }),
+  ],
+  callbacks: {
+    jwt({ token, user, session }) {
+      console.log(
+        "jwt-------------------------------------------------------",
+        session,
+        token,
+        user,
+      );
+
+      // if (trigger === "update" && session?.name) {
+      //   token.name = session.name;
+      // }
+
+      if (user) {
+        return {
+          ...token,
+          id: user.id,
+          email: user.email,
+        };
+      }
+
+      return token;
+    },
+    // async signIn({ user, account, profile, email, credentials }) {
+    //   if (credentials) {
+    //     return true;
+    //   }
+
+    //   console.log("email", email);
+    //   console.log("profile", profile);
+    //   console.log("account", account);
+    //   console.log("user", user);
+
+    //   const dbUser = await prisma.user.upsert({
+    //     where: { email: user.email! },
+    //     update: {
+    //       name: user.name!,
+    //       image: user.image,
+    //     },
+    //     create: {
+    //       name: user.name!,
+    //       email: user.email!,
+    //       image: user.image,
+    //       password: user.name!,
+    //     },
+    //   });
+    //   // add the userId to the session object
+    //   // user.role = dbUser.role;
+    //   user.id = dbUser.id;
+
+    //   return true;
+    // },
+    session: ({ session, token, user }) => {
+      console.log(
+        "session-------------------------------------------------------",
+        session,
+        token,
+        user,
+      );
+      return {
+        ...session,
+        user: {
+          ...session.user,
+          id: token.id,
+          name: token.name,
+        },
+      };
+    },
 
     // @TODO - if you wanna have auth on the edge
     // jwt: ({ token, profile }) => {