working authentication

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>