working authentication

package-lock.json

@@ -19,6 +19,8 @@
         "@mui/system": "^6.1.7",
         "@mui/x-data-grid": "^7.22.2",
         "@radix-ui/react-slot": "^1.1.0",
+        "@types/bcryptjs": "^2.4.6",
+        "bcryptjs": "^2.4.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "dotenv": "^16.4.7",
@@ -2797,6 +2799,12 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@types/bcryptjs": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
+      "integrity": "sha512-9xlo6R2qDs5uixm0bcIqCeMCE6HiQsIyel9KQySStiyqNl2tnj2mP3DX1Nf56MD6KMenNNlBBsy3LJ7gUEQPXQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/bun": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/@types/bun/-/bun-1.1.13.tgz",
@@ -2831,6 +2839,7 @@
       "resolved": "https://registry.npmjs.org/@types/pg/-/pg-8.11.10.tgz",
       "integrity": "sha512-LczQUW4dbOQzsH2RQ5qoeJ6qJPdrcM/DcMLoqWQkMLMsq83J5lAX3LXjdkWdpscFy67JSOWDnh7Ny/sPFykmkg==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*",
         "pg-protocol": "*",
@@ -3515,6 +3524,12 @@
       "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==",
+      "license": "MIT"
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",

package.json

@@ -20,6 +20,8 @@
     "@mui/system": "^6.1.7",
     "@mui/x-data-grid": "^7.22.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@types/bcryptjs": "^2.4.6",
+    "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "dotenv": "^16.4.7",

src/app/api/auth/signup/route.tsx

@@ -0,0 +1,32 @@
+import { NextResponse } from 'next/server';
+import { db } from '../../../../db';
+import { users } from '../../../../drizzle/schema';
+import bcrypt from 'bcryptjs';
+import { eq } from 'drizzle-orm';
+
+export async function POST(request: Request) {
+  try {
+    const { firstName, username, password, email } = await request.json();
+    const hashedPassword = await bcrypt.hash(password, 10);
+
+    const newUser = {
+      firstName,
+      username,
+      email,
+      passwordHash: hashedPassword,
+    } satisfies typeof users.$inferInsert;
+
+    await db.insert(users).values(newUser);
+
+    return NextResponse.json(
+      { message: 'User created successfully', redirect: '/' },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error('Signup error:', error);
+    return NextResponse.json(
+      { error: 'Failed to create user' },
+      { status: 500 }
+    );
+  }
+} 

src/app/register/layout.tsx

@@ -0,0 +1,17 @@
+import constants from "@src/lib/constants"
+export const metadata = {
+  title: constants.APP_NAME,
+  description: constants.DESCRIPTION,
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      {children}
+    </>
+  )
+}

src/app/register/page.tsx

