fix: build issues

.dockerignore

@@ -1,6 +1,8 @@
 *
 
 !turbo.json
+!bun.lock
+!package.json
 
 !**/package.json
 !**/bun.lock
@@ -8,6 +10,7 @@
 !**/vite.config.ts
 !**/react-router.config.ts
 !**/build.ts
+!**/components.json
 
 !apps/**/src/**
 !apps/**/drizzle/**

Dockerfile

@@ -1,8 +1,8 @@
-ARG BUN_VERSION="1.2.20"
+ARG BUN_VERSION="1.2.23"
 
 FROM oven/bun:${BUN_VERSION}-alpine AS runner_base
 
-RUN apk add --no-cache davfs2
+RUN apk add --no-cache davfs2=1.6.1-r2
 
 # ------------------------------
 # DEVELOPMENT
@@ -49,7 +49,9 @@ FROM runner_base AS production
 
 ENV NODE_ENV="production"
 
-RUN apk add --no-cache davfs2
+# RUN bun i ssh2
+
+RUN apk add --no-cache davfs2=1.6.1-r2
 
 WORKDIR /app
 

README.md

@@ -23,9 +23,7 @@ Ironmount is an easy to use web interface to manage your remote storage and moun
 
 ### Features
 
-https://github.com/nicotsx/ironmount/blob/main/screenshots/volume-creation.png?raw=true
-
-- ✅  Support for multiple protocols: NFS, SMB, FTP, Directory
+- ✅  Support for multiple protocols: NFS, SMB, WebDAV, Directory
 - 📡  Mount your remote storage as local folders
 - 🐳  Docker integration: mount your remote storage directly into your containers via a docker volume syntax
 - 🔍  Keep an eye on your mounts with health checks and automatic remounting on error
@@ -33,11 +31,8 @@ https://github.com/nicotsx/ironmount/blob/main/screenshots/volume-creation.png?r
 
 ### Coming soon
 
-- 🔐  User authentication and role management
-- 💾  Automated backups and snapshots with encryption, strategies and retention policies
-- 🔄  Re-exporting your mounts to other protocols (e.g. mount an FTP server as an SMB share with fine-grained permissions)
-- ☁️  Integration with cloud storage providers (e.g. AWS S3, Google Drive, Dropbox)
-- 🔀  Storage sharding and replication for high availability and performance
+- Automated backups with encryption and retention policies
+- Integration with cloud storage providers (e.g. AWS S3, Google Drive, Dropbox)
 
 ## Installation
 
@@ -46,7 +41,7 @@ In order to run Ironmount, you need to have Docker and Docker Compose installed
 ```yaml
 services:
   ironmount:
-    image: nicotsx/ironmount:v0.0.1
+    image: ghcr.io/nicotsx/ironmount:v0.0.1
     container_name: ironmount
     restart: unless-stopped
     cap_add:
@@ -69,7 +64,7 @@ volumes:
 Then, run the following command to start Ironmount:
 
 ```bash
-docker-compose up -d
+docker compose up -d
 ```
 
 Once the container is running, you can access the web interface at `http://<your-server-ip>:4096`.

apps/client/Dockerfile

@@ -1,22 +0,0 @@
-FROM node:20-alpine AS development-dependencies-env
-COPY . /app
-WORKDIR /app
-RUN npm ci
-
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
-WORKDIR /app
-RUN npm ci --omit=dev
-
-FROM node:20-alpine AS build-env
-COPY . /app/
-COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN npm run build
-
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
-COPY --from=production-dependencies-env /app/node_modules /app/node_modules
-COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]

apps/client/app/api-client/@tanstack/react-query.gen.ts

@@ -2,6 +2,11 @@
 
 import {
 	type Options,
+	register,
+	login,
+	logout,
+	getMe,
+	getStatus,
 	listVolumes,
 	createVolume,
 	testConnection,
@@ -15,6 +20,14 @@ import {
 } from "../sdk.gen";
 import { queryOptions, type UseMutationOptions, type DefaultError } from "@tanstack/react-query";
 import type {
+	RegisterData,
+	RegisterResponse,
+	LoginData,
+	LoginResponse,
+	LogoutData,
+	LogoutResponse,
+	GetMeData,
+	GetStatusData,
 	ListVolumesData,
 	CreateVolumeData,
 	CreateVolumeResponse,
@@ -74,6 +87,163 @@ const createQueryKey = <TOptions extends Options>(
 	return [params];
 };
 
+export const registerQueryKey = (options?: Options<RegisterData>) => createQueryKey("register", options);
+
+/**
+ * Register a new user
+ */
+export const registerOptions = (options?: Options<RegisterData>) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await register({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: registerQueryKey(options),
+	});
+};
+
+/**
+ * Register a new user
+ */
+export const registerMutation = (
+	options?: Partial<Options<RegisterData>>,
+): UseMutationOptions<RegisterResponse, DefaultError, Options<RegisterData>> => {
+	const mutationOptions: UseMutationOptions<RegisterResponse, DefaultError, Options<RegisterData>> = {
+		mutationFn: async (localOptions) => {
+			const { data } = await register({
+				...options,
+				...localOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const loginQueryKey = (options?: Options<LoginData>) => createQueryKey("login", options);
+
+/**
+ * Login with username and password
+ */
+export const loginOptions = (options?: Options<LoginData>) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await login({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: loginQueryKey(options),
+	});
+};
+
+/**
+ * Login with username and password
+ */
+export const loginMutation = (
+	options?: Partial<Options<LoginData>>,
+): UseMutationOptions<LoginResponse, DefaultError, Options<LoginData>> => {
+	const mutationOptions: UseMutationOptions<LoginResponse, DefaultError, Options<LoginData>> = {
+		mutationFn: async (localOptions) => {
+			const { data } = await login({
+				...options,
+				...localOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const logoutQueryKey = (options?: Options<LogoutData>) => createQueryKey("logout", options);
+
+/**
+ * Logout current user
+ */
+export const logoutOptions = (options?: Options<LogoutData>) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await logout({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: logoutQueryKey(options),
+	});
+};
+
+/**
+ * Logout current user
+ */
+export const logoutMutation = (
+	options?: Partial<Options<LogoutData>>,
+): UseMutationOptions<LogoutResponse, DefaultError, Options<LogoutData>> => {
+	const mutationOptions: UseMutationOptions<LogoutResponse, DefaultError, Options<LogoutData>> = {
+		mutationFn: async (localOptions) => {
+			const { data } = await logout({
+				...options,
+				...localOptions,
+				throwOnError: true,
+			});
+			return data;
+		},
+	};
+	return mutationOptions;
+};
+
+export const getMeQueryKey = (options?: Options<GetMeData>) => createQueryKey("getMe", options);
+
+/**
+ * Get current authenticated user
+ */
+export const getMeOptions = (options?: Options<GetMeData>) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getMe({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getMeQueryKey(options),
+	});
+};
+
+export const getStatusQueryKey = (options?: Options<GetStatusData>) => createQueryKey("getStatus", options);
+
+/**
+ * Get authentication system status
+ */
+export const getStatusOptions = (options?: Options<GetStatusData>) => {
+	return queryOptions({
+		queryFn: async ({ queryKey, signal }) => {
+			const { data } = await getStatus({
+				...options,
+				...queryKey[0],
+				signal,
+				throwOnError: true,
+			});
+			return data;
+		},
+		queryKey: getStatusQueryKey(options),
+	});
+};
+
 export const listVolumesQueryKey = (options?: Options<ListVolumesData>) => createQueryKey("listVolumes", options);
 
 /**

apps/client/app/api-client/sdk.gen.ts

@@ -2,6 +2,19 @@
 
 import type { Options as ClientOptions, TDataShape, Client } from "./client";
 import type {
+	RegisterData,
+	RegisterResponses,
+	RegisterErrors,
+	LoginData,
+	LoginResponses,
+	LoginErrors,
+	LogoutData,
+	LogoutResponses,
+	GetMeData,
+	GetMeResponses,
+	GetMeErrors,
+	GetStatusData,
+	GetStatusResponses,
 	ListVolumesData,
 	ListVolumesResponses,
 	CreateVolumeData,
@@ -48,6 +61,64 @@ export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends
 	meta?: Record<string, unknown>;
 };
 
+/**
+ * Register a new user
+ */
+export const register = <ThrowOnError extends boolean = false>(options?: Options<RegisterData, ThrowOnError>) => {
+	return (options?.client ?? _heyApiClient).post<RegisterResponses, RegisterErrors, ThrowOnError>({
+		url: "/api/v1/auth/register",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Login with username and password
+ */
+export const login = <ThrowOnError extends boolean = false>(options?: Options<LoginData, ThrowOnError>) => {
+	return (options?.client ?? _heyApiClient).post<LoginResponses, LoginErrors, ThrowOnError>({
+		url: "/api/v1/auth/login",
+		...options,
+		headers: {
+			"Content-Type": "application/json",
+			...options?.headers,
+		},
+	});
+};
+
+/**
+ * Logout current user
+ */
+export const logout = <ThrowOnError extends boolean = false>(options?: Options<LogoutData, ThrowOnError>) => {
+	return (options?.client ?? _heyApiClient).post<LogoutResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/logout",
+		...options,
+	});
+};
+
+/**
+ * Get current authenticated user
+ */
+export const getMe = <ThrowOnError extends boolean = false>(options?: Options<GetMeData, ThrowOnError>) => {
+	return (options?.client ?? _heyApiClient).get<GetMeResponses, GetMeErrors, ThrowOnError>({
+		url: "/api/v1/auth/me",
+		...options,
+	});
+};
+
+/**
+ * Get authentication system status
+ */
+export const getStatus = <ThrowOnError extends boolean = false>(options?: Options<GetStatusData, ThrowOnError>) => {
+	return (options?.client ?? _heyApiClient).get<GetStatusResponses, unknown, ThrowOnError>({
+		url: "/api/v1/auth/status",
+		...options,
+	});
+};
+
 /**
  * List all volumes
  */

apps/client/app/api-client/types.gen.ts

@@ -1,5 +1,134 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
+export type RegisterData = {
+	body?: {
+		password: string;
+		username: string;
+	};
+	path?: never;
+	query?: never;
+	url: "/api/v1/auth/register";
+};
+
+export type RegisterErrors = {
+	/**
+	 * Invalid request or username already exists
+	 */
+	400: unknown;
+};
+
+export type RegisterResponses = {
+	/**
+	 * User created successfully
+	 */
+	201: {
+		message: string;
+		user: {
+			id: string;
+			username: string;
+		};
+	};
+};
+
+export type RegisterResponse = RegisterResponses[keyof RegisterResponses];
+
+export type LoginData = {
+	body?: {
+		password: string;
+		username: string;
+	};
+	path?: never;
+	query?: never;
+	url: "/api/v1/auth/login";
+};
+
+export type LoginErrors = {
+	/**
+	 * Invalid credentials
+	 */
+	401: unknown;
+};
+
+export type LoginResponses = {
+	/**
+	 * Login successful
+	 */
+	200: {
+		message: string;
+		user: {
+			id: string;
+			username: string;
+		};
+	};
+};
+
+export type LoginResponse = LoginResponses[keyof LoginResponses];
+
+export type LogoutData = {
+	body?: never;
+	path?: never;
+	query?: never;
+	url: "/api/v1/auth/logout";
+};
+
+export type LogoutResponses = {
+	/**
+	 * Logout successful
+	 */
+	200: {
+		message: string;
+	};
+};
+
+export type LogoutResponse = LogoutResponses[keyof LogoutResponses];
+
+export type GetMeData = {
+	body?: never;
+	path?: never;
+	query?: never;
+	url: "/api/v1/auth/me";
+};
+
+export type GetMeErrors = {
+	/**
+	 * Not authenticated
+	 */
+	401: unknown;
+};
+
+export type GetMeResponses = {
+	/**
+	 * Current user information
+	 */
+	200: {
+		message: string;
+		user: {
+			id: string;
+			username: string;
+		};
+	};
+};
+
+export type GetMeResponse = GetMeResponses[keyof GetMeResponses];
+
+export type GetStatusData = {
+	body?: never;
+	path?: never;
+	query?: never;
+	url: "/api/v1/auth/status";
+};
+
+export type GetStatusResponses = {
+	/**
+	 * Authentication system status
+	 */
+	200: {
+		hasUsers: boolean;
+	};
+};
+
+export type GetStatusResponse = GetStatusResponses[keyof GetStatusResponses];
+
 export type ListVolumesData = {
 	body?: never;
 	path?: never;

apps/client/app/app.css

@@ -12,6 +12,9 @@
 html,
 body {
 	@apply bg-white dark:bg-[#0D0D0D];
+	overflow-x: hidden;
+	width: 100%;
+	position: relative;
 
 	@media (prefers-color-scheme: dark) {
 		color-scheme: dark;

apps/client/app/components/create-volume-dialog.tsx

@@ -15,6 +15,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "./ui/dialog";
+import { ScrollArea } from "./ui/scroll-area";
 
 type Props = {
 	open: boolean;
@@ -46,25 +47,27 @@ export const CreateVolumeDialog = ({ open, setOpen }: Props) => {
 				</Button>
 			</DialogTrigger>
 			<DialogContent>
-				<DialogHeader>
-					<DialogTitle>Create volume</DialogTitle>
-					<DialogDescription>Enter a name for the new volume</DialogDescription>
-				</DialogHeader>
-				<CreateVolumeForm
-					mode="create"
-					formId={formId}
-					onSubmit={(values) => {
-						create.mutate({ body: { config: values, name: values.name } });
-					}}
-				/>
-				<DialogFooter>
-					<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
-						Cancel
-					</Button>
-					<Button type="submit" form={formId} disabled={create.isPending}>
-						Create
-					</Button>
-				</DialogFooter>
+				<ScrollArea className="h-[500px]">
+					<DialogHeader>
+						<DialogTitle>Create volume</DialogTitle>
+					</DialogHeader>
+					<CreateVolumeForm
+						className="mt-4"
+						mode="create"
+						formId={formId}
+						onSubmit={(values) => {
+							create.mutate({ body: { config: values, name: values.name } });
+						}}
+					/>
+					<DialogFooter className="mt-4">
+						<Button type="button" variant="secondary" onClick={() => setOpen(false)}>
+							Cancel
+						</Button>
+						<Button type="submit" form={formId} disabled={create.isPending}>
+							Create
+						</Button>
+					</DialogFooter>
+				</ScrollArea>
 			</DialogContent>
 		</Dialog>
 	);

apps/client/app/components/create-volume-form.tsx

@@ -6,7 +6,7 @@ import { CheckCircle, Loader2, XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { testConnectionMutation } from "~/api-client/@tanstack/react-query.gen";
-import { slugify } from "~/lib/utils";
+import { cn, slugify } from "~/lib/utils";
 import { Button } from "./ui/button";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
 import { Input } from "./ui/input";
@@ -24,6 +24,7 @@ type Props = {
 	initialValues?: Partial<FormValues>;
 	formId?: string;
 	loading?: boolean;
+	className?: string;
 };
 
 const defaultValuesForType = {
@@ -33,7 +34,7 @@ const defaultValuesForType = {
 	webdav: { backend: "webdav" as const, port: 80, ssl: false },
 };
 
-export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading }: Props) => {
+export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, formId, loading, className }: Props) => {
 	const form = useForm<FormValues>({
 		resolver: arktypeResolver(formSchema),
 		defaultValues: initialValues,
@@ -83,7 +84,7 @@ export const CreateVolumeForm = ({ onSubmit, mode = "create", initialValues, for
 
 	return (
 		<Form {...form}>
-			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+			<form id={formId} onSubmit={form.handleSubmit(onSubmit)} className={cn("space-y-4", className)}>
 				<FormField
 					control={form.control}
 					name="name"

apps/client/app/components/layout.tsx

@@ -1,20 +1,57 @@
-import { Outlet } from "react-router";
+import { useMutation } from "@tanstack/react-query";
+import { Outlet, useNavigate } from "react-router";
+import { toast } from "sonner";
 import { cn } from "~/lib/utils";
 import { AppBreadcrumb } from "./app-breadcrumb";
+import { Button } from "./ui/button";
+import { logoutMutation } from "~/api-client/@tanstack/react-query.gen";
+import type { Route } from "./+types/layout";
+import { appContext } from "~/context";
+import { authMiddleware } from "~/middleware/auth";
+
+export const clientMiddleware = [authMiddleware];
+
+export async function clientLoader({ context }: Route.LoaderArgs) {
+	const ctx = context.get(appContext);
+	return ctx;
+}
+
+export default function Layout({ loaderData }: Route.ComponentProps) {
+	const navigate = useNavigate();
+
+	const logout = useMutation({
+		...logoutMutation(),
+		onSuccess: async () => {
+			navigate("/login", { replace: true });
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Logout failed");
+		},
+	});
 
-export default function Layout() {
 	return (
 		<div
 			className={cn(
-				"relative min-h-dvh w-full",
-				"[background-size:40px_40px]",
+				"relative min-h-dvh w-full overflow-x-hidden",
+				"[background-size:20px_20px] sm:[background-size:40px_40px]",
 				"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
 				"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
 			)}
 		>
 			<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
-			<main className="relative flex flex-col pt-8 p-4 container mx-auto">
-				<AppBreadcrumb />
+			<main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto">
+				<div className="flex items-center justify-between mb-4">
+					<AppBreadcrumb />
+					{loaderData.user && (
+						<div className="flex items-center gap-4">
+							<span className="text-sm text-muted-foreground">Welcome, {loaderData.user?.username}</span>
+							<Button variant="outline" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
+								Logout
+							</Button>
+						</div>
+					)}
+				</div>
 				<Outlet />
 			</main>
 		</div>

apps/client/app/components/ui/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "~/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

apps/client/app/context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react-router";
+import type { User } from "./lib/types";
+
+type AppContext = {
+	user: User | null;
+	hasUsers: boolean;
+};
+
+export const appContext = createContext<AppContext>({
+	user: null,
+	hasUsers: false,
+});

apps/client/app/lib/types.ts

@@ -1,5 +1,7 @@
-import type { GetVolumeResponse } from "~/api-client";
+import type { GetMeResponse, GetVolumeResponse } from "~/api-client";
 
 export type Volume = GetVolumeResponse["volume"];
 export type StatFs = GetVolumeResponse["statfs"];
 export type VolumeStatus = Volume["status"];
+
+export type User = GetMeResponse["user"];

apps/client/app/middleware/auth.ts

@@ -0,0 +1,18 @@
+import { redirect, type MiddlewareFunction } from "react-router";
+import { getMe, getStatus } from "~/api-client";
+import { appContext } from "~/context";
+
+export const authMiddleware: MiddlewareFunction = async ({ context }) => {
+	const session = await getMe();
+
+	if (!session.data?.user.id) {
+		const status = await getStatus();
+		if (!status.data?.hasUsers) {
+			throw redirect("/onboarding");
+		}
+
+		throw redirect("/login");
+	}
+
+	context.set(appContext, { user: session.data.user, hasUsers: true });
+};

apps/client/app/root.tsx

@@ -40,7 +40,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
 		<html lang="en" style={{ colorScheme: "dark" }} className="dark">
 			<head>
 				<meta charSet="utf-8" />
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 				<Meta />
 				<Links />
 			</head>

apps/client/app/routes.ts

@@ -1,5 +1,7 @@
 import { index, layout, type RouteConfig, route } from "@react-router/dev/routes";
 
 export default [
+	route("onboarding", "./routes/onboarding.tsx"),
+	route("login", "./routes/login.tsx"),
 	layout("./components/layout.tsx", [index("./routes/home.tsx"), route("volumes/:name", "./routes/details.tsx")]),
 ] satisfies RouteConfig;

apps/client/app/routes/home.tsx

@@ -60,20 +60,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 
 	return (
 		<>
-			<h1 className="text-3xl font-bold mb-0 uppercase">Ironmount</h1>
-			<h2 className="text-sm font-semibold mb-2 text-muted-foreground">
+			<h1 className="text-2xl sm:text-3xl font-bold mb-0 uppercase">Ironmount</h1>
+			<h2 className="text-xs sm:text-sm font-semibold mb-2 text-muted-foreground">
 				Create, manage, monitor, and automate your volumes with ease.
 			</h2>
-			<div className="flex items-center gap-2 mt-4 justify-between">
-				<span className="flex items-center gap-2">
+			<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-4 sm:justify-between">
+				<span className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
 					<Input
-						className="w-[180px]"
+						className="w-full sm:w-[180px]"
 						placeholder="Search volumes…"
 						value={searchQuery}
 						onChange={(e) => setSearchQuery(e.target.value)}
 					/>
 					<Select value={statusFilter} onValueChange={setStatusFilter}>
-						<SelectTrigger className="w-[180px]">
+						<SelectTrigger className="w-full sm:w-[180px]">
 							<SelectValue placeholder="All status" />
 						</SelectTrigger>
 						<SelectContent>
@@ -83,7 +83,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 						</SelectContent>
 					</Select>
 					<Select value={backendFilter} onValueChange={setBackendFilter}>
-						<SelectTrigger className="w-[180px]">
+						<SelectTrigger className="w-full sm:w-[180px]">
 							<SelectValue placeholder="All backends" />
 						</SelectTrigger>
 						<SelectContent>
@@ -93,7 +93,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 						</SelectContent>
 					</Select>
 					{(searchQuery || statusFilter || backendFilter) && (
-						<Button variant="outline" size="sm" onClick={clearFilters}>
+						<Button variant="outline" size="sm" onClick={clearFilters} className="w-full sm:w-auto">
 							<RotateCcw className="h-4 w-4 mr-2" />
 							Clear filters
 						</Button>
@@ -101,42 +101,44 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 				</span>
 				<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
 			</div>
-			<Table className="mt-4 border bg-white dark:bg-secondary">
-				<TableCaption>A list of your managed volumes.</TableCaption>
-				<TableHeader>
-					<TableRow>
-						<TableHead className="w-[100px] uppercase">Name</TableHead>
-						<TableHead className="uppercase text-left">Backend</TableHead>
-						<TableHead className="uppercase">Mountpoint</TableHead>
-						<TableHead className="uppercase text-center">Status</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{filteredVolumes.map((volume) => (
-						<TableRow
-							key={volume.name}
-							className="hover:bg-accent/50 hover:cursor-pointer"
-							onClick={() => navigate(`/volumes/${volume.name}`)}
-						>
-							<TableCell className="font-medium">{volume.name}</TableCell>
-							<TableCell>
-								<VolumeIcon backend={volume.type} />
-							</TableCell>
-							<TableCell>
-								<span className="flex items-center gap-2">
-									<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
-										{volume.path}
-									</span>
-									<Copy size={10} />
-								</span>
-							</TableCell>
-							<TableCell className="text-center">
-								<StatusDot status={volume.status} />
-							</TableCell>
+			<div className="mt-4 overflow-x-auto">
+				<Table className="border bg-white dark:bg-secondary">
+					<TableCaption>A list of your managed volumes.</TableCaption>
+					<TableHeader>
+						<TableRow>
+							<TableHead className="w-[100px] uppercase">Name</TableHead>
+							<TableHead className="uppercase text-left">Backend</TableHead>
+							<TableHead className="uppercase hidden sm:table-cell">Mountpoint</TableHead>
+							<TableHead className="uppercase text-center">Status</TableHead>
 						</TableRow>
-					))}
-				</TableBody>
-			</Table>
+					</TableHeader>
+					<TableBody>
+						{filteredVolumes.map((volume) => (
+							<TableRow
+								key={volume.name}
+								className="hover:bg-accent/50 hover:cursor-pointer"
+								onClick={() => navigate(`/volumes/${volume.name}`)}
+							>
+								<TableCell className="font-medium">{volume.name}</TableCell>
+								<TableCell>
+									<VolumeIcon backend={volume.type} />
+								</TableCell>
+								<TableCell className="hidden sm:table-cell">
+									<span className="flex items-center gap-2">
+										<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
+											{volume.path}
+										</span>
+										<Copy size={10} />
+									</span>
+								</TableCell>
+								<TableCell className="text-center">
+									<StatusDot status={volume.status} />
+								</TableCell>
+							</TableRow>
+						))}
+					</TableBody>
+				</Table>
+			</div>
 		</>
 	);
 }

apps/client/app/routes/login.tsx

@@ -0,0 +1,102 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useMutation } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { loginMutation } from "~/api-client/@tanstack/react-query.gen";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+
+const loginSchema = type({
+	username: "2<=string<=50",
+	password: "string>=1",
+});
+
+type LoginFormValues = typeof loginSchema.inferIn;
+
+export default function LoginPage() {
+	const navigate = useNavigate();
+
+	const form = useForm<LoginFormValues>({
+		resolver: arktypeResolver(loginSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+		},
+	});
+
+	const login = useMutation({
+		...loginMutation(),
+		onSuccess: async () => {
+			navigate("/");
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Login failed");
+		},
+	});
+
+	const onSubmit = (values: LoginFormValues) => {
+		login.mutate({
+			body: {
+				username: values.username.trim(),
+				password: values.password.trim(),
+			},
+		});
+	};
+
+	return (
+		<div className="min-h-screen flex items-center justify-center p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
+					<CardDescription>Sign in to your account</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="text"
+												placeholder="Enter your username"
+												disabled={login.isPending}
+												autoFocus
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input {...field} type="password" placeholder="Enter your password" disabled={login.isPending} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<Button type="submit" className="w-full" loading={login.isPending}>
+								Sign In
+							</Button>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

apps/client/app/routes/onboarding.tsx

@@ -0,0 +1,132 @@
+import { arktypeResolver } from "@hookform/resolvers/arktype";
+import { useMutation } from "@tanstack/react-query";
+import { type } from "arktype";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router";
+import { toast } from "sonner";
+import { registerMutation } from "~/api-client/@tanstack/react-query.gen";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+
+const onboardingSchema = type({
+	username: "2<=string<=50",
+	password: "string>=8",
+	confirmPassword: "string>=1",
+});
+
+type OnboardingFormValues = typeof onboardingSchema.inferIn;
+
+export default function OnboardingPage() {
+	const navigate = useNavigate();
+
+	const form = useForm<OnboardingFormValues>({
+		resolver: arktypeResolver(onboardingSchema),
+		defaultValues: {
+			username: "",
+			password: "",
+			confirmPassword: "",
+		},
+	});
+
+	const registerUser = useMutation({
+		...registerMutation(),
+		onSuccess: async () => {
+			toast.success("Admin user created successfully!");
+			navigate("/");
+		},
+		onError: (error) => {
+			console.error(error);
+			toast.error("Failed to create admin user");
+		},
+	});
+
+	const onSubmit = (values: OnboardingFormValues) => {
+		if (values.password !== values.confirmPassword) {
+			form.setError("confirmPassword", {
+				type: "manual",
+				message: "Passwords do not match",
+			});
+			return;
+		}
+
+		registerUser.mutate({
+			body: {
+				username: values.username.trim(),
+				password: values.password.trim(),
+			},
+		});
+	};
+
+	return (
+		<div className="min-h-screen flex items-center justify-center p-4">
+			<Card className="w-full max-w-md">
+				<CardHeader>
+					<CardTitle className="text-2xl font-bold">Welcome to Ironmount</CardTitle>
+					<CardDescription>Create the admin user to get started</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Form {...form}>
+						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+							<FormField
+								control={form.control}
+								name="username"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Username</FormLabel>
+										<FormControl>
+											<Input {...field} type="text" placeholder="admin" disabled={registerUser.isPending} autoFocus />
+										</FormControl>
+										<FormDescription>Choose a username for the admin account (2-50 characters).</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="password"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Password</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="password"
+												placeholder="Enter a secure password"
+												disabled={registerUser.isPending}
+											/>
+										</FormControl>
+										<FormDescription>Password must be at least 8 characters long.</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<FormField
+								control={form.control}
+								name="confirmPassword"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Confirm Password</FormLabel>
+										<FormControl>
+											<Input
+												{...field}
+												type="password"
+												placeholder="Re-enter your password"
+												disabled={registerUser.isPending}
+											/>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+							<Button type="submit" className="w-full" loading={registerUser.isPending}>
+								Create Admin User
+							</Button>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

apps/client/package.json

@@ -9,49 +9,51 @@
 		"tsc": "react-router typegen && tsc"
 	},
 	"dependencies": {
-		"@hookform/resolvers": "^5.2.1",
+		"@hookform/resolvers": "^5.2.2",
 		"@ironmount/schemas": "workspace:*",
 		"@radix-ui/react-alert-dialog": "^1.1.15",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-slot": "^1.2.3",
 		"@radix-ui/react-switch": "^1.2.6",
 		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-tooltip": "^1.2.8",
-		"@react-router/node": "^7.7.1",
-		"@react-router/serve": "^7.7.1",
-		"@tanstack/react-query": "^5.84.2",
-		"@tanstack/react-query-devtools": "^5.85.9",
+		"@react-router/node": "^7.9.3",
+		"@react-router/serve": "^7.9.3",
+		"@tanstack/react-query": "^5.90.2",
+		"@tanstack/react-query-devtools": "^5.90.2",
 		"@tanstack/react-table": "^8.21.3",
-		"arktype": "^2.1.20",
+		"arktype": "^2.1.22",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
-		"isbot": "^5.1.27",
+		"isbot": "^5.1.31",
 		"lucide-react": "^0.544.0",
 		"next-themes": "^0.4.6",
 		"prismjs": "^1.30.0",
-		"react": "^19.1.0",
-		"react-dom": "^19.1.0",
-		"react-hook-form": "^7.62.0",
-		"react-router": "^7.7.1",
-		"recharts": "2.15.4",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"react-hook-form": "^7.63.0",
+		"react-router": "^7.9.3",
+		"recharts": "3.2.1",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.3.1",
 		"yaml": "^2.8.1"
 	},
 	"devDependencies": {
-		"@react-router/dev": "^7.7.1",
-		"@tailwindcss/vite": "^4.1.4",
-		"@types/node": "^20",
+		"@react-router/dev": "^7.9.3",
+		"@tailwindcss/vite": "^4.1.14",
+		"@types/node": "^24.6.2",
 		"@types/prismjs": "^1.26.5",
-		"@types/react": "^19.1.2",
-		"@types/react-dom": "^19.1.2",
-		"tailwindcss": "^4.1.4",
-		"tw-animate-css": "^1.3.6",
-		"typescript": "^5.8.3",
-		"vite": "npm:rolldown-vite@latest",
+		"@types/react": "^19.2.0",
+		"@types/react-dom": "^19.2.0",
+		"lightningcss": "^1.30.2",
+		"tailwindcss": "^4.1.14",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^5.9.3",
+		"vite": "^7.1.9",
 		"vite-bundle-analyzer": "^1.2.3",
 		"vite-tsconfig-paths": "^5.1.4"
 	}

apps/client/react-router.config.ts

@@ -3,4 +3,7 @@ import type { Config } from "@react-router/dev/config";
 export default {
 	ssr: false,
 	buildDirectory: "dist",
+	future: {
+		v8_middleware: true,
+	},
 } satisfies Config;

apps/server/build.ts

@@ -9,5 +9,5 @@ await Bun.build({
 		identifiers: true,
 		syntax: true,
 	},
-	external: [],
+	external: ["ssh2"],
 });

apps/server/drizzle/0005_simple_alice.sql

@@ -0,0 +1,17 @@
+CREATE TABLE `sessions_table` (
+	`id` text PRIMARY KEY NOT NULL,
+	`user_id` integer NOT NULL,
+	`expires_at` integer NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
+	FOREIGN KEY (`user_id`) REFERENCES `users_table`(`id`) ON UPDATE no action ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `users_table` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`username` text NOT NULL,
+	`password_hash` text NOT NULL,
+	`created_at` integer DEFAULT (unixepoch()) NOT NULL,
+	`updated_at` integer DEFAULT (unixepoch()) NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `users_table_username_unique` ON `users_table` (`username`);

apps/server/drizzle/meta/0005_snapshot.json

@@ -0,0 +1,226 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "75f0aac0-aa63-4577-bfb6-4638a008935f",
+  "prevId": "0b087a68-fbc6-4647-a6dc-e6322a3d4ee3",
+  "tables": {
+    "sessions_table": {
+      "name": "sessions_table",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_table_user_id_users_table_id_fk": {
+          "name": "sessions_table_user_id_users_table_id_fk",
+          "tableFrom": "sessions_table",
+          "tableTo": "users_table",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_table": {
+      "name": "users_table",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        }
+      },
+      "indexes": {
+        "users_table_username_unique": {
+          "name": "users_table_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "volumes_table": {
+      "name": "volumes_table",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'unmounted'"
+        },
+        "last_error": {
+          "name": "last_error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_health_check": {
+          "name": "last_health_check",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch())"
+        },
+        "config": {
+          "name": "config",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auto_remount": {
+          "name": "auto_remount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        }
+      },
+      "indexes": {
+        "volumes_table_name_unique": {
+          "name": "volumes_table_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

apps/server/drizzle/meta/_journal.json

@@ -36,6 +36,13 @@
       "when": 1758961535488,
       "tag": "0004_wealthy_tomas",
       "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "6",
+      "when": 1759416698274,
+      "tag": "0005_simple_alice",
+      "breakpoints": true
     }
   ]
 }

apps/server/package.json

@@ -5,7 +5,8 @@
 		"dev": "bun run --watch src/index.ts",
 		"build": "rm -rf dist && bun build.ts",
 		"tsc": "tsc --noEmit",
-		"gen:migrations": "drizzle-kit generate"
+		"gen:migrations": "drizzle-kit generate",
+		"studio": "drizzle-kit studio"
 	},
 	"dependencies": {
 		"@hono/arktype-validator": "^2.0.1",
@@ -15,7 +16,7 @@
 		"arktype": "^2.1.20",
 		"dockerode": "^4.0.8",
 		"dotenv": "^17.2.1",
-		"drizzle-orm": "^0.44.4",
+		"drizzle-orm": "^0.44.6",
 		"hono": "^4.9.2",
 		"hono-openapi": "^1.1.0",
 		"http-errors-enhanced": "^3.0.2",
@@ -24,8 +25,9 @@
 		"winston": "^3.17.0"
 	},
 	"devDependencies": {
+		"@libsql/client": "^0.15.15",
 		"@types/bun": "^1.2.20",
 		"@types/dockerode": "^3.3.44",
-		"drizzle-kit": "^0.31.4"
+		"drizzle-kit": "^0.31.5"
 	}
 }

apps/server/src/core/config.ts

@@ -3,9 +3,11 @@ import "dotenv/config";
 
 const envSchema = type({
 	NODE_ENV: type.enumerated("development", "production", "test").default("development"),
+	SESSION_SECRET: "string?",
 }).pipe((s) => ({
 	__prod__: s.NODE_ENV === "production",
 	environment: s.NODE_ENV,
+	sessionSecret: s.SESSION_SECRET || "change-me-in-production-please",
 }));
 
 const parseConfig = (env: unknown) => {

apps/server/src/db/schema.ts

@@ -17,3 +17,24 @@ export const volumesTable = sqliteTable("volumes_table", {
 });
 
 export type Volume = typeof volumesTable.$inferSelect;
+
+export const usersTable = sqliteTable("users_table", {
+	id: int().primaryKey({ autoIncrement: true }),
+	username: text().notNull().unique(),
+	passwordHash: text("password_hash").notNull(),
+	createdAt: int("created_at", { mode: "timestamp" }).notNull().default(sql`(unixepoch())`),
+	updatedAt: int("updated_at", { mode: "timestamp" }).notNull().default(sql`(unixepoch())`),
+});
+
+export type User = typeof usersTable.$inferSelect;
+
+export const sessionsTable = sqliteTable("sessions_table", {
+	id: text().primaryKey(),
+	userId: int("user_id")
+		.notNull()
+		.references(() => usersTable.id, { onDelete: "cascade" }),
+	expiresAt: int("expires_at", { mode: "timestamp" }).notNull(),
+	createdAt: int("created_at", { mode: "timestamp" }).notNull().default(sql`(unixepoch())`),
+});
+
+export type Session = typeof sessionsTable.$inferSelect;

apps/server/src/index.ts

@@ -5,6 +5,8 @@ import { serveStatic } from "hono/bun";
 import { logger as honoLogger } from "hono/logger";
 import { openAPIRouteHandler } from "hono-openapi";
 import { runDbMigrations } from "./db/db";
+import { authController } from "./modules/auth/auth.controller";
+import { requireAuth } from "./modules/auth/auth.middleware";
 import { driverController } from "./modules/driver/driver.controller";
 import { startup } from "./modules/lifecycle/startup";
 import { volumeController } from "./modules/volumes/volume.controller";
@@ -32,13 +34,14 @@ export const scalarDescriptor = Scalar({
 const driver = new Hono().use(honoLogger()).route("/", driverController);
 const app = new Hono()
 	.use(honoLogger())
-	.get("*", serveStatic({ root: "./assets/frontend" }))
 	.get("healthcheck", (c) => c.json({ status: "ok" }))
-	.basePath("/api/v1")
-	.route("/volumes", volumeController);
+	.route("/api/v1/auth", authController.basePath("/api/v1"))
+	.route("/api/v1/volumes", volumeController.use(requireAuth))
+	.get("/assets/*", serveStatic({ root: "./assets/frontend" }))
+	.get("*", serveStatic({ path: "./assets/frontend/index.html" }));
 
-app.get("/openapi.json", generalDescriptor(app));
-app.get("/docs", scalarDescriptor);
+app.get("/api/v1/openapi.json", generalDescriptor(app));
+app.get("/api/v1/docs", scalarDescriptor);
 
 app.onError((err, c) => {
 	logger.error(`${c.req.url}: ${err.message}`);

apps/server/src/modules/auth/auth.controller.ts

@@ -0,0 +1,91 @@
+import { validator } from "hono-openapi";
+
+import { Hono } from "hono";
+import { deleteCookie, getCookie, setCookie } from "hono/cookie";
+import {
+	getMeDto,
+	getStatusDto,
+	loginBodySchema,
+	loginDto,
+	logoutDto,
+	registerBodySchema,
+	registerDto,
+} from "./auth.dto";
+import { authService } from "./auth.service";
+
+const COOKIE_NAME = "session_id";
+const COOKIE_OPTIONS = {
+	httpOnly: true,
+	secure: process.env.NODE_ENV === "production",
+	sameSite: "lax" as const,
+	path: "/",
+};
+
+export const authController = new Hono()
+	.post("/register", registerDto, validator("json", registerBodySchema), async (c) => {
+		const body = c.req.valid("json");
+
+		try {
+			const { user, sessionId } = await authService.register(body.username, body.password);
+
+			setCookie(c, COOKIE_NAME, sessionId, {
+				...COOKIE_OPTIONS,
+				expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
+			});
+
+			return c.json({ message: "User registered successfully", user: { id: user.id, username: user.username } }, 201);
+		} catch (error) {
+			return c.json({ message: error instanceof Error ? error.message : "Registration failed" }, 400);
+		}
+	})
+	.post("/login", loginDto, validator("json", loginBodySchema), async (c) => {
+		const body = c.req.valid("json");
+
+		try {
+			const { sessionId, user, expiresAt } = await authService.login(body.username, body.password);
+
+			setCookie(c, COOKIE_NAME, sessionId, {
+				...COOKIE_OPTIONS,
+				expires: expiresAt,
+			});
+
+			return c.json({
+				message: "Login successful",
+				user: { id: user.id, username: user.username },
+			});
+		} catch (error) {
+			return c.json({ message: error instanceof Error ? error.message : "Login failed" }, 401);
+		}
+	})
+	.post("/logout", logoutDto, async (c) => {
+		const sessionId = getCookie(c, COOKIE_NAME);
+
+		if (sessionId) {
+			await authService.logout(sessionId);
+			deleteCookie(c, COOKIE_NAME, COOKIE_OPTIONS);
+		}
+
+		return c.json({ message: "Logout successful" });
+	})
+	.get("/me", getMeDto, async (c) => {
+		const sessionId = getCookie(c, COOKIE_NAME);
+
+		if (!sessionId) {
+			return c.json({ message: "Not authenticated" }, 401);
+		}
+
+		const session = await authService.verifySession(sessionId);
+
+		if (!session) {
+			deleteCookie(c, COOKIE_NAME, COOKIE_OPTIONS);
+			return c.json({ message: "Not authenticated" }, 401);
+		}
+
+		return c.json({
+			user: session.user,
+		});
+	})
+	.get("/status", getStatusDto, async (c) => {
+		const hasUsers = await authService.hasUsers();
+		return c.json({ hasUsers });
+	});

apps/server/src/modules/auth/auth.dto.ts

@@ -0,0 +1,117 @@
+import { type } from "arktype";
+import { describeRoute, resolver } from "hono-openapi";
+
+// Validation schemas
+export const loginBodySchema = type({
+	username: "string>0",
+	password: "string>7",
+});
+
+export const registerBodySchema = type({
+	username: "string>2",
+	password: "string>7",
+});
+
+const loginResponseSchema = type({
+	message: "string",
+	user: type({
+		id: "string",
+		username: "string",
+	}),
+});
+
+export const loginDto = describeRoute({
+	description: "Login with username and password",
+	operationId: "login",
+	tags: ["Auth"],
+	responses: {
+		200: {
+			description: "Login successful",
+			content: {
+				"application/json": {
+					schema: resolver(loginResponseSchema),
+				},
+			},
+		},
+		401: {
+			description: "Invalid credentials",
+		},
+	},
+});
+
+export const registerDto = describeRoute({
+	description: "Register a new user",
+	operationId: "register",
+	tags: ["Auth"],
+	responses: {
+		201: {
+			description: "User created successfully",
+			content: {
+				"application/json": {
+					schema: resolver(loginResponseSchema),
+				},
+			},
+		},
+		400: {
+			description: "Invalid request or username already exists",
+		},
+	},
+});
+
+export const logoutDto = describeRoute({
+	description: "Logout current user",
+	operationId: "logout",
+	tags: ["Auth"],
+	responses: {
+		200: {
+			description: "Logout successful",
+			content: {
+				"application/json": {
+					schema: resolver(type({ message: "string" })),
+				},
+			},
+		},
+	},
+});
+
+export const getMeDto = describeRoute({
+	description: "Get current authenticated user",
+	operationId: "getMe",
+	tags: ["Auth"],
+	responses: {
+		200: {
+			description: "Current user information",
+			content: {
+				"application/json": {
+					schema: resolver(loginResponseSchema),
+				},
+			},
+		},
+		401: {
+			description: "Not authenticated",
+		},
+	},
+});
+
+const statusResponseSchema = type({
+	hasUsers: "boolean",
+});
+
+export const getStatusDto = describeRoute({
+	description: "Get authentication system status",
+	operationId: "getStatus",
+	tags: ["Auth"],
+	responses: {
+		200: {
+			description: "Authentication system status",
+			content: {
+				"application/json": {
+					schema: resolver(statusResponseSchema),
+				},
+			},
+		},
+	},
+});
+
+export type LoginBody = typeof loginBodySchema.infer;
+export type RegisterBody = typeof registerBodySchema.infer;

apps/server/src/modules/auth/auth.middleware.ts

@@ -0,0 +1,63 @@
+import { deleteCookie, getCookie } from "hono/cookie";
+import { createMiddleware } from "hono/factory";
+import { authService } from "./auth.service";
+
+const COOKIE_NAME = "session_id";
+const COOKIE_OPTIONS = {
+	httpOnly: true,
+	secure: process.env.NODE_ENV === "production",
+	sameSite: "lax" as const,
+	path: "/",
+};
+
+declare module "hono" {
+	interface ContextVariableMap {
+		user: {
+			id: number;
+			username: string;
+		};
+	}
+}
+
+/**
+ * Middleware to require authentication
+ * Verifies the session cookie and attaches user to context
+ */
+export const requireAuth = createMiddleware(async (c, next) => {
+	const sessionId = getCookie(c, COOKIE_NAME);
+
+	if (!sessionId) {
+		return c.json({ message: "Authentication required" }, 401);
+	}
+
+	const session = await authService.verifySession(sessionId);
+
+	if (!session) {
+		deleteCookie(c, COOKIE_NAME, COOKIE_OPTIONS);
+		return c.json({ message: "Invalid or expired session" }, 401);
+	}
+
+	c.set("user", session.user);
+
+	await next();
+});
+
+/**
+ * Middleware to optionally attach user if authenticated
+ * Does not block the request if not authenticated
+ */
+export const optionalAuth = createMiddleware(async (c, next) => {
+	const sessionId = getCookie(c, COOKIE_NAME);
+
+	if (sessionId) {
+		const session = await authService.verifySession(sessionId);
+
+		if (session) {
+			c.set("user", session.user);
+		} else {
+			deleteCookie(c, COOKIE_NAME, COOKIE_OPTIONS);
+		}
+	}
+
+	await next();
+});

apps/server/src/modules/auth/auth.service.ts

@@ -0,0 +1,139 @@
+import { eq } from "drizzle-orm";
+import { db } from "../../db/db";
+import { sessionsTable, usersTable } from "../../db/schema";
+import { logger } from "../../utils/logger";
+
+const SESSION_DURATION = 1000 * 60 * 60 * 24 * 30; // 30 days
+
+export class AuthService {
+	/**
+	 * Register a new user with username and password
+	 */
+	async register(username: string, password: string) {
+		const [existingUser] = await db.select().from(usersTable);
+
+		if (existingUser) {
+			throw new Error("Admin user already exists");
+		}
+
+		const passwordHash = await Bun.password.hash(password, {
+			algorithm: "argon2id",
+			memoryCost: 19456,
+			timeCost: 2,
+		});
+
+		const [user] = await db.insert(usersTable).values({ username, passwordHash }).returning();
+
+		if (!user) {
+			throw new Error("User registration failed");
+		}
+
+		logger.info(`User registered: ${username}`);
+		const sessionId = crypto.randomUUID();
+		const expiresAt = new Date(Date.now() + SESSION_DURATION);
+
+		await db.insert(sessionsTable).values({
+			id: sessionId,
+			userId: user.id,
+			expiresAt,
+		});
+
+		return { user: { id: user.id, username: user.username, createdAt: user.createdAt }, sessionId };
+	}
+
+	/**
+	 * Login user with username and password
+	 */
+	async login(username: string, password: string) {
+		const [user] = await db.select().from(usersTable).where(eq(usersTable.username, username));
+
+		if (!user) {
+			throw new Error("Invalid credentials");
+		}
+
+		const isValid = await Bun.password.verify(password, user.passwordHash);
+
+		if (!isValid) {
+			throw new Error("Invalid credentials");
+		}
+
+		const sessionId = crypto.randomUUID();
+		const expiresAt = new Date(Date.now() + SESSION_DURATION);
+
+		await db.insert(sessionsTable).values({
+			id: sessionId,
+			userId: user.id,
+			expiresAt,
+		});
+
+		logger.info(`User logged in: ${username}`);
+
+		return {
+			sessionId,
+			user: { id: user.id, username: user.username },
+			expiresAt,
+		};
+	}
+
+	/**
+	 * Logout user by deleting their session
+	 */
+	async logout(sessionId: string) {
+		await db.delete(sessionsTable).where(eq(sessionsTable.id, sessionId));
+		logger.info(`User logged out: session ${sessionId}`);
+	}
+
+	/**
+	 * Verify a session and return the associated user
+	 */
+	async verifySession(sessionId: string) {
+		const [session] = await db
+			.select({
+				session: sessionsTable,
+				user: usersTable,
+			})
+			.from(sessionsTable)
+			.innerJoin(usersTable, eq(sessionsTable.userId, usersTable.id))
+			.where(eq(sessionsTable.id, sessionId));
+
+		if (!session) {
+			return null;
+		}
+
+		if (session.session.expiresAt < new Date()) {
+			await db.delete(sessionsTable).where(eq(sessionsTable.id, sessionId));
+			return null;
+		}
+
+		return {
+			user: {
+				id: session.user.id,
+				username: session.user.username,
+			},
+			session: {
+				id: session.session.id,
+				expiresAt: session.session.expiresAt,
+			},
+		};
+	}
+
+	/**
+	 * Clean up expired sessions
+	 */
+	async cleanupExpiredSessions() {
+		const result = await db.delete(sessionsTable).where(eq(sessionsTable.expiresAt, new Date())).returning();
+		if (result.length > 0) {
+			logger.info(`Cleaned up ${result.length} expired sessions`);
+		}
+	}
+
+	/**
+	 * Check if any users exist in the system
+	 */
+	async hasUsers(): Promise<boolean> {
+		const [user] = await db.select({ id: usersTable.id }).from(usersTable).limit(1);
+		return !!user;
+	}
+}
+
+export const authService = new AuthService();

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "ironmount",
 	"private": true,
-	"packageManager": "bun@1.2.15",
+	"packageManager": "bun@1.2.23",
 	"scripts": {
 		"dev": "turbo dev",
 		"tsc": "turbo run tsc",
@@ -16,6 +16,9 @@
 	],
 	"devDependencies": {
 		"@hey-api/openapi-ts": "^0.80.17",
-		"turbo": "^2.5.6"
-	}
+		"turbo": "^2.5.8"
+	},
+	"trustedDependencies": [
+		"@tailwindcss/oxide"
+	]
 }