add next-auth fixes

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

@@ -15,9 +15,9 @@ export default async function LoginForm() {
           </div>
         </div>
         <form
-          action={async () => {
+          action={async (formData) => {
             'use server';
-            await signIn('credentials');
+            await signIn('credentials', Object.fromEntries(formData));
           }}
           className="space-y-3"
         >
@@ -38,6 +38,7 @@ export default async function LoginForm() {
                     className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                     id="email"
                     type="email"
+                    name="email"
                     placeholder="Enter your email address"
                   />
                   <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
@@ -55,6 +56,7 @@ export default async function LoginForm() {
                     className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
                     id="password"
                     type="password"
+                    name="password"
                     placeholder="Enter password"
                   />
                   <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />

dashboard/15-final/auth.ts

@@ -1,13 +1,13 @@
 import NextAuth from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
 import bcrypt from 'bcrypt';
-import { User } from '@/app/lib/definitions';
 import { sql } from '@vercel/postgres';
+import type { User } from '@/app/lib/definitions';
 
 async function getUser(email: string) {
   try {
-    const user = await sql`SELECT * from USERS where email=${email}`;
-    return user.rows[0] as User;
+    const user = await sql<User>`SELECT * from USERS where email=${email}`;
+    return user.rows[0];
   } catch (error) {
     console.error('Failed to fetch user:', error);
     throw new Error('Failed to fetch user.');
@@ -27,27 +27,32 @@ export const {
         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);
-
+        // @ts-expect-error TODO: Validate email type with zod
+        const user = await getUser(email);
         if (!user || !password) {
           console.log('Missing credentials');
           return null;
         }
 
+        // @ts-expect-error TODO: Validate password type with zod
         const passwordsMatch = await bcrypt.compare(password, user.password);
 
         if (!passwordsMatch) {
           console.log('Invalid credentials');
           return null;
         }
 
-        return user;
+        return { ...user, id: user.id.toString() };
       },
     }),
   ],
+  callbacks: {
+    authorized({ auth, request: { nextUrl } }) {
+      return !nextUrl.pathname.startsWith('/dashboard') || !!auth?.user;
+    },
+  },
   pages: {
     signIn: '/login',
   },

dashboard/15-final/middleware.ts

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

dashboard/15-final/package.json

@@ -18,7 +18,7 @@
     "bcrypt": "^5.1.1",
     "clsx": "^2.0.0",
     "next": "13.5.5-canary.4",
-    "next-auth": "0.0.0-manual.c8300b61",
+    "next-auth": "0.0.0-manual.dacbe24d",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",