@@ -0,0 +1,126 @@
+'use client';
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import PageHero from '../../components/PageHero';
+import Link from 'next/link';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    firstName: '',
+    username: '',
+    email: '',
+    password: '',
+  });
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/auth/signup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username: formData.username,
+          firstName: formData.firstName,
+          email: formData.email,
+          password: formData.password,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        router.push('/');
+      } else {
+        setError(data.error || 'Registration failed');
+      }
+    } catch (err) {
+      setError('Failed to create account');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-4 pt-16 mx-auto max-w-md">
+      <PageHero 
+        title="Register Account"
+      />
+      
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="bg-red-50 text-red-500 p-3 rounded-md text-sm">
+              {error}
+            </div>
+          )}
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-700">USer Name</label>
+            <input
+              type="text"
+              required
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              value={formData.username}
+              onChange={(e) => setFormData({...formData, username: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">First Name</label>
+            <input
+              type="text"
+              required
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              value={formData.firstName}
+              onChange={(e) => setFormData({...formData, firstName: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Email</label>
+            <input
+              type="email"
+              required
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              value={formData.email}
+              onChange={(e) => setFormData({...formData, email: e.target.value})}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Password</label>
+            <input
+              type="password"
+              required
+              minLength={6}
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+              value={formData.password}
+              onChange={(e) => setFormData({...formData, password: e.target.value})}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors disabled:bg-blue-400"
+          >
+            {isLoading ? 'Creating Account...' : 'Create Account'}
+          </button>
+
+          <p className="text-sm text-center text-gray-600 mt-4">
+            Already have an account?{' '}
+            <Link href="/signin" className="text-blue-600 hover:text-blue-700">
+              Sign in
+            </Link>
+          </p>
+        </form>
+      </div>
+    </div>
+  );
+} 

src/app/signin/page.tsx

@@ -60,7 +60,7 @@ export default function SignupPage() {
             <h2 className="mt-8 text-2xl/9 font-bold tracking-tight text-gray-900">Sign in to your account</h2>
             <p className="mt-2 text-sm/6 text-gray-500">
               Not a member?{' '}
-              <a href="#" className="font-semibold text-lime-700 hover:text-lime-800">
+              <a href="/register" className="font-semibold text-lime-700 hover:text-lime-800">
                 Create An Account
               </a>
             </p>

src/drizzle/relations.ts

@@ -1,3 +1,29 @@
 import { relations } from "drizzle-orm/relations";
-import {  } from "./schema";
+import { users, userBuilds, userFavorites, userActivityLog } from "./schema";
 
+export const userBuildsRelations = relations(userBuilds, ({one}) => ({
+	user: one(users, {
+		fields: [userBuilds.userId],
+		references: [users.id]
+	}),
+}));
+
+export const usersRelations = relations(users, ({many}) => ({
+	userBuilds: many(userBuilds),
+	userFavorites: many(userFavorites),
+	userActivityLogs: many(userActivityLog),
+}));
+
+export const userFavoritesRelations = relations(userFavorites, ({one}) => ({
+	user: one(users, {
+		fields: [userFavorites.userId],
+		references: [users.id]
+	}),
+}));
+
+export const userActivityLogRelations = relations(userActivityLog, ({one}) => ({
+	user: one(users, {
+		fields: [userActivityLog.userId],
+		references: [users.id]
+	}),
+}));

src/drizzle/schema.ts

@@ -1,4 +1,4 @@
-import { pgTable, integer, varchar, text, numeric, timestamp, uuid, unique, index, real, doublePrecision, pgView } from "drizzle-orm/pg-core"
+import { pgTable, integer, varchar, text, numeric, timestamp, uuid, unique, check, bigserial, date, boolean, foreignKey, bigint, index, real, doublePrecision, pgView } from "drizzle-orm/pg-core"
 import { sql } from "drizzle-orm"
 
 
@@ -41,6 +41,66 @@ export const productFeeds = pgTable("product_feeds", {
 	}
 });
 
+export const users = pgTable("users", {
+	id: bigserial({ mode: "bigint" }).primaryKey().notNull(),
+	username: varchar({ length: 50 }).notNull(),
+	email: varchar({ length: 255 }).notNull(),
+	passwordHash: varchar("password_hash", { length: 255 }).notNull(),
+	firstName: varchar("first_name", { length: 50 }),
+	lastName: varchar("last_name", { length: 50 }),
+	profilePicture: varchar("profile_picture", { length: 255 }),
+	dateOfBirth: date("date_of_birth"),
+	phoneNumber: varchar("phone_number", { length: 20 }),
+	createdAt: timestamp("created_at", { mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+	updatedAt: timestamp("updated_at", { mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+	isAdmin: boolean("is_admin").default(false),
+	lastLogin: timestamp("last_login", { mode: 'string' }),
+	emailVerified: boolean("email_verified").default(false),
+	buildPrivacySetting: text("build_privacy_setting").default('public'),
+}, (table) => {
+	return {
+		usersUsernameKey: unique("users_username_key").on(table.username),
+		usersEmailKey: unique("users_email_key").on(table.email),
+		usersBuildPrivacySettingCheck: check("users_build_privacy_setting_check", sql`build_privacy_setting = ANY (ARRAY['private'::text, 'public'::text])`),
+	}
+});
+
+export const userBuilds = pgTable("user_builds", {
+	id: bigserial({ mode: "bigint" }).primaryKey().notNull(),
+	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+	userId: bigint("user_id", { mode: "number" }).notNull(),
+	buildName: varchar("build_name", { length: 255 }).notNull(),
+	buildDescription: text("build_description"),
+	createdAt: timestamp("created_at", { mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+	updatedAt: timestamp("updated_at", { mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+	isShared: boolean("is_shared").default(false),
+}, (table) => {
+	return {
+		userBuildsUserIdFkey: foreignKey({
+			columns: [table.userId],
+			foreignColumns: [users.id],
+			name: "user_builds_user_id_fkey"
+		}).onDelete("cascade"),
+	}
+});
+
+export const userFavorites = pgTable("user_favorites", {
+	id: bigserial({ mode: "bigint" }).primaryKey().notNull(),
+	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+	userId: bigint("user_id", { mode: "number" }).notNull(),
+	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+	itemId: bigint("item_id", { mode: "number" }).notNull(),
+	addedAt: timestamp("added_at", { mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+}, (table) => {
+	return {
+		userFavoritesUserIdFkey: foreignKey({
+			columns: [table.userId],
+			foreignColumns: [users.id],
+			name: "user_favorites_user_id_fkey"
+		}).onDelete("cascade"),
+	}
+});
+
 export const brands = pgTable("brands", {
 	id: integer().primaryKey().generatedAlwaysAsIdentity({ name: "brands_id_seq", startWith: 1, increment: 1, minValue: 1, maxValue: 2147483647, cache: 1 }),
 	name: varchar({ length: 100 }).notNull(),
@@ -67,6 +127,22 @@ export const manufacturer = pgTable("manufacturer", {
 	}
 });
 
+export const userActivityLog = pgTable("user_activity_log", {
+	id: bigserial({ mode: "bigint" }).primaryKey().notNull(),
+	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
+	userId: bigint("user_id", { mode: "number" }).notNull(),
+	activity: text().notNull(),
+	timestamp: timestamp({ mode: 'string' }).default(sql`CURRENT_TIMESTAMP`),
+}, (table) => {
+	return {
+		userActivityLogUserIdFkey: foreignKey({
+			columns: [table.userId],
+			foreignColumns: [users.id],
+			name: "user_activity_log_user_id_fkey"
+		}).onDelete("cascade"),
+	}
+});
+
 export const states = pgTable("states", {
 	id: integer().primaryKey().generatedByDefaultAsIdentity({ name: "states_id_seq", startWith: 1, increment: 1, minValue: 1, maxValue: 2147483647, cache: 1 }),
 	state: varchar({ length: 50 }),