From 351433fcad377610272628c540d58572dd1ef5ce Mon Sep 17 00:00:00 2001
From: Assad Isah <nottherealalanturing@gmail.com>
Date: Thu, 26 Feb 2026 12:34:21 +0100
Subject: [PATCH 1/4] implement user login

feat: implement user login functionality with validation and token generation
---
 apps/api/src/modules/auth/auth.controller.ts | 50 +++++++++++++++++++-
 apps/api/src/modules/auth/auth.routes.ts     |  3 +-
 apps/api/src/modules/auth/auth.validation.ts |  6 +++
 3 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/apps/api/src/modules/auth/auth.controller.ts b/apps/api/src/modules/auth/auth.controller.ts
index ad39210..73ed968 100644
--- a/apps/api/src/modules/auth/auth.controller.ts
+++ b/apps/api/src/modules/auth/auth.controller.ts
@@ -2,7 +2,7 @@ import { Request, Response } from 'express';
 import bcrypt from 'bcryptjs';
 import User from '../users/user.model';
 import { generateToken } from '../../services/jwt.service';
-import { registerSchema } from './auth.validation';
+import { loginSchema, registerSchema } from './auth.validation';
 
 const SALT_ROUNDS = 10;
 
@@ -68,3 +68,51 @@ export const register = async (req: Request, res: Response): Promise<void> => {
     res.status(500).json({ message: 'Internal server error' });
   }
 };
+
+export const login = async (req: Request, res: Response): Promise<void> => {
+  const parsedPayload = loginSchema.safeParse(req.body);
+
+  if (!parsedPayload.success) {
+    res.status(400).json({
+      message: 'Validation failed',
+      errors: parsedPayload.error.flatten(),
+    });
+    return;
+  }
+
+  const { email, password } = parsedPayload.data;
+
+  try {
+    const normalizedEmail = email.toLowerCase();
+    const existingUser = await User.findOne({ email: normalizedEmail });
+
+    if (!existingUser) {
+      res.status(401).json({ message: 'Invalid email or password' });
+      return;
+    }
+
+    const passwordMatches = await bcrypt.compare(password, existingUser.passwordHash);
+
+    if (!passwordMatches) {
+      res.status(401).json({ message: 'Invalid email or password' });
+      return;
+    }
+
+    const token = generateToken(existingUser.id, existingUser.role);
+
+    res.status(200).json({
+      token,
+      user: {
+        id: existingUser.id,
+        name: existingUser.name,
+        email: existingUser.email,
+        role: existingUser.role,
+        onboardingCompleted: existingUser.onboardingCompleted,
+        createdAt: existingUser.createdAt,
+        updatedAt: existingUser.updatedAt,
+      },
+    });
+  } catch (error) {
+    res.status(500).json({ message: 'Internal server error' });
+  }
+};
diff --git a/apps/api/src/modules/auth/auth.routes.ts b/apps/api/src/modules/auth/auth.routes.ts
index 7919d08..b6643d0 100644
--- a/apps/api/src/modules/auth/auth.routes.ts
+++ b/apps/api/src/modules/auth/auth.routes.ts
@@ -1,8 +1,9 @@
 import { Router } from 'express';
-import { register } from './auth.controller';
+import { login, register } from './auth.controller';
 
 const authRouter = Router();
 
 authRouter.post('/register', register);
+authRouter.post('/login', login);
 
 export default authRouter;
diff --git a/apps/api/src/modules/auth/auth.validation.ts b/apps/api/src/modules/auth/auth.validation.ts
index 10493f1..70389ef 100644
--- a/apps/api/src/modules/auth/auth.validation.ts
+++ b/apps/api/src/modules/auth/auth.validation.ts
@@ -7,4 +7,10 @@ export const registerSchema = z.object({
   role: z.enum([UserRole.DJ, UserRole.PLANNER, UserRole.MUSIC_LOVER]),
 });
 
+export const loginSchema = z.object({
+  email: z.string().trim().email(),
+  password: z.string().min(1, 'Password is required'),
+});
+
 export type RegisterInput = z.infer<typeof registerSchema>;
+export type LoginInput = z.infer<typeof loginSchema>;

