fixed login and register page

prisma/schema.prisma

@@ -65,11 +65,12 @@ model Menu {
 }
 
 model User {
-  id       Int     @id @default(autoincrement())
+  id       Int      @id @default(autoincrement())
   name     String
-  email    String  @unique
+  email    String   @unique
   password String
-  Order    Order[]
+  isAdmin  Boolean
+  orders   Order[]
 }
 
 model Order {

src/app/(auth)/login/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+import React, { useRef } from "react";
+import Header from "@/components/Header";
+import Link from "next/link";
+import { signIn } from "next-auth/react";
+
+const Login = () => {
+  const email = useRef("");
+  const pass = useRef("");
+
+  const onSubmit = async () => {
+    const result = await signIn("credentials", {
+      email: email.current,
+      password: pass.current,
+      redirect: true,
+      callbackUrl: "/dashboard/user",
+    });
+  };
+
+  return (
+    <>
+      <Header />
+      <div className="w-5/6 lg:w-1/2 xl:w-1/3 mx-auto my-12 flex flex-col items-center font-medium">
+        <p className="text-5xl mb-12">Login</p>
+        <div className="container flex flex-col gap-8">
+          <div className="flex flex-col">
+            <label htmlFor="email">Email</label>
+            <input
+              name="email"
+              id="email"
+              className="border border-black h-10 px-2"
+              type="email"
+              required
+              onChange={(e) => (email.current = e.target.value)}
+            />
+          </div>
+          <div className="flex flex-col">
+            <label htmlFor="password">Password</label>
+            <input
+              name="password"
+              id="password"
+              className="border border-black h-10 px-2"
+              type="password"
+              required
+              onChange={(e) => (pass.current = e.target.value)}
+            />
+          </div>
+
+          <button
+            type="submit"
+            className="w-full h-12 mt-4 bg-rose-600 text-white hover:bg-rose-700"
+            onClick={onSubmit}
+          >
+            Login
+          </button>
+        </div>
+        <p className="mt-2 font-normal">
+          Not Registered?
+          <span>
+            <Link
+              href="/register"
+              passHref
+              className="text-blue-700 font-bold hover:text-blue-500"
+            >
+              &nbsp; Sign up
+            </Link>
+          </span>
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default Login;

src/app/(auth)/register/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+import Header from "@/components/Header";
+import Link from "next/link";
+import { signIn } from "next-auth/react";
+import { ChangeEvent, useState } from "react";
+
+export default function RegisterPage() {
+  let [loading, setLoading] = useState(false);
+  let [formValues, setFormValues] = useState({
+    name: "",
+    email: "",
+    password: "",
+  });
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/register", {
+        method: "POST",
+        body: JSON.stringify(formValues),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      setLoading(false);
+      if (!res.ok) {
+        alert((await res.json()).message);
+        return;
+      }
+
+      signIn(undefined, { callbackUrl: "/" });
+    } catch (error: any) {
+      setLoading(false);
+      console.error(error);
+      alert(error.message);
+    }
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setFormValues({ ...formValues, [name]: value });
+  };
+  return (
+    <>
+      <Header />
+      <div className="w-5/6 lg:w-1/2 xl:w-1/3 mx-auto my-12 text-center font-medium">
+        <h1 className="text-5xl mb-12">Create Account</h1>
+        <form
+          className="container flex flex-col gap-8 text-left items-center"
+          onSubmit={onSubmit}
+        >
+          <div className="flex flex-col w-full">
+            <label htmlFor="name">
+              Name<span className="text-rose-600">*</span>
+            </label>
+            <input
+              name="name"
+              id="name"
+              className="border border-black h-10 px-2"
+              type="text"
+              required
+              value={formValues.name}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="flex flex-col w-full">
+            <label htmlFor="email" className="font-medium">
+              Email
+            </label>
+            <input
+              name="email"
+              id="email"
+              className="border border-black h-10 px-2"
+              type="email"
+              required
+              value={formValues.email}
+              onChange={handleChange}
+            />
+          </div>
+          <div className="flex flex-col w-full">
+            <label htmlFor="password">
+              Password<span className="text-rose-600">*</span>
+            </label>
+            <input
+              name="password"
+              id="password"
+              className="border border-black h-10 px-2"
+              type="password"
+              minLength={8}
+              required
+              value={formValues.password}
+              onChange={handleChange}
+            />
+          </div>
+          <button
+            type="submit"
+            className="w-full h-12 mt-4 bg-rose-600 text-white hover:bg-rose-700"
+            disabled={loading}
+          >
+            {loading ? "Loading..." : "Register"}
+          </button>
+        </form>
+        <p className="mt-2 font-normal">
+          Already have an account?
+          <span>
+            <Link
+              href="/login"
+              passHref
+              className="text-blue-700 font-bold hover:text-blue-500"
+            >
+              Sign in
+            </Link>
+          </span>
+        </p>
+      </div>
+    </>
+  );
+}

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

@@ -3,3 +3,4 @@ import NextAuth from "next-auth";
 
 const handler = NextAuth(authOptions);
 export { handler as GET, handler as POST };
+

src/app/api/register/route.ts

@@ -8,6 +8,7 @@ export async function POST(req: Request) {
       name: string;
       email: string;
       password: string;
+      isAdmin: boolean;
     };
     const hashed_password = await hash(password, 12);
 
@@ -16,13 +17,15 @@ export async function POST(req: Request) {
         name,
         email: email.toLowerCase(),
         password: hashed_password,
+        isAdmin: false,
       },
     });
-
+      
     return NextResponse.json({
       user: {
         name: user.name,
         email: user.email,
+        isAdmin: user.isAdmin,
       },
     });
   } catch (error: any) {
@@ -34,4 +37,4 @@ export async function POST(req: Request) {
       { status: 500 }
     );
   }
-}
+}

src/lib/auth.ts

@@ -1,6 +1,6 @@
 import { prisma } from "@/lib/prisma";
 import { compare } from "bcrypt";
-import type { NextAuthOptions } from "next-auth";
+import type { NextAuthOptions, User } from "next-auth";
 import CredentialsProvider from "next-auth/providers/credentials";
 
 export const authOptions: NextAuthOptions = {
@@ -17,29 +17,30 @@ export const authOptions: NextAuthOptions = {
           placeholder: "[email protected]",
         },
         password: { label: "Password", type: "password" },
+
       },
-      async authorize(credentials) {
+      async authorize(credentials, req) {
         if (!credentials?.email || !credentials.password) {
           return null;
         }
-
+      
         const user = await prisma.user.findUnique({
           where: {
             email: credentials.email,
           },
         });
-
+      
         if (!user || !(await compare(credentials.password, user.password))) {
           return null;
         }
-
+      
         return {
           id: user.id,
           email: user.email,
           name: user.name,
           randomKey: "Hey cool",
-        };
-      },
+        } as unknown as User; // Cast the return value to the User type
+      }
     }),
   ],
   callbacks: {
@@ -67,4 +68,8 @@ export const authOptions: NextAuthOptions = {
       return token;
     },
   },
+  pages: {
+    signIn: "/login",
+    signOut: "/register",
+  }
 };