Merge pull request #30 from codegasms/feat/auth-integration

Integrate auth between frontend and backend, and generate migrations

README.md

@@ -1,3 +1,17 @@
+# pariksa
+
+## Migrations
+
+```bash
+npx drizzle-kit generate  # generate SQL migration files based on your Drizzle schema
+npx drizzle-kit migrate  # apply generated SQL migration files to your database
+```
+
+> [!NOTE]
+> Use `bun` instead of `npx` if you are using `bun`.
+
+---
+
 This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 
 ## Getting Started

app/api/auth/register/route.ts

@@ -5,7 +5,7 @@ import { users } from "@/db/schema";
 import { eq } from "drizzle-orm";
 import { generateSessionToken, createSession } from "@/lib/server/session";
 import { setSessionTokenCookie } from "@/lib/server/cookies";
-import { Argon2id } from "oslo/password";
+import { hashPassword } from "@/lib/password";
 
 export async function POST(request: NextRequest) {
   try {
@@ -23,15 +23,14 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    const argon2id = new Argon2id();
-    const hashedPassword = await argon2id.hash(validatedData.password);
+    const hashedPassword = await hashPassword(validatedData.password);
 
     const [user] = await db
       .insert(users)
       .values({
         email: validatedData.email,
         hashedPassword: hashedPassword,
-        name: validatedData.fullName,
+        name: validatedData.name,
 
         // TODO: Use a proper readable slug for nameId
         nameId: validatedData.email,

app/page.tsx

@@ -1,13 +1,16 @@
-import Image from "next/image";
+"use client";
 import { Button } from "../components/ui/button";
 import { FAQ } from "../components/landing/faq";
 import { VortexDemo } from "../components/landing/vortex-demo";
 import { Features } from "../components/landing/features";
 import { GeminiSection } from "../components/landing/gemini-section";
 import { AboutUs } from "../components/landing/about-us";
 import { Pricing } from "../components/landing/pricing";
+import { useRouter } from "next/navigation";
 
 export default function Home() {
+  const router = useRouter();
+
   return (
     <div className="relative bg-black text-white">
       {/* Header */}
@@ -49,10 +52,14 @@ export default function Home() {
               <Button
                 variant="ghost"
                 className="text-gray-300 hover:text-white"
+                onClick={() => router.push("/auth")}
               >
                 Sign In
               </Button>
-              <Button className="bg-blue-600 hover:bg-blue-700">
+              <Button
+                className="bg-blue-600 hover:bg-blue-700"
+                onClick={() => router.push("/auth?mode=register")}
+              >
                 Get Started
               </Button>
             </div>

components/auth-component.tsx

@@ -27,30 +27,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-
-// const loginSchema = z.object({
-//   email: z.string().email({ message: "Invalid email address" }),
-//   password: z
-//     .string()
-//     .min(8, { message: "Password must be at least 8 characters long" }),
-// });
-
-// const registerSchema = loginSchema
-//   .extend({
-//     name: z
-//       .string()
-//       .min(2, { message: "Name must be at least 2 characters long" }),
-//     confirmPassword: z
-//       .string()
-//       .min(8, { message: "Password must be at least 8 characters long" }),
-//   })
-//   .refine((data) => data.password === data.confirmPassword, {
-//     message: "Passwords do not match",
-//     path: ["confirmPassword"],
-//   });
-
-// type LoginFormValues = z.infer<typeof loginSchema>;
-// type RegisterFormValues = z.infer<typeof registerSchema>;
+import { fetchApi } from "@/lib/client/fetch";
 
 export function AuthComponent({
   initialMode = "login",
@@ -78,12 +55,30 @@ export function AuthComponent({
     },
   });
 
-  function onLoginSubmit(values: LoginInput) {
-    console.log(values);
+  async function onLoginSubmit(values: LoginInput) {
+    try {
+      await fetchApi("auth/login", {
+        method: "POST",
+        body: JSON.stringify(values),
+      });
+      router.push("/"); // Redirect to home page after successful login
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
   }
 
-  function onRegisterSubmit(values: RegisterInput) {
-    console.log(values);
+  async function onRegisterSubmit(values: RegisterInput) {
+    try {
+      await fetchApi("auth/register", {
+        method: "POST",
+        body: JSON.stringify(values),
+      });
+      router.push("/"); // Redirect to home page after successful registration
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
   }
 
   return (

db/drizzle.ts

@@ -3,14 +3,4 @@ import * as schema from "./schema";
 import { drizzle } from "drizzle-orm/node-postgres";
 
 config({ path: ".env.local" });
-
-/*
-export const db = drizzle({
-  connection: {
-    connectionString: process.env.DATABASE_URL,
-    // ssl: true
-  }
-}, { schema });
-*/
-
 export const db = drizzle(process.env.DATABASE_URL!, { schema });

db/schema.ts

@@ -90,7 +90,7 @@ export const groupMemberships = pgTable(
     return {
       pk: primaryKey({ columns: [table.groupId, table.userId] }),
       groupIdIdx: index("group_id_idx").on(table.groupId),
-      userIdIdx: index("user_id_idx").on(table.userId),
+      groupUserIdIdx: index("group_user_id_idx").on(table.userId),
     };
   },
 );

lib/password.ts

@@ -1,11 +1,9 @@
-import { Argon2id } from "oslo/password";
+import bcryptjs from "bcryptjs";
 
 export async function hashPassword(password: string) {
-  const argon2id = new Argon2id();
-  return await argon2id.hash(password);
+  return await bcryptjs.hash(password, 12);
 }
 
 export async function verifyPassword(hash: string, password: string) {
-  const argon2id = new Argon2id();
-  return await argon2id.verify(hash, password);
+  return await bcryptjs.compare(password, hash);
 }