From e001645799949203adecf57aace27ec1b886b4cf Mon Sep 17 00:00:00 2001
From: Muzainat <nurudeenmuzainat@gmail.com>
Date: Thu, 26 Feb 2026 12:42:18 +0100
Subject: [PATCH 2/4] feat: add authentication middleware and extend Express
 Request type

feat: add authentication middleware and extend Express Request type
---
 apps/api/src/middleware/auth.middleware.ts | 69 ++++++++++++++++++++++
 apps/api/src/types/express.d.ts            | 11 ++++
 2 files changed, 80 insertions(+)
 create mode 100644 apps/api/src/middleware/auth.middleware.ts
 create mode 100644 apps/api/src/types/express.d.ts

diff --git a/apps/api/src/middleware/auth.middleware.ts b/apps/api/src/middleware/auth.middleware.ts
new file mode 100644
index 0000000..704d64f
--- /dev/null
+++ b/apps/api/src/middleware/auth.middleware.ts
@@ -0,0 +1,69 @@
+import { NextFunction, Request, Response } from 'express';
+import { UserRole } from '@mixmatch/types';
+import {
+  JsonWebTokenError,
+  TokenExpiredError,
+  verifyToken,
+} from '../services/jwt.service';
+
+export interface AuthenticatedRequestUser {
+  userId: string;
+  role: UserRole;
+}
+
+const extractBearerToken = (authorizationHeader?: string): string | null => {
+  if (!authorizationHeader) {
+    return null;
+  }
+
+  const [scheme, token] = authorizationHeader.split(' ');
+
+  if (scheme !== 'Bearer' || !token) {
+    return null;
+  }
+
+  return token;
+};
+
+export const requireAuth = (req: Request, res: Response, next: NextFunction): void => {
+  const token = extractBearerToken(req.header('authorization'));
+
+  if (!token) {
+    res.status(401).json({ message: 'Unauthorized: missing or invalid token' });
+    return;
+  }
+
+  try {
+    const payload = verifyToken(token);
+
+    req.user = {
+      userId: payload.userId,
+      role: payload.role,
+    };
+
+    next();
+  } catch (error) {
+    if (error instanceof TokenExpiredError || error instanceof JsonWebTokenError) {
+      res.status(401).json({ message: 'Unauthorized: missing or invalid token' });
+      return;
+    }
+
+    res.status(500).json({ message: 'Internal server error' });
+  }
+};
+
+export const requireRole = (roles: UserRole[]) => {
+  return (req: Request, res: Response, next: NextFunction): void => {
+    if (!req.user) {
+      res.status(401).json({ message: 'Unauthorized: missing or invalid token' });
+      return;
+    }
+
+    if (!roles.includes(req.user.role)) {
+      res.status(403).json({ message: 'Forbidden: insufficient role permissions' });
+      return;
+    }
+
+    next();
+  };
+};
diff --git a/apps/api/src/types/express.d.ts b/apps/api/src/types/express.d.ts
new file mode 100644
index 0000000..e7a0f69
--- /dev/null
+++ b/apps/api/src/types/express.d.ts
@@ -0,0 +1,11 @@
+import { AuthenticatedRequestUser } from '../middleware/auth.middleware';
+
+declare global {
+  namespace Express {
+    interface Request {
+      user?: AuthenticatedRequestUser;
+    }
+  }
+}
+
+export {};

From b285671ab404021612759e81036ac22d78c05f97 Mon Sep 17 00:00:00 2001
From: Muzainat <nurudeenmuzainat@gmail.com>
Date: Thu, 26 Feb 2026 12:46:56 +0100
Subject: [PATCH 3/4] feat: add UI components (Button, Input, Select) and
 example form

