Add auth to dashboard using NextAuth

dashboard/15-final/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,6 @@
+import NextAuth from 'next-auth';
+import { authOptions } from '@/auth';
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

dashboard/15-final/app/login/page.tsx

@@ -1,6 +1,11 @@
 import LoginForm from '@/app/ui/login-form';
+import { authOptions } from '@/auth';
+import { getServerSession } from 'next-auth';
+import { redirect } from 'next/navigation';
 
-export default function Page() {
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+  if (session) redirect('/dashboard');
   return (
     <main>
       <LoginForm />

dashboard/15-final/app/ui/dashboard/log-out-button.tsx

@@ -0,0 +1,15 @@
+'use client';
+import { PowerIcon } from '@heroicons/react/24/outline';
+import { signOut } from 'next-auth/react';
+
+export default function LogOutButton() {
+  return (
+    <button
+      onClick={() => signOut()}
+      className="flex gap-2 rounded p-2 font-semibold hover:text-blue-600"
+    >
+      <PowerIcon className="w-6" />
+      <div className="hidden md:block">Sign Out</div>
+    </button>
+  );
+}

dashboard/15-final/app/ui/dashboard/sidenav.tsx

@@ -1,7 +1,7 @@
-import { PowerIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
+import LogOutButton from './log-out-button';
 
 export default function SideNav() {
   return (
@@ -18,13 +18,7 @@ export default function SideNav() {
         </Link>
         <NavLinks />
       </div>
-      <Link
-        href="/login"
-        className="flex gap-2 rounded p-2 font-semibold hover:text-blue-600"
-      >
-        <PowerIcon className="w-6" />
-        <div className="hidden md:block">Sign Out</div>
-      </Link>
+      <LogOutButton />
     </div>
   );
 }

dashboard/15-final/app/ui/login-form.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import Link from 'next/link';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
 import BackgroundBlur from '@/app/ui/background-blur';
 import React, { useState } from 'react';
-import Link from 'next/link';
 import Image from 'next/image';
 
 // This component contains basic logic for a React Form.
@@ -12,11 +14,30 @@ export default function LoginForm() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const [error, setError] = useState('');
+
+  const router = useRouter();
+
+  const handleSubmit = async (e: { preventDefault: () => void }) => {
     e.preventDefault();
-    console.log(`Email: ${email}, Password: ${password}`);
-  };
 
+    try {
+      const res = await signIn('credentials', {
+        email,
+        password,
+        redirect: false,
+      });
+
+      if (res?.error) {
+        setError('Invalid Credentials');
+        return;
+      }
+
+      router.replace('dashboard');
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
     <div className="relative mx-auto mt-40 p-4">
       <BackgroundBlur />
@@ -64,6 +85,11 @@ export default function LoginForm() {
               >
                 Log in
               </button>
+              {error && (
+                <div className="mt-2 w-fit rounded-md bg-red-500 px-3 py-1 text-sm text-white">
+                  {error}
+                </div>
+              )}
             </div>
           </form>
         </div>

dashboard/15-final/auth.ts

@@ -0,0 +1,49 @@
+import { NextAuthOptions } from 'next-auth';
+import CredentialsProvider from 'next-auth/providers/credentials';
+import bcrypt from 'bcrypt';
+import { User } from '@/app/lib/definitions';
+import { sql } from '@vercel/postgres';
+
+async function getUser(email: string) {
+  try {
+    const user = await sql`SELECT * from USERS where email=${email}`;
+    return user.rows[0] as User;
+  } catch (error) {
+    console.error('Failed to fetch user:', error);
+    throw new Error('Failed to fetch user.');
+  }
+}
+
+export const authOptions: NextAuthOptions = {
+  providers: [
+    CredentialsProvider({
+      name: 'Sign-In with Credentials',
+      credentials: {
+        password: { label: 'Password', type: 'password' },
+        email: { label: 'Email', type: 'email' },
+      },
+      // @ts-ignore
+      async authorize(credentials) {
+        const { email, password } = credentials ?? {};
+        const user = await getUser(email as string);
+
+        if (!user || !password) {
+          console.log('Missing credentials');
+          return null;
+        }
+
+        const passwordsMatch = await bcrypt.compare(password, user.password);
+
+        if (!passwordsMatch) {
+          console.log('Invalid credentials');
+          return null;
+        }
+
+        return user;
+      },
+    }),
+  ],
+  pages: {
+    signIn: '/login',
+  },
+};

dashboard/15-final/middleware.ts

@@ -0,0 +1,5 @@
+export { default } from 'next-auth/middleware';
+
+export const config = {
+  matcher: ['/dashboard/:path*'],
+};