fixed the backend issue signin

apps/X/app/lib/auth.ts

@@ -1,7 +1,6 @@
 import db from "@repo/db/client";
 import bcrypt from "bcrypt";
 import { JWT } from "next-auth/jwt";
-
 import CredentialsProvider from "next-auth/providers/credentials";
 import GithubProvider from "next-auth/providers/github";
 import GoogleProvider from "next-auth/providers/google";
@@ -59,7 +58,6 @@ export const authOptions = {
         if (!validatedUserInput) return null;
 
         const hashedPassword = await bcrypt.hash(credentials.password, 10);
-        console.log(hashedPassword);
 
         const existingUser = await db.user.findFirst({
           where: {
@@ -70,6 +68,8 @@ export const authOptions = {
 
         if (existingUser) {
           try {
+            console.log("This is old user");
+
             const passwordValidation = await bcrypt.compare(
               credentials.password,
               existingUser.password
@@ -89,6 +89,8 @@ export const authOptions = {
         }
 
         try {
+          console.log("Creating New User....");
+
           const user = await db.user.create({
             data: {
               username: credentials.username,

apps/X/src/components/ui/SigninRightCom.tsx

@@ -52,12 +52,6 @@ export const SigninRightCom = () => {
             <p className="px-2 text-slate-500">or</p>
             <hr className="w-72 h-0.5 my-4 bg-gray-200 border-0 rounded dark:bg-gray-700"></hr>
           </div>
-          {/* <Button
-            className="bg-twitterBlue hover:bg-blue-500 px-24 mt-0 rounded-2xl text-white"
-            onClick={handleCredentialsSignIn}
-          >
-            Create Account
-          </Button> */}
           <Dialog>
             <DialogTrigger className="bg-twitterBlue hover:bg-blue-500 py-1 px-24 mt-0 rounded-2xl text-white">
               Create Account
@@ -77,12 +71,7 @@ export const SigninRightCom = () => {
             <span className="text-twitterBlue"> Cookie Use.</span>
           </p>
           <div className="mt-12 font-semibold">Already have an account?</div>
-          {/* <Button
-            variant={"outline"}
-            className="mt-3 px-28 rounded-2xl text-twitterBlue"
-          >
-            Sign In
-          </Button> */}
+
           <Dialog>
             <DialogTrigger className=" border border-slate-500 py-1 px-24 mt-1 rounded-2xl text-twitterBlue font-semibold hover:bg-slate-900 ">
               Sign In

apps/X/src/components/ui/UserCredentials.tsx

@@ -1,12 +1,41 @@
+"use client";
 import { signIn } from "next-auth/react";
+import { useState } from "react";
 import { Button } from "./button";
 import { Input } from "./index";
 import { X_logo } from "./X_logo";
 
 export const UserCredentials = () => {
-  const handleCredentialsSignIn = () => {
-    signIn("credentials");
+  const [formData, setFormData] = useState({
+    username: "",
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const handelFormChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
   };
+
+  const handelCredentialSignin = async () => {
+    console.log("Reaching here");
+    try {
+      console.log("Reaching here");
+
+      await signIn("credentials", {
+        username: formData.username,
+        email: formData.email,
+        name: formData.name,
+        password: formData.password,
+      });
+    } catch (error) {
+      console.log(error, "Error with Credentials");
+    }
+  };
+
   return (
     <div>
       <div className="">
@@ -20,26 +49,38 @@ export const UserCredentials = () => {
             type="text"
             placeholder="Username"
             className="m-4 focus:border-blue-500"
+            value={formData.username}
+            onChange={handelFormChange}
+            name="username"
           />
           <Input
             type="text"
             placeholder="Name"
             className="m-4 focus:border-blue-500"
+            value={formData.name}
+            onChange={handelFormChange}
+            name="name"
           />
           <Input
             type="text"
             placeholder="Email"
             className="m-4 focus:border-blue-500"
+            value={formData.email}
+            onChange={handelFormChange}
+            name="email"
           />
           <Input
-            type="passowrd"
+            type="password"
             placeholder="Password"
             className="m-4 focus:border-blue-500"
+            value={formData.password}
+            onChange={handelFormChange}
+            name="password"
           />
         </div>
         <Button
           className="w-full ml-4 rounded-2xl font-bold text-twitterBlue"
-          onClick={handleCredentialsSignIn}
+          onClick={handelCredentialSignin}
         >
           Create Account
         </Button>