auth

2026-06-23 12:45:51 +00:00 · 2023-09-20 09:59:34 -05:00
parent 2897b290d3
commit c51ac1dd61
9 changed files with 492 additions and 75 deletions
--- a/dashboard/15-final/.env
+++ b/dashboard/15-final/.env
@@ -1,3 +1,7 @@
+GITHUB_SECRET_ID="5f7808e2598546bc7cd9f955853622ac1ca8bb9a"
+GITHUB_CLIENT_ID="28f99c4bf5597685d9da"
+NEXTAUTH_URL="http://localhost:3000"
+NEXTAUTH_SECRET=7XMu1K3gXGmKaVKW02Lo4Z8Vi2kkcFfpQUmt2yHMgFg=
 POSTGRES_URL="postgres://default:IQA2FonHJi9d@ep-square-union-29037633-pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb"
 POSTGRES_PRISMA_URL="postgres://default:IQA2FonHJi9d@ep-square-union-29037633-pooler.us-east-1.postgres.vercel-storage.com:5432/verceldb?pgbouncer=true&connect_timeout=15"
 POSTGRES_URL_NON_POOLING="postgres://default:IQA2FonHJi9d@ep-square-union-29037633.us-east-1.postgres.vercel-storage.com:5432/verceldb"
--- a/dashboard/15-final/app/api/auth/[...nextauth]/route.ts
+++ b/dashboard/15-final/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,46 @@
+import NextAuth from 'next-auth/next';
+import CredentialsProvider from 'next-auth/providers/credentials';
+// import bcrypt from 'bcryptjs';
+import { fetchUser } from '../../../lib/data';
+
+export const authOptions = {
+  providers: [
+    CredentialsProvider({
+      name: 'credentials',
+      credentials: {},
+
+      async authorize(credentials) {
+        const { email, password } = credentials;
+
+        try {
+          const user = await fetchUser(email);
+
+          if (!user) {
+            return null;
+          }
+
+          // const passwordsMatch = await bcrypt.compare(password, user.password);
+
+          // if (!passwordsMatch) {
+          //   return null;
+          // }
+
+          return user;
+        } catch (error) {
+          console.log('Error: ', error);
+        }
+      },
+    }),
+  ],
+  session: {
+    strategy: 'jwt',
+  },
+  secret: process.env.NEXTAUTH_SECRET,
+  pages: {
+    signIn: '/',
+  },
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };
--- a/dashboard/15-final/app/lib/data.ts
+++ b/dashboard/15-final/app/lib/data.ts
@@ -1,6 +1,15 @@
 import { sql } from '@vercel/postgres';
 import { formatCurrency } from './utils';
