finished implementation

Author: AlemTuzlak

app/components/app-sidebar.tsx

@@ -170,7 +170,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
 				<NavSecondary items={data.navSecondary} className="mt-auto" />
 			</SidebarContent>
 			<SidebarFooter>
-				<NavUser user={data.user} />
+				<NavUser />
 			</SidebarFooter>
 		</Sidebar>
 	)

app/components/nav-user.tsx

@@ -1,6 +1,5 @@
 import { IconCreditCard, IconDotsVertical, IconLogout, IconNotification, IconUserCircle } from "@tabler/icons-react"
 
-import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar"
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -11,18 +10,11 @@ import {
 	DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu"
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "~/components/ui/sidebar"
+import { useDashboardData } from "~/hooks/use-dashboard-data"
 
-export function NavUser({
-	user,
-}: {
-	user: {
-		name: string
-		email: string
-		avatar: string
-	}
-}) {
+export function NavUser() {
 	const { isMobile } = useSidebar()
-
+	const { user } = useDashboardData()
 	return (
 		<SidebarMenu>
 			<SidebarMenuItem>
@@ -32,12 +24,7 @@ export function NavUser({
 							size="lg"
 							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
 						>
-							<Avatar className="h-8 w-8 rounded-lg grayscale">
-								<AvatarImage src={user.avatar} alt={user.name} />
-								<AvatarFallback className="rounded-lg">CN</AvatarFallback>
-							</Avatar>
 							<div className="grid flex-1 text-left text-sm leading-tight">
-								<span className="truncate font-medium">{user.name}</span>
 								<span className="truncate text-muted-foreground text-xs">{user.email}</span>
 							</div>
 							<IconDotsVertical className="ml-auto size-4" />
@@ -51,12 +38,7 @@ export function NavUser({
 					>
 						<DropdownMenuLabel className="p-0 font-normal">
 							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-								<Avatar className="h-8 w-8 rounded-lg">
-									<AvatarImage src={user.avatar} alt={user.name} />
-									<AvatarFallback className="rounded-lg">CN</AvatarFallback>
-								</Avatar>
 								<div className="grid flex-1 text-left text-sm leading-tight">
-									<span className="truncate font-medium">{user.name}</span>
 									<span className="truncate text-muted-foreground text-xs">{user.email}</span>
 								</div>
 							</div>

app/components/site-header.tsx

@@ -1,3 +1,4 @@
+import { Form, href } from "react-router"
 import { Button } from "~/components/ui/button"
 import { Separator } from "~/components/ui/separator"
 import { SidebarTrigger } from "~/components/ui/sidebar"
@@ -10,16 +11,11 @@ export function SiteHeader() {
 				<Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
 				<h1 className="font-medium text-base">Documents</h1>
 				<div className="ml-auto flex items-center gap-2">
-					<Button variant="ghost" asChild size="sm" className="hidden sm:flex">
-						<a
-							href="https://github.com/shadcn-ui/ui/tree/main/apps/v4/app/(examples)/dashboard"
-							rel="noopener noreferrer"
-							target="_blank"
-							className="dark:text-foreground"
-						>
-							GitHub
-						</a>
-					</Button>
+					<Form method="POST" action={href("/logout")}>
+						<Button variant="ghost" size="sm" className="hidden sm:flex">
+							Logout
+						</Button>
+					</Form>
 				</div>
 			</div>
 		</header>

app/domain/auth/auth.server.ts

@@ -0,0 +1,25 @@
+import { createCookieSessionStorage, href, redirect, type unstable_MiddlewareFunction } from "react-router"
+import { unstable_createSessionMiddleware as sessionMiddleware } from "remix-utils/middleware/session"
+
+const authSessionStorage = createCookieSessionStorage({
+	cookie: {
+		name: "session",
+		httpOnly: true,
+		sameSite: "lax",
+		path: "/",
+		maxAge: 60 * 60 * 24 * 7, // 1 week
+	},
+})
+
+const [authSessionMiddleware, getAuthSessionFromContext] = sessionMiddleware(authSessionStorage)
+
+export { authSessionMiddleware, getAuthSessionFromContext }
+
+export const requireUser: unstable_MiddlewareFunction = ({ context }, next) => {
+	const authSession = getAuthSessionFromContext(context)
+	const session = authSession.get("user")
+	if (!session) {
+		throw redirect(href("/login"))
+	}
+	return next()
+}

app/domain/auth/login.schema.ts

@@ -0,0 +1,9 @@
+import z from "zod/v4"
+
+export const loginFormSchema = z.object({
+	email: z.email(),
+	password: z.string().min(8).max(100),
+	redirectTo: z.string().optional(),
+})
+
+export type UserLoginData = z.infer<typeof loginFormSchema>

app/domain/auth/register.schema.ts

@@ -0,0 +1,14 @@
+import z from "zod/v4"
+
+export const registerFormSchema = z
+	.object({
+		email: z.email(),
+		password: z.string().min(8).max(100),
+		confirmPassword: z.string().min(8).max(100),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Passwords don't match",
+		path: ["confirmPassword"],
+	})
+
+export type NewUserData = z.infer<typeof registerFormSchema>

app/domain/auth/user.server.ts

@@ -1,9 +1,95 @@
-export async function registerUser() {
-	return null
+import { hash } from "node:crypto"
+import { getAuthSession } from "@domain/utils/global-context"
+import { db } from "~/db/db.server"
+import type { UserLoginData } from "./login.schema"
+import type { NewUserData } from "./register.schema"
+
+export async function getUserByEmail(email: string) {
+	const user = await db.user.findUnique({
+		where: { email },
+		select: {
+			id: true,
+			email: true,
+		},
+	})
+	return user
 }
 
-export async function loginUser() {
-	return null
+export async function registerUser(userData: NewUserData) {
+	const existingUser = await getUserByEmail(userData.email)
+	// User already exists, return an error
+	if (existingUser) {
+		return {
+			errors: {
+				email: {
+					message: "Email already exists",
+					type: "custom",
+				},
+			},
+		}
+	}
+
+	// Create a new user
+	const newUser = await db.user.create({
+		data: {
+			email: userData.email,
+			password: {
+				create: {
+					hash: hash("sha256", userData.password),
+				},
+			},
+		},
+	})
+
+	const authSession = getAuthSession()
+	authSession.set("user", {
+		id: newUser.id,
+		email: newUser.email,
+	})
+	return {
+		errors: null,
+	}
+}
+
+export async function loginUser(loginData: UserLoginData) {
+	const userExists = await getUserByEmail(loginData.email)
+	if (!userExists) {
+		return {
+			errors: {
+				email: {
+					message: "This email does not exist",
+				},
+			},
+		}
+	}
+
+	const loggedInUser = await db.user.findUnique({
+		where: {
+			email: loginData.email,
+			password: {
+				hash: hash("sha256", loginData.password),
+			},
+		},
+	})
+
+	if (!loggedInUser) {
+		return {
+			errors: {
+				email: {
+					message: "This password is incorrect",
+				},
+			},
+		}
+	}
+
+	const authSession = getAuthSession()
+	authSession.set("user", {
+		email: loggedInUser.email,
+		id: loggedInUser.id,
+	})
+	return {
+		errors: null,
+	}
 }
 
 export async function signoutUser() {

app/domain/utils/global-context.ts

@@ -0,0 +1,57 @@
+import { AsyncLocalStorage } from "node:async_hooks"
+import { getAuthSessionFromContext } from "@domain/auth/auth.server"
+import { getUserByEmail } from "@domain/auth/user.server"
+import type { User } from "@prisma-generated/client"
+import type { Session, unstable_MiddlewareFunction } from "react-router"
+
+type GlobalStorage = {
+	authSession: Session
+	user: Pick<User, "email" | "id"> | null
+}
+
+const globalStorage = new AsyncLocalStorage<GlobalStorage>()
+
+const getGlobalStorage = () => {
+	const storage = globalStorage.getStore()
+
+	if (!storage) {
+		throw new Error("Storage unavailable")
+	}
+
+	return storage
+}
+
+export const getAuthSession = () => {
+	const storage = getGlobalStorage()
+	return storage.authSession
+}
+
+export const getOptionalUser = () => {
+	const storage = getGlobalStorage()
+	return storage.user
+}
+
+export const getUser = () => {
+	const user = getOptionalUser()
+	if (!user) {
+		throw new Error("User should be available here")
+	}
+	return user
+}
+
+export const globalStorageMiddleware: unstable_MiddlewareFunction = async ({ context }, next) => {
+	const authSession = getAuthSessionFromContext(context)
+	const userData = authSession.get("user")
+	const user = userData?.email ? await getUserByEmail(userData.email) : null
+	return new Promise((resolve) => {
+		globalStorage.run(
+			{
+				authSession,
+				user,
+			},
+			() => {
+				resolve(next())
+			}
+		)
+	})
+}

app/hooks/use-dashboard-data.ts

@@ -0,0 +1,10 @@
+import { useRouteLoaderData } from "react-router"
+import type { Route } from "../routes/+types/dashboard"
+
+export function useDashboardData() {
+	const match = useRouteLoaderData<Route.ComponentProps["loaderData"]>("routes/dashboard")
+	if (!match) {
+		throw new Error("this dashboard data does not exist on the current route")
+	}
+	return match
+}

app/root.tsx

@@ -1,5 +1,7 @@
+import { authSessionMiddleware } from "@domain/auth/auth.server"
+import { getOptionalUser, globalStorageMiddleware } from "@domain/utils/global-context"
 import { useTranslation } from "react-i18next"
-import type { LinksFunction } from "react-router"
+import type { LinksFunction, unstable_MiddlewareFunction } from "react-router"
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration, useRouteError } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
@@ -9,8 +11,9 @@ import tailwindcss from "./tailwind.css?url"
 
 export async function loader({ context, request }: Route.LoaderArgs) {
 	const { lang, clientEnv } = context.get(globalAppContext)
+	const user = getOptionalUser()
 	const hints = getHints(request)
-	return { lang, clientEnv, hints }
+	return { lang, clientEnv, hints, user }
 }
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: tailwindcss }]
@@ -84,3 +87,5 @@ export const ErrorBoundary = () => {
 		</div>
 	)
 }
+// @ts-expect-error
+export const unstable_middleware: unstable_MiddlewareFunction[] = [authSessionMiddleware, globalStorageMiddleware]