bump next and next-auth, bcrypt -> bcryptjs

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

@@ -1,21 +0,0 @@
-import { PowerIcon } from '@heroicons/react/24/outline';
-import { signOut } from '@/auth';
-
-export default async function LogOutButton() {
-  return (
-    <form
-      action={async () => {
-        'use server';
-        await signOut();
-      }}
-    >
-      <button
-        type="submit"
-        className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
-      >
-        <PowerIcon className="w-6" />
-        <div className="hidden md:block">Sign Out</div>
-      </button>
-    </form>
-  );
-}

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

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
-import LogOutButton from './log-out-button';
 import AcmeLogo from '@/app/ui/acme-logo';
+import { PowerIcon } from '@heroicons/react/24/outline';
+import { signOut } from '@/auth';
 
 export default function SideNav() {
   return (
@@ -17,7 +18,17 @@ export default function SideNav() {
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <LogOutButton />
+        <form
+          action={async () => {
+            'use server';
+            await signOut({ redirectTo: '/' });
+          }}
+        >
+          <button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
+            <PowerIcon className="w-6" />
+            <div className="hidden md:block">Sign Out</div>
+          </button>
+        </form>
       </div>
     </div>
   );

dashboard/15-final/app/ui/invoices/create-form.tsx

@@ -157,7 +157,7 @@ export default function Form({ customers }: { customers: CustomerField[] }) {
         >
           Cancel
         </Link>
-        <Button type="submit">Create Invoice</Button>
+        <Button>Create Invoice</Button>
       </div>
     </form>
   );

dashboard/15-final/app/ui/invoices/edit-form.tsx

@@ -167,7 +167,7 @@ export default function EditInvoiceForm({
         >
           Cancel
         </Link>
-        <Button type="submit">Edit Invoice</Button>
+        <Button>Edit Invoice</Button>
       </div>
     </form>
   );

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

@@ -17,7 +17,10 @@ export default async function LoginForm() {
         <form
           action={async (formData) => {
             'use server';
-            await signIn('credentials', Object.fromEntries(formData));
+            await signIn('credentials', {
+              ...Object.fromEntries(formData),
+              redirectTo: '/dashboard',
+            });
           }}
           className="space-y-3"
         >
@@ -64,7 +67,7 @@ export default async function LoginForm() {
               </div>
             </div>
           </div>
-          <Button className="w-full" type="submit">
+          <Button className="w-full">
             Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
           </Button>
         </form>

dashboard/15-final/auth.config.ts

@@ -0,0 +1,59 @@
+import NextAuth from 'next-auth';
+import Credentials from 'next-auth/providers/credentials';
+import bcrypt from 'bcryptjs';
+import { sql } from '@vercel/postgres';
+import type { User } from '@/app/lib/definitions';
+
+async function getUser(email: string) {
+  try {
+    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.');
+  }
+}
+
+export const {
+  handlers: { GET, POST },
+  auth,
+  signIn,
+  signOut,
+} = NextAuth({
+  providers: [
+    Credentials({
+      name: 'Sign-In with Credentials',
+      credentials: {
+        password: { label: 'Password', type: 'password' },
+        email: { label: 'Email', type: 'email' },
+      },
+      async authorize(credentials) {
+        const { email, password } = credentials ?? {};
+        // @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, id: user.id.toString() };
+      },
+    }),
+  ],
+  callbacks: {
+    authorized({ auth, request: { nextUrl } }) {
+      return !nextUrl.pathname.startsWith('/dashboard') || !!auth?.user;
+    },
+  },
+  pages: {
+    signIn: '/login',
+  },
+});

dashboard/15-final/auth.ts

@@ -1,6 +1,6 @@
 import NextAuth from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
-import bcrypt from 'bcrypt';
+import bcrypt from 'bcryptjs';
 import { sql } from '@vercel/postgres';
 import type { User } from '@/app/lib/definitions';
 

dashboard/15-final/next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

dashboard/15-final/package.json

@@ -15,10 +15,10 @@
     "@types/react-dom": "18.2.11",
     "@vercel/postgres": "^0.5.0",
     "autoprefixer": "10.4.16",
-    "bcrypt": "^5.1.1",
+    "bcryptjs": "^2.4.3",
     "clsx": "^2.0.0",
-    "next": "13.5.5-canary.4",
-    "next-auth": "0.0.0-manual.dacbe24d",
+    "next": "13.5.7-canary.23",
+    "next-auth": "5.0.0-beta.0",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -28,7 +28,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/bcrypt": "^5.0.0",
+    "@types/bcryptjs": "^2.4.5",
     "dotenv": "^16.3.1",
     "prettier": "^3.0.3"
   },

dashboard/15-final/scripts/seed.js

@@ -5,7 +5,7 @@ const {
   revenue,
   users,
 } = require('../app/lib/placeholder-data.js');
-const bcrypt = require('bcrypt');
+const bcrypt = require('bcryptjs');
 
 async function seedUsers() {
   try {