Arvind-[login] PR

.env

@@ -1,2 +1 @@
-CLIENT_ID='1059907364986-bnk71fjcv7tq9bo65mmklser56ghgdkb.apps.googleusercontent.com'
-CLIENT_SECRET='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'
+DATABASE_URL='e'

app/auth/signin.jsx

@@ -0,0 +1,49 @@
+import { useSession } from "next-auth/react";
+import { signIn } from "next-auth/react";
+import { useState } from "react";
+
+const SignIn = (props) => {
+  const [userInfo, setUserInfo] = useState({ email: "", password: "" });
+  const { data: session, status } = useSession()
+  if (status === "authenticated") {
+    return <p>Signed in as {session.user.email}</p>
+  }
+  const handleSubmit = async (e) => {
+    // validate your userinfo
+    e.preventDefault();
+
+    const res = await signIn("credentials", {
+      email: userInfo.email,
+      password: userInfo.password, consolelog(session,status);
+      redirect: false,
+    });
+    console.log(session,status);
+    console.log(res);
+  };
+  return (
+    <div className="sign-in-form">
+      <form onSubmit={handleSubmit}>
+        <h1>Login</h1>
+        <input
+          value={userInfo.email}
+          onChange={({ target }) =>
+            setUserInfo({ ...userInfo, email: target.value })
+          }
+          type="email"
+          placeholder="[email protected]"
+        />
+        <input
+          value={userInfo.password}
+          onChange={({ target }) =>
+            setUserInfo({ ...userInfo, password: target.value })
+          }
+          type="password"
+          placeholder="********"
+        />
+        <input type="submit" value="Login" />
+      </form>
+    </div>
+  );
+};
+
+export default SignIn;

components/SideNavbar.js

@@ -27,6 +27,10 @@ function MobileNav({ open, setOpen }) {
                 <Link className="text-xl font-medium my-4 text-white" href="/login" onClick={() => setTimeout(() => { setOpen(!open) }, 100)}>
           Login
                 </Link>
+                <Link className="text-xl font-medium my-4 text-white" href="/generate" onClick={() => setTimeout(() => { setOpen(!open) }, 100)}>
+          signin
+                </Link>
+
                 <Link className="text-xl font-medium my-4 text-white" href="/generate" onClick={() => setTimeout(() => { setOpen(!open) }, 100)}>
           Generate
                 </Link>
@@ -61,15 +65,22 @@ export default function Navbar() {
           <NavLink to="/events">
                   Events
                     </NavLink>
-                    <NavLink to="/login">
-                  Login
-                    </NavLink>
+
                     <NavLink to="/generate">
                   Generate
                     </NavLink>
                     <NavLink to="/scan">
                   Scan
                     </NavLink>
+                    <NavLink to="/login">
+                  Login
+                    </NavLink>
+                    <NavLink to="/signin">
+
+                  Signin    
+                    </NavLink>
+
+
         </div>
       </div>
             <div className='hidden md:flex right-0 font-serif font-semibold text-white mt-12 mr-2'>Hi Lead!</div>

jsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react",
     "paths": {
       "@/*": ["./*"]
     }

package.json

@@ -17,6 +17,7 @@
     "autoprefixer": "10.4.14",
     "framer-motion": "^10.12.12",
     "next": "13.4.1",
+    "next-auth": "^4.22.1",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pages/api/auth/[...nextauthmod].js

@@ -0,0 +1,65 @@
+import bcrypt from "bcrypt"
+import NextAuth, { AuthOptions } from "next-auth"
+import CredentialsProvider from "next-auth/providers/credentials"
+import GithubProvider from "next-auth/providers/github"
+import GoogleProvider from "next-auth/providers/google"
+import { PrismaAdapter } from "@next-auth/prisma-adapter"
+
+import prisma from "@/app/libs/prismadb"
+
+export const authOptions = {
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    GithubProvider({
+      clientId: process.env.GITHUB_ID ,
+      clientSecret: process.env.GITHUB_SECRET 
+    }),
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID ,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET 
+    }),
+    CredentialsProvider({
+      name: 'credentials',
+      credentials: {
+        email: { label: 'email', type: 'text' },
+        password: { label: 'password', type: 'password' }
+      },
+      async authorize(credentials) {
+        if (!credentials?.email || !credentials?.password) {
+          throw new Error('Invalid credentials');
+        }
+
+        const user = await prisma.user.findUnique({
+          where: {
+            email: credentials.email
+          }
+        });
+
+        if (!user || !user?.hashedPassword) {
+          throw new Error('Invalid credentials');
+        }
+
+        const isCorrectPassword = await bcrypt.compare(
+          credentials.password,
+          user.hashedPassword
+        );
+
+        if (!isCorrectPassword) {
+          throw new Error('Invalid credentials');
+        }
+
+        return user;
+      }
+    })
+  ],
+  pages: {
+    signIn: '/',
+  },
+  debug: process.env.NODE_ENV === 'development',
+  session: {
+    strategy: "jwt",
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+}
+
+export default NextAuth(authOptions);