-import { Revenue, LatestInvoice } from './definitions';
+import { Revenue, LatestInvoice, User } from './definitions';
+
+export async function fetchUser(email: string) {
+  try {
+    return await sql`SELECT * from USERS where email=${email}`;
+  } catch (error) {
+    console.error('Failed to fetch user:', error);
+    throw new Error('Failed to fetch user.');
+  }
+}

 export async function fetchRevenue(): Promise<Revenue[]> {
  try {
--- a/dashboard/15-final/app/login/page.tsx
+++ b/dashboard/15-final/app/login/page.tsx
@@ -1,6 +1,13 @@
 import LoginForm from '@/app/ui/login-form';
+import { getServerSession } from 'next-auth/next';
+import { redirect } from 'next/navigation';
+import { authOptions } from '@/app/api/auth/[...nextauth]/route';

-export default function Page() {
+export default async function Page() {
+  // Get user session token
+  const session = await getServerSession(authOptions);
+  if (session) redirect('/dashboard');
+  // session = null || { user: { name, email, image } }
  return (
    <main>
      <LoginForm />
--- a/dashboard/15-final/app/ui/login-form.jsx
+++ b/dashboard/15-final/app/ui/login-form.jsx
@@ -0,0 +1,148 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+
+export default function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const router = useRouter();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    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="grid h-screen place-items-center">
+      <div className="rounded-lg border-t-4 border-green-400 p-5 shadow-lg">
+        <h1 className="my-4 text-xl font-bold">Login</h1>
+
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            onChange={(e) => setEmail(e.target.value)}
+            type="text"
+            placeholder="Email"
+          />
+          <input
+            onChange={(e) => setPassword(e.target.value)}
+            type="password"
+            placeholder="Password"
+          />
+          <button className="cursor-pointer bg-green-600 px-6 py-2 font-bold text-white">
+            Login
+          </button>
+          {error && (
+            <div className="mt-2 w-fit rounded-md bg-red-500 px-3 py-1 text-sm text-white">
+              {error}
+            </div>
+          )}
+
+          <Link className="mt-3 text-right text-sm" href={'/register'}>
+            Don't have an account? <span className="underline">Register</span>
+          </Link>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// 'use client';
+
+// import BackgroundBlur from '@/app/ui/background-blur';
+// import React, { useState } from 'react';
+// import Link from 'next/link';
+// import Image from 'next/image';
+// import { signIn } from 'next-auth/react';
+
+// // This component contains basic logic for a React Form.
+// // We'll be updating it in Chapter 8 - Adding Authentication.
+
+// export default function LoginForm() {
+//   const [email, setEmail] = useState('');
+//   const [password, setPassword] = useState('');
+
+//   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+//     e.preventDefault();
+//     console.log(`Email: ${email}, Password: ${password}`);
+//   };
+
+//   return (
+//     <div className="relative mx-auto mt-40 p-4">
+//       <BackgroundBlur />
+
+//       <div className="mx-auto flex w-full flex-col items-center space-y-2 rounded-xl border bg-white px-4 py-6 shadow-sm sm:max-w-sm sm:space-y-4 sm:px-8 sm:py-12">
+//         <Link href="/">
+//           <Image width={40} height={40} src="/logo.png" alt="Next.js Logo" />
+//         </Link>
+//         <div className="w-full">
+//           <button
+//             onClick={() => signIn('github', { callbackUrl: '/dashboard' })}
+//           >
+//             Sign in with Github
+//           </button>
+//           <form onSubmit={handleSubmit}>
+//             <div>
+//               <label
+//                 className="block text-sm font-medium leading-8 text-gray-900"
+//                 htmlFor="email"
+//               >
+//                 Email
+//               </label>
+//               <input
+//                 className="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm"
+//                 id="email"
+//                 type="email"
+//                 value={email}
+//                 onChange={(e) => setEmail(e.target.value)}
+//               />
+//             </div>
+//             <div className="mt-4">
+//               <label
+//                 className="block text-sm font-medium leading-8 text-gray-900"
+//                 htmlFor="password"
+//               >
+//                 Password
+//               </label>
+//               <input
+//                 className="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm"
+//                 id="password"
+//                 type="password"
+//                 value={password}
+//                 onChange={(e) => setPassword(e.target.value)}
+//               />
+//             </div>
+//             <div className="mt-8">
+//               <button
+//                 className="w-full rounded-md bg-black py-2 text-center text-sm font-semibold text-white transition-colors hover:bg-gray-800"
+//                 type="submit"
+//               >
+//                 Log in
+//               </button>
+//             </div>
+//           </form>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }
--- a/dashboard/15-final/app/ui/login-form.tsx
+++ b/dashboard/15-final/app/ui/login-form.tsx
@@ -1,73 +0,0 @@
-'use client';
-
-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.
-// We'll be updating it in Chapter 8 - Adding Authentication.
-
-export default function LoginForm() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    console.log(`Email: ${email}, Password: ${password}`);
-  };
-
-  return (
-    <div className="relative mx-auto mt-40 p-4">
-      <BackgroundBlur />
-
-      <div className="mx-auto flex w-full flex-col items-center space-y-2 rounded-xl border bg-white px-4 py-6 shadow-sm sm:max-w-sm sm:space-y-4 sm:px-8 sm:py-12">
-        <Link href="/">
-          <Image width={40} height={40} src="/logo.png" alt="Next.js Logo" />
-        </Link>
-        <div className="w-full">
-          <form onSubmit={handleSubmit}>
-            <div>
-              <label
-                className="block text-sm font-medium leading-8 text-gray-900"
-                htmlFor="email"
-              >
-                Email
-              </label>
-              <input
-                className="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm"
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-            <div className="mt-4">
-              <label
-                className="block text-sm font-medium leading-8 text-gray-900"
-                htmlFor="password"
-              >
-                Password
-              </label>
-              <input
-                className="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:text-sm"
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-            <div className="mt-8">
-              <button
-                className="w-full rounded-md bg-black py-2 text-center text-sm font-semibold text-white transition-colors hover:bg-gray-800"
-                type="submit"
-              >
-                Log in
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/dashboard/15-final/middleware.ts
+++ b/dashboard/15-final/middleware.ts
@@ -0,0 +1,3 @@
+export { default } from 'next-auth/middleware';
+
+export const config = { matcher: ['/dashboard'] };
--- a/dashboard/15-final/package-lock.json
+++ b/dashboard/15-final/package-lock.json
@@ -15,8 +15,10 @@
        "@types/react-dom": "18.2.7",
        "@vercel/postgres": "^0.4.1",
        "autoprefixer": "10.4.15",
+        "bcryptjs": "^2.4.3",
        "clsx": "^2.0.0",
        "next": "13.4.19",
+        "next-auth": "^4.23.1",
        "postcss": "8.4.28",
        "react": "18.2.0",
        "react-dom": "18.2.0",
@@ -41,6 +43,17 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@babel/runtime": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
    "node_modules/@heroicons/react": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
@@ -272,6 +285,14 @@
        "node": ">= 8"
      }
    },
+    "node_modules/@panva/hkdf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.1.1.tgz",
+      "integrity": "sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
    "node_modules/@swc/helpers": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
@@ -411,6 +432,11 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
+    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -583,6 +609,14 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -817,6 +851,14 @@
        "jiti": "bin/jiti.js"
      }
    },
+    "node_modules/jose": {
+      "version": "4.14.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.14.6.tgz",
+      "integrity": "sha512-EqJPEUlZD0/CSUMubKtMaYUOtWe91tZXTWMJZoKSbLk+KtdhNdcvppH8lA9XwVu2V4Ailvsj0GBZJ2ZwDjfesQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -846,6 +888,17 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -958,6 +1011,33 @@
        }
      }
    },