feat: add UI components (Button, Input, Select) and example form
---
 packages/ui/package.json                      | 14 +++++
 packages/ui/src/components/Button.tsx         | 29 +++++++++
 packages/ui/src/components/Input.tsx          | 39 ++++++++++++
 packages/ui/src/components/Select.tsx         | 53 ++++++++++++++++
 .../src/examples/ValidatedAuthFormExample.tsx | 63 +++++++++++++++++++
 packages/ui/src/index.ts                      |  4 ++
 6 files changed, 202 insertions(+)
 create mode 100644 packages/ui/package.json
 create mode 100644 packages/ui/src/components/Button.tsx
 create mode 100644 packages/ui/src/components/Input.tsx
 create mode 100644 packages/ui/src/components/Select.tsx
 create mode 100644 packages/ui/src/examples/ValidatedAuthFormExample.tsx
 create mode 100644 packages/ui/src/index.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..f2782a7
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@mixmatch/ui",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "peerDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.66.1",
+    "zod": "^4.3.6"
+  }
+}
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
new file mode 100644
index 0000000..53d49cc
--- /dev/null
+++ b/packages/ui/src/components/Button.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'danger';
+
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  variant?: ButtonVariant;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-slate-900 text-white hover:bg-slate-700',
+  secondary: 'bg-slate-200 text-slate-900 hover:bg-slate-300',
+  danger: 'bg-red-600 text-white hover:bg-red-500',
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', type = 'button', disabled, ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      disabled={disabled}
+      className={`inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition ${
+        variantClasses[variant]
+      } ${disabled ? 'cursor-not-allowed opacity-60' : ''}`}
+      {...props}
+    />
+  ),
+);
+
+Button.displayName = 'Button';
diff --git a/packages/ui/src/components/Input.tsx b/packages/ui/src/components/Input.tsx
new file mode 100644
index 0000000..b21d54a
--- /dev/null
+++ b/packages/ui/src/components/Input.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  label: string;
+  error?: string;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ label, id, error, ...props }, ref) => {
+    const inputId = id ?? `input-${label.toLowerCase().replace(/\s+/g, '-')}`;
+
+    return (
+      <div className="w-full">
+        <label htmlFor={inputId} className="mb-1 block text-sm font-medium text-slate-800">
+          {label}
+        </label>
+        <input
+          ref={ref}
+          id={inputId}
+          aria-invalid={Boolean(error)}
+          aria-describedby={error ? `${inputId}-error` : undefined}
+          className={`w-full rounded-md border px-3 py-2 text-sm outline-none transition ${
+            error
+              ? 'border-red-500 bg-red-50 text-slate-900 focus:border-red-600'
+              : 'border-slate-300 bg-white text-slate-900 focus:border-slate-500'
+          }`}
+          {...props}
+        />
+        {error ? (
+          <p id={`${inputId}-error`} className="mt-1 text-xs text-red-600">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Input.displayName = 'Input';
diff --git a/packages/ui/src/components/Select.tsx b/packages/ui/src/components/Select.tsx
new file mode 100644
index 0000000..a5677c0
--- /dev/null
+++ b/packages/ui/src/components/Select.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+}
+
+export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'className'> {
+  label: string;
+  options: SelectOption[];
+  placeholder?: string;
+  error?: string;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, id, options, placeholder, error, ...props }, ref) => {
+    const selectId = id ?? `select-${label.toLowerCase().replace(/\s+/g, '-')}`;
+
+    return (
+      <div className="w-full">
+        <label htmlFor={selectId} className="mb-1 block text-sm font-medium text-slate-800">
+          {label}
+        </label>
+        <select
+          ref={ref}
+          id={selectId}
+          aria-invalid={Boolean(error)}
+          aria-describedby={error ? `${selectId}-error` : undefined}
+          className={`w-full rounded-md border px-3 py-2 text-sm outline-none transition ${
+            error
+              ? 'border-red-500 bg-red-50 text-slate-900 focus:border-red-600'
+              : 'border-slate-300 bg-white text-slate-900 focus:border-slate-500'
+          }`}
+          {...props}
+        >
+          {placeholder ? <option value="">{placeholder}</option> : null}
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {error ? (
+          <p id={`${selectId}-error`} className="mt-1 text-xs text-red-600">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+Select.displayName = 'Select';
diff --git a/packages/ui/src/examples/ValidatedAuthFormExample.tsx b/packages/ui/src/examples/ValidatedAuthFormExample.tsx
new file mode 100644
index 0000000..bd01061
--- /dev/null
+++ b/packages/ui/src/examples/ValidatedAuthFormExample.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+import { Select } from '../components/Select';
+
+const roleOptions = [
+  { label: 'DJ', value: 'DJ' },
+  { label: 'Organizer', value: 'PLANNER' },
+  { label: 'Fan', value: 'MUSIC_LOVER' },
+];
+
+const schema = z.object({
+  email: z.string().trim().email('Enter a valid email'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  role: z.enum(['DJ', 'PLANNER', 'MUSIC_LOVER']),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+export const ValidatedAuthFormExample = (): React.ReactElement => {
+  const form = useForm<FormValues>({
+    mode: 'onSubmit',
+    resolver: zodResolver(schema),
+    defaultValues: {
+      email: '',
+      password: '',
+      role: 'DJ',
+    },
+  });
+
+  const onSubmit = (_values: FormValues): void => {
+    // Validation gate: this callback only runs when schema validation passes.
+  };
+
+  return (
+    <form className="mx-auto flex max-w-md flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)} noValidate>
+      <Input
+        label="Email"
+        type="email"
+        autoComplete="email"
+        error={form.formState.errors.email?.message}
+        {...form.register('email')}
+      />
+      <Input
+        label="Password"
+        type="password"
+        autoComplete="new-password"
+        error={form.formState.errors.password?.message}
+        {...form.register('password')}
+      />
+      <Select
+        label="Role"
+        options={roleOptions}
+        error={form.formState.errors.role?.message}
+        {...form.register('role')}
+      />
+      <Button type="submit">Create account</Button>
+    </form>
+  );
+};
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..da65d0c
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,4 @@
+export { Button, type ButtonProps } from './components/Button';
+export { Input, type InputProps } from './components/Input';
+export { Select, type SelectOption, type SelectProps } from './components/Select';
+export { ValidatedAuthFormExample } from './examples/ValidatedAuthFormExample';

From 5a75dbe544feb6d8af465cf9b22d9162e46b927f Mon Sep 17 00:00:00 2001
From: Muzainat <nurudeenmuzainat@gmail.com>
Date: Thu, 26 Feb 2026 13:01:07 +0100
Subject: [PATCH 4/4] feat: implement authentication store and demo component

---
 apps/web/app/layout.tsx                 | 15 +-----
 apps/web/app/page.tsx                   | 64 ++---------------------
 apps/web/components/auth-store-demo.tsx | 49 ++++++++++++++++++
 apps/web/package.json                   |  3 +-
 apps/web/store/auth.store.ts            | 68 +++++++++++++++++++++++++
 pnpm-lock.yaml                          | 68 +++++++++++++++++++++++--
 6 files changed, 189 insertions(+), 78 deletions(-)
 create mode 100644 apps/web/components/auth-store-demo.tsx
 create mode 100644 apps/web/store/auth.store.ts

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index f7fa87e..d0d888d 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,17 +1,6 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -24,9 +13,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className="antialiased">
         {children}
       </body>
     </html>
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 295f8fd..be5cdf9 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,65 +1,9 @@
-import Image from "next/image";
+import { AuthStoreDemo } from '@/components/auth-store-demo';
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <main className="flex min-h-screen items-center justify-center bg-zinc-50 px-6 py-16">
+      <AuthStoreDemo />
+    </main>
   );
 }
diff --git a/apps/web/components/auth-store-demo.tsx b/apps/web/components/auth-store-demo.tsx
new file mode 100644
index 0000000..4d95511
--- /dev/null
+++ b/apps/web/components/auth-store-demo.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { UserRole } from '@mixmatch/types';
+import { useAuthStore } from '@/store/auth.store';
+
+export function AuthStoreDemo() {
+  const user = useAuthStore((state) => state.user);
+  const role = useAuthStore((state) => state.role);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
+  const login = useAuthStore((state) => state.login);
+  const logout = useAuthStore((state) => state.logout);
+
+  return (
+    <section className="w-full max-w-2xl rounded-xl border border-zinc-200 bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-semibold text-zinc-900">Auth Store Snapshot</h2>
+      <p className="mt-3 text-sm text-zinc-700">isAuthenticated: {String(isAuthenticated)}</p>
+      <p className="text-sm text-zinc-700">role: {role ?? 'NONE'}</p>
+      <p className="text-sm text-zinc-700">user: {user ? `${user.name} (${user.email})` : 'NONE'}</p>
+
+      <div className="mt-4 flex gap-3">
+        <button
+          type="button"
+          className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white"
+          onClick={() => {
+            login({
+              token: 'demo-token',
+              user: {
+                id: 'demo-user-id',
+                name: 'Demo DJ',
+                email: 'demo@mixmatch.io',
+                role: UserRole.DJ,
+                onboardingCompleted: false,
+              },
+            });
+          }}
+        >
+          Mock Login
+        </button>
+        <button
+          type="button"
+          className="rounded-md border border-zinc-300 px-4 py-2 text-sm font-medium text-zinc-800"
+          onClick={logout}
+        >
+          Logout
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 2bdcb4e..8e192ae 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "next": "16.1.4",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@mixmatch/config": "workspace:^",
diff --git a/apps/web/store/auth.store.ts b/apps/web/store/auth.store.ts
new file mode 100644
index 0000000..d3edc63
--- /dev/null
+++ b/apps/web/store/auth.store.ts
@@ -0,0 +1,68 @@
+'use client';
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { UserRole } from '@mixmatch/types';
+
+export interface AuthUser {
+  id: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  onboardingCompleted: boolean;
+}
+
+interface LoginPayload {
+  user: AuthUser;
+  token?: string;
+}
+
+interface AuthStore {
+  user: AuthUser | null;
+  role: UserRole | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  login: (data: LoginPayload) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      role: null,
+      token: null,
+      isAuthenticated: false,
+      login: ({ user, token }) => {
+        set({
+          user,
+          role: user.role,
+          token: token ?? null,
+          isAuthenticated: true,
+        });
+      },
+      logout: () => {
+        set({
+          user: null,
+          role: null,
+          token: null,
+          isAuthenticated: false,
+        });
+
+        if (typeof window !== 'undefined') {
+          window.location.assign('/');
+        }
+      },
+    }),
+    {
+      name: 'mixmatch-auth-store',
+      storage: createJSONStorage(() => localStorage),
+      partialize: (state) => ({
+        user: state.user,
+        role: state.role,
+        token: state.token,
+        isAuthenticated: state.isAuthenticated,
+      }),
+    },
+  ),
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb0144d..ddca0c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,6 +127,9 @@ importers:
       react-dom:
         specifier: 19.2.3
         version: 19.2.3(react@19.2.3)
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.11(@types/react@19.2.9)(react@19.2.3)
     devDependencies:
       '@mixmatch/config':
         specifier: workspace:^
@@ -163,6 +166,24 @@ importers:
 
   packages/types: {}
 
+  packages/ui:
+    dependencies:
+      '@hookform/resolvers':
+        specifier: ^5.2.2
+        version: 5.2.2(react-hook-form@7.71.2)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.3(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.66.1
+        version: 7.71.2(react@19.2.3)
+      zod:
+        specifier: ^4.3.6
+        version: 4.3.6
+
 packages:
 
   /@alloc/quick-lru@5.2.0:
@@ -411,6 +432,15 @@ packages:
       levn: 0.4.1
     dev: true
 
+  /@hookform/resolvers@5.2.2(react-hook-form@7.71.2):
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.71.2(react@19.2.3)
+    dev: false
+
   /@humanfs/core@0.19.1:
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -839,6 +869,10 @@ packages:
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
     dev: true
 
+  /@standard-schema/utils@0.3.0:
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+    dev: false
+
   /@stellar/js-xdr@3.1.2:
     resolution: {integrity: sha512-VVolPL5goVEIsvuGqDc5uiKxV03lzfWdvYg1KikvwheDmTBO68CKDji3bAZ/kppZrx5iTA8z3Ld5yuytcvhvOQ==}
     dev: false
@@ -1179,7 +1213,6 @@ packages:
     resolution: {integrity: sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==}
     dependencies:
       csstype: 3.2.3
-    dev: true
 
   /@types/send@0.17.6:
     resolution: {integrity: sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==}
@@ -1949,7 +1982,6 @@ packages:
 
   /csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
-    dev: true
 
   /damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
@@ -3963,6 +3995,15 @@ packages:
       scheduler: 0.27.0
     dev: false
 
+  /react-hook-form@7.71.2(react@19.2.3):
+    resolution: {integrity: sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+    dependencies:
+      react: 19.2.3
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
@@ -4951,4 +4992,25 @@ packages:
 
   /zod@4.3.6:
     resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
-    dev: true
+
+  /zustand@5.0.11(@types/react@19.2.9)(react@19.2.3):
+    resolution: {integrity: sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+    dependencies:
+      '@types/react': 19.2.9
+      react: 19.2.3
+    dev: false