added login

app/api/auth/[...nextauth]/route.ts

@@ -1,59 +1,75 @@
-// app/api/auth/[...nextauth]/route.ts
-import NextAuth from "next-auth"
+import NextAuth, { NextAuthOptions } from "next-auth"
 import GoogleProvider from "next-auth/providers/google"
+import CredentialsProvider from "next-auth/providers/credentials"
 import { PrismaAdapter } from "@next-auth/prisma-adapter"
 import { PrismaClient } from "@prisma/client"
+import bcrypt from "bcryptjs"
 
-const prisma = new PrismaClient();
+const prisma = new PrismaClient()
 
-const handler = NextAuth({
-  session: {
-    strategy: 'jwt'
-  },
+export const authOptions: NextAuthOptions = {
   adapter: PrismaAdapter(prisma),
   providers: [
     GoogleProvider({
       clientId: process.env.GOOGLE_CLIENT_ID!,
       clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
-      profile(profile) {
+    }),
+    CredentialsProvider({
+      name: 'Credentials',
+      credentials: {
+        email: { label: "Email", type: "text" },
+        password: { label: "Password", type: "password" }
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          return null
+        }
+
+        const user = await prisma.user.findUnique({
+          where: { email: credentials.email }
+        })
+         //@ts-ignore
+        if (!user || !user.password) {
+          return null
+        }
+        //@ts-ignore
+        const isPasswordValid = await bcrypt.compare(credentials.password, user.password)
+
+        if (!isPasswordValid) {
+          return null
+        }
+
         return {
-          id: profile.sub,
-          name: profile.name,
-          email: profile.email,
-          image: profile.picture
+          id: user.id,
+          email: user.email,
+          name: user.name,
         }
       }
-    }),
+    })
   ],
+  session: {
+    strategy: 'jwt'
+  },
+  pages: {
+    signIn: '/auth/signin',
+  },
   callbacks: {
-    async signIn({ account, user }) {
-      if (!user.email) {
-        return false; 
-      }
-      const existingUser = await prisma.user.findUnique({
-        where: {
-          email: user.email
-        }
-      });
-      if (!existingUser) {
-        await prisma.user.create({
-          data: {
-            email: user.email,
-            name: user.name,
-            image: user.image
-          }
-        });
+    async jwt({ token, user }) {
+      if (user) {
+        token.id = user.id
       }
-      return true;
+      return token
     },
     async session({ session, token }) {
-      console.log(token)
+      if (session.user) {
+        //@ts-ignore
+        session.user.id = token.id as string
+      }
       return session
     },
   },
-  pages: {
-    signIn: '/auth/signin',
-  },
-});
+}
+
+const handler = NextAuth(authOptions)
 
 export { handler as GET, handler as POST }

app/api/auth/signin/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
+
+export default function SignIn() {
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+  const { register, handleSubmit, formState: { errors } } = useForm()
+
+  const onSubmit = async (data: any) => {
+    const result = await signIn('credentials', {
+      email: data.email,
+      password: data.password,
+      redirect: false,
+    })
+
+    if (result?.error) {
+      setError(result.error)
+    } else {
+      router.push('/') 
+    }
+  }
+
+  return (
+    <Card className="w-[350px] mx-auto mt-10">
+      <CardHeader>
+        <CardTitle>Sign In</CardTitle>
+        <CardDescription>Enter your credentials to access your account</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" {...register('email', { required: 'Email is required' })} />
+              {errors.email && <span className="text-red-500">{errors.email.message as string}</span>}
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" {...register('password', { required: 'Password is required' })} />
+              {errors.password && <span className="text-red-500">{errors.password.message as string}</span>}
+            </div>
+          </div>
+          {error && <p className="text-red-500 mt-4">{error}</p>}
+          <Button className="w-full mt-4" type="submit">Sign In</Button>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <p className="text-sm text-center w-full">
+          {`Don't have an account? `}<a href="/auth/signup" className="text-blue-500 hover:underline">Sign Up</a>
+        </p>
+      </CardFooter>
+    </Card>
+  )
+}

app/auth/route.ts

@@ -0,0 +1,33 @@
+import { NextResponse } from 'next/server'
+import { PrismaClient } from '@prisma/client'
+import bcrypt from 'bcryptjs'
+
+const prisma = new PrismaClient()
+
+export async function POST(req: Request) {
+  try {
+    const { name, email, password } = await req.json()
+    const existingUser = await prisma.user.findUnique({
+      where: { email },
+    })
+
+    if (existingUser) {
+      return NextResponse.json({ message: 'User already exists' }, { status: 400 })
+    }
+
+    const hashedPassword = await bcrypt.hash(password, 10)
+
+    const user = await prisma.user.create({
+      data: {
+        name,
+        email,
+        password: hashedPassword,
+      },
+    })
+
+    return NextResponse.json({ message: 'User created successfully', user: { id: user.id, name: user.name, email: user.email } }, { status: 201 })
+  } catch (error) {
+    console.error('Error in signup:', error)
+    return NextResponse.json({ message: 'An error occurred during signup' }, { status: 500 })
+  }
+}

app/auth/signup/page.tsx

@@ -1,23 +1,79 @@
-// 'use client'
-// import React from 'react'
-// import { useRouter } from 'next/navigation'
-// import SignUp from '@/components/SignupBase'
+'use client'
 
-// const SignUppage = () => {
-//   const router  = useRouter()
-// //   if(GetUser()){
-// //    router.push("/home")
-// //     return(<div></div>)
-//   // }
-//   return (
-//   <div className='w-screen h-screen flex flex-col items-center justify-center'>
-//     <SignUp/>
-//   </div>
-//   )
-// }
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { signIn } from 'next-auth/react'
+import { useRouter } from 'next/navigation'
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
 
-// export default SignUppage
+export default function SignUp() {
+  const [error, setError] = useState<string | null>(null)
+  const router = useRouter()
+  const { register, handleSubmit, formState: { errors } } = useForm()
 
-export default function Testing(){
-  return <div>This is in Testing</div>
+  const onSubmit = async (data: any) => {
+    const response = await fetch('/api/auth/signup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+
+    const result = await response.json()
+
+    if (response.ok) {
+      const signInResult = await signIn('credentials', {
+        email: data.email,
+        password: data.password,
+        redirect: false,
+      })
+
+      if (signInResult?.error) {
+        setError(signInResult.error)
+      } else {
+        router.push('/dashboard') 
+      }
+    } else {
+      setError(result.message)
+    }
+  }
+
+  return (
+    <Card className="w-[350px] mx-auto mt-10">
+      <CardHeader>
+        <CardTitle>Sign Up</CardTitle>
+        <CardDescription>Create a new account</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div className="grid w-full items-center gap-4">
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" {...register('name', { required: 'Name is required' })} />
+              {errors.name && <span className="text-red-500">{errors.name.message as string}</span>}
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" {...register('email', { required: 'Email is required' })} />
+              {errors.email && <span className="text-red-500">{errors.email.message as string}</span>}
+            </div>
+            <div className="flex flex-col space-y-1.5">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" {...register('password', { required: 'Password is required' })} />
+              {errors.password && <span className="text-red-500">{errors.password.message as string}</span>}
+            </div>
+          </div>
+          {error && <p className="text-red-500 mt-4">{error}</p>}
+          <Button className="w-full mt-4" type="submit">Sign Up</Button>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <p className="text-sm text-center w-full">
+          Already have an account? <a href="/auth/signin" className="text-blue-500 hover:underline">Sign In</a>
+        </p>
+      </CardFooter>
+    </Card>
+  )
 }