+    "node_modules/next-auth": {
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.23.1.tgz",
+      "integrity": "sha512-mL083z8KgRtlrIV6CDca2H1kduWJuK/3pTS0Fe2og15KOm4v2kkLGdSDfc2g+019aEBrJUT0pPW2Xx42ImN1WA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.5.0",
+        "jose": "^4.11.4",
+        "oauth": "^0.9.15",
+        "openid-client": "^5.4.0",
+        "preact": "^10.6.3",
+        "preact-render-to-string": "^5.1.19",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "next": "^12.2.5 || ^13",
+        "nodemailer": "^6.6.5",
+        "react": "^17.0.2 || ^18",
+        "react-dom": "^17.0.2 || ^18"
+      },
+      "peerDependenciesMeta": {
+        "nodemailer": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/next/node_modules/postcss": {
      "version": "8.4.14",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
@@ -1012,6 +1092,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="
+    },
    "node_modules/object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1028,6 +1113,14 @@
        "node": ">= 6"
      }
    },
+    "node_modules/oidc-token-hash": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
+      "integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw==",
+      "engines": {
+        "node": "^10.13.0 || >=12.0.0"
+      }
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1036,6 +1129,28 @@
        "wrappy": "1"
      }
    },
+    "node_modules/openid-client": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.5.0.tgz",
+      "integrity": "sha512-Y7Xl8BgsrkzWLHkVDYuroM67hi96xITyEDSkmWaGUiNX6CkcXC3XyQGdv5aWZ6dukVKBFVQCADi9gCavOmU14w==",
+      "dependencies": {
+        "jose": "^4.14.4",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.2.0",
+        "oidc-token-hash": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/openid-client/node_modules/object-hash": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+      "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -1268,6 +1383,31 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/preact": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz",
+      "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
+    "node_modules/preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "dependencies": {
+        "pretty-format": "^3.8.0"
+      },
+      "peerDependencies": {
+        "preact": ">=10"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1329,6 +1469,11 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
    "node_modules/resolve": {
      "version": "1.22.4",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -1607,6 +1752,14 @@
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -1652,6 +1805,11 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
    "node_modules/yaml": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
@@ -1675,6 +1833,14 @@
      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
    },
+    "@babel/runtime": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
+      "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
+      "requires": {
+        "regenerator-runtime": "^0.14.0"
+      }
+    },
    "@heroicons/react": {
      "version": "2.0.18",
      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
@@ -1805,6 +1971,11 @@
        "fastq": "^1.6.0"
      }
    },
