fix: root directory creation

Co-authored-by: Ona <no-reply@ona.com>

packages/web/src/auth-client.ts

@@ -1,12 +0,0 @@
-import {
-	convexClient,
-	crossDomainClient,
-} from "@convex-dev/better-auth/client/plugins"
-import { createAuthClient } from "better-auth/react"
-
-export type AuthErrorCode = keyof typeof authClient.$ERROR_CODES
-
-export const authClient = createAuthClient({
-	baseURL: process.env.BUN_PUBLIC_CONVEX_SITE_URL,
-	plugins: [convexClient(), crossDomainClient()],
-})

packages/web/src/auth.ts

@@ -0,0 +1,27 @@
+import {
+	convexClient,
+	crossDomainClient,
+} from "@convex-dev/better-auth/client/plugins"
+import { createAuthClient } from "better-auth/react"
+import { createContext, useContext } from "react"
+
+export type AuthErrorCode = keyof typeof authClient.$ERROR_CODES
+
+export const authClient = createAuthClient({
+	baseURL: process.env.BUN_PUBLIC_CONVEX_SITE_URL,
+	plugins: [convexClient(), crossDomainClient()],
+})
+
+export type Session = NonNullable<
+	Awaited<ReturnType<typeof authClient.useSession>>["data"]
+>
+
+export const SessionContext = createContext<Session | null>(null)
+
+export function useSession() {
+	const context = useContext(SessionContext)
+	if (!context) {
+		throw new Error("useSession must be used within a SessionProvider")
+	}
+	return context
+}

packages/web/src/routes/__root.tsx

@@ -7,7 +7,7 @@ import { toast } from "sonner"
 import { Toaster } from "@/components/ui/sonner"
 import { formatError } from "@/lib/error"
 import { useKeyboardModifierListener } from "@/lib/keyboard"
-import { authClient } from "../auth-client"
+import { authClient } from "../auth"
 
 export const Route = createRootRoute({
 	component: RootLayout,

packages/web/src/routes/_authenticated.tsx

@@ -11,7 +11,7 @@ import {
 	useConvexAuth,
 } from "convex/react"
 import { useEffect, useState } from "react"
-import { authClient } from "@/auth-client"
+import { authClient, SessionContext } from "@/auth"
 import { LoadingSpinner } from "@/components/ui/loading-spinner"
 
 export const Route = createFileRoute("/_authenticated")({
@@ -21,7 +21,7 @@ export const Route = createFileRoute("/_authenticated")({
 function AuthenticatedLayout() {
 	const { search } = useLocation()
 	const { isLoading } = useConvexAuth()
-	const { isPending: sessionLoading } = authClient.useSession()
+	const { data: session, isPending: sessionLoading } = authClient.useSession()
 	const [hasProcessedAuth, setHasProcessedAuth] = useState(false)
 
 	// Check if we're in the middle of processing an auth code
@@ -50,6 +50,11 @@ function AuthenticatedLayout() {
 	return (
 		<>
 			<Authenticated>
+				{session ? (
+					<SessionContext value={session}>
+						<Outlet />
+					</SessionContext>
+				) : null}
 				<Outlet />
 			</Authenticated>
 			<Unauthenticated>

packages/web/src/routes/_authenticated/_sidebar-layout.tsx

@@ -16,7 +16,6 @@ function RouteComponent() {
 					<Outlet />
 				</SidebarInset>
 			</div>
-			<Toaster />
 		</SidebarProvider>
 	)
 }

packages/web/src/routes/sign-up.tsx

@@ -19,7 +19,7 @@ import {
 	FieldLabel,
 } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
-import { type AuthErrorCode, authClient } from "../auth-client"
+import { type AuthErrorCode, authClient } from "../auth"
 
 export const Route = createFileRoute("/sign-up")({
 	component: SignupPage,
@@ -145,8 +145,6 @@ function SignupForm() {
 		passwordFieldError = "Passwords do not match"
 	}
 
-	console.log({ passwordFieldError })
-
 	return (
 		<form onSubmit={handleSubmit}>
 			<FieldGroup>