+    "@panva/hkdf": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.1.1.tgz",
+      "integrity": "sha512-dhPeilub1NuIG0X5Kvhh9lH4iW3ZsHlnzwgwbOlgwQ2wG1IqFzsgHqmKPk3WzsdWAeaxKJxgM0+W433RmN45GA=="
+    },
    "@swc/helpers": {
      "version": "0.5.1",
      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz",
@@ -1912,6 +2083,11 @@
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
    },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ=="
+    },
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2016,6 +2192,11 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
    },
+    "cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw=="
+    },
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2190,6 +2371,11 @@
      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
      "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w=="
    },
+    "jose": {
+      "version": "4.14.6",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-4.14.6.tgz",
+      "integrity": "sha512-EqJPEUlZD0/CSUMubKtMaYUOtWe91tZXTWMJZoKSbLk+KtdhNdcvppH8lA9XwVu2V4Ailvsj0GBZJ2ZwDjfesQ=="
+    },
    "js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2213,6 +2399,14 @@
        "js-tokens": "^3.0.0 || ^4.0.0"
      }
    },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
    "merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2291,6 +2485,22 @@
        }
      }
    },
+    "next-auth": {
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.23.1.tgz",
+      "integrity": "sha512-mL083z8KgRtlrIV6CDca2H1kduWJuK/3pTS0Fe2og15KOm4v2kkLGdSDfc2g+019aEBrJUT0pPW2Xx42ImN1WA==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@panva/hkdf": "^1.0.2",
+        "cookie": "^0.5.0",
+        "jose": "^4.11.4",
+        "oauth": "^0.9.15",
+        "openid-client": "^5.4.0",
+        "preact": "^10.6.3",
+        "preact-render-to-string": "^5.1.19",
+        "uuid": "^8.3.2"
+      }
+    },
    "node-gyp-build": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.6.1.tgz",
@@ -2311,6 +2521,11 @@
      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
    },
+    "oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA=="
+    },
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2321,6 +2536,11 @@
      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
    },
+    "oidc-token-hash": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.3.tgz",
+      "integrity": "sha512-IF4PcGgzAr6XXSff26Sk/+P4KZFJVuHAJZj3wgO3vX2bMdNVp/QXTP3P7CEm9V1IdG8lDLY3HhiqpsE/nOwpPw=="
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2329,6 +2549,24 @@
        "wrappy": "1"
      }
    },
+    "openid-client": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.5.0.tgz",
+      "integrity": "sha512-Y7Xl8BgsrkzWLHkVDYuroM67hi96xITyEDSkmWaGUiNX6CkcXC3XyQGdv5aWZ6dukVKBFVQCADi9gCavOmU14w==",
+      "requires": {
+        "jose": "^4.14.4",
+        "lru-cache": "^6.0.0",
+        "object-hash": "^2.2.0",
+        "oidc-token-hash": "^5.0.3"
+      },
+      "dependencies": {
+        "object-hash": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
+          "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw=="
+        }
+      }
+    },
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@@ -2463,6 +2701,24 @@
        "xtend": "^4.0.0"
      }
    },
+    "preact": {
+      "version": "10.17.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.17.1.tgz",
+      "integrity": "sha512-X9BODrvQ4Ekwv9GURm9AKAGaomqXmip7NQTZgY7gcNmr7XE83adOMJvd3N42id1tMFU7ojiynRsYnY6/BRFxLA=="
+    },
+    "preact-render-to-string": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz",
+      "integrity": "sha512-JyhErpYOvBV1hEPwIxc/fHWXPfnEGdRKxc8gFdAZ7XV4tlzyzG847XAyEZqoDnynP88akM4eaHcSOzNcLWFguw==",
+      "requires": {
+        "pretty-format": "^3.8.0"
+      }
+    },
+    "pretty-format": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
+      "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew=="
+    },
    "queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2501,6 +2757,11 @@
        "picomatch": "^2.2.1"
      }
    },
+    "regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
    "resolve": {
      "version": "1.22.4",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -2674,6 +2935,11 @@
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
    "watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -2699,6 +2965,11 @@
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
    "yaml": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.2.tgz",
--- a/dashboard/15-final/package.json
+++ b/dashboard/15-final/package.json
@@ -16,8 +16,10 @@
    "@types/react-dom": "18.2.7",
    "@vercel/postgres": "^0.4.1",
    "autoprefixer": "10.4.15",
+    "bcryptjs": "^2.4.3",
    "clsx": "^2.0.0",
    "next": "13.4.19",
+    "next-auth": "^4.23.1",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",