provide separate auth context for dashbaord

apps/web/app/(org)/dashboard/layout.tsx

@@ -1,6 +1,9 @@
 import { getCurrentUser } from "@cap/database/auth/session";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { AuthContextProvider } from "@/app/Layout/AuthContext";
+import { resolveCurrentUser } from "@/app/Layout/current-user";
+import { runPromise } from "@/lib/server";
 import DashboardInner from "./_components/DashboardInner";
 import MobileTab from "./_components/MobileTab";
 import DesktopNav from "./_components/Navbar/Desktop";
@@ -23,7 +26,6 @@ export default async function DashboardLayout({
 	children: React.ReactNode;
 }) {
 	const user = await getCurrentUser();
-
 	if (!user) redirect("/login");
 
 	if (!user.name || user.name.length === 0) {
@@ -73,29 +75,31 @@ export default async function DashboardLayout({
 	const referClicked = (await cookies()).get("referClicked")?.value ?? "false";
 
 	return (
-		<UploadingProvider>
-			<DashboardContexts
-				organizationSettings={organizationSettings}
-				userCapsCount={userCapsCount}
-				organizationData={organizationSelect}
-				activeOrganization={activeOrganization || null}
-				spacesData={spacesData}
-				isSubscribed={isSubscribed}
-				initialTheme={theme as "light" | "dark"}
-				initialSidebarCollapsed={sidebar === "true"}
-				anyNewNotifications={anyNewNotifications}
-				userPreferences={userPreferences}
-				referClicked={referClicked === "true"}
-			>
-				<div className="bg-gray-2 dashboard-grid">
-					<DesktopNav />
-					<div className="flex h-full [grid-area:main] focus:outline-none">
-						<MobileNav />
-						<DashboardInner>{children}</DashboardInner>
+		<AuthContextProvider user={runPromise(resolveCurrentUser)}>
+			<UploadingProvider>
+				<DashboardContexts
+					organizationSettings={organizationSettings}
+					userCapsCount={userCapsCount}
+					organizationData={organizationSelect}
+					activeOrganization={activeOrganization || null}
+					spacesData={spacesData}
+					isSubscribed={isSubscribed}
+					initialTheme={theme as "light" | "dark"}
+					initialSidebarCollapsed={sidebar === "true"}
+					anyNewNotifications={anyNewNotifications}
+					userPreferences={userPreferences}
+					referClicked={referClicked === "true"}
+				>
+					<div className="bg-gray-2 dashboard-grid">
+						<DesktopNav />
+						<div className="flex h-full [grid-area:main] focus:outline-none">
+							<MobileNav />
+							<DashboardInner>{children}</DashboardInner>
+						</div>
+						<MobileTab />
 					</div>
-					<MobileTab />
-				</div>
-			</DashboardContexts>
-		</UploadingProvider>
+				</DashboardContexts>
+			</UploadingProvider>
+		</AuthContextProvider>
 	);
 }

apps/web/app/(org)/verify-otp/form.tsx

@@ -8,7 +8,7 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { signIn } from "next-auth/react";
-import { useEffect, useRef, useState } from "react";
+import { startTransition, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
 export function VerifyOTPForm({
@@ -86,7 +86,7 @@ export function VerifyOTPForm({
 				throw "Invalid code. Please try again.";
 			}
 		},
-		onSuccess: () => {
+		onSuccess: async () => {
 			router.refresh();
 			router.replace(next || "/dashboard");
 		},

apps/web/app/Layout/current-user.ts

@@ -0,0 +1,27 @@
+import { getCurrentUser } from "@cap/database/auth/session";
+import { userIsPro } from "@cap/utils";
+import { ImageUploads } from "@cap/web-backend";
+import { Effect } from "effect";
+
+export const resolveCurrentUser = Effect.gen(function* () {
+	const imageUploads = yield* ImageUploads;
+
+	return yield* Effect.promise(() => getCurrentUser()).pipe(
+		Effect.flatMap(
+			Effect.fn(function* (u) {
+				if (!u) return null;
+				return {
+					id: u.id,
+					name: u.name,
+					lastName: u.lastName,
+					defaultOrgId: u.defaultOrgId,
+					email: u.email,
+					imageUrl: u.image
+						? yield* imageUploads.resolveImageUrl(u.image)
+						: null,
+					isPro: userIsPro(u),
+				};
+			}),
+		),
+	);
+});

apps/web/app/layout.tsx

@@ -16,6 +16,7 @@ import { runPromise } from "@/lib/server";
 import { getBootstrapData } from "@/utils/getBootstrapData";
 import { PublicEnvContext } from "@/utils/public-env";
 import { AuthContextProvider } from "./Layout/AuthContext";
+import { resolveCurrentUser } from "./Layout/current-user";
 import { GTag } from "./Layout/GTag";
 import { MetaPixel } from "./Layout/MetaPixel";
 import { PosthogIdentify } from "./Layout/PosthogIdentify";
@@ -82,27 +83,7 @@ export const dynamic = "force-dynamic";
 
 export default ({ children }: PropsWithChildren) =>
 	Effect.gen(function* () {
-		const imageUploads = yield* ImageUploads;
 		const bootstrapData = yield* Effect.promise(getBootstrapData);
-		const userPromise = Effect.promise(getCurrentUser).pipe(
-			Effect.flatMap(
-				Effect.fn(function* (u) {
-					if (!u) return null;
-					return {
-						id: u.id,
-						name: u.name,
-						lastName: u.lastName,
-						defaultOrgId: u.defaultOrgId,
-						email: u.email,
-						imageUrl: u.image
-							? yield* imageUploads.resolveImageUrl(u.image)
-							: null,
-						isPro: userIsPro(u),
-					};
-				}),
-			),
-			runPromise,
-		);
 
 		return (
 			<html className={defaultFont.className} lang="en">
@@ -136,7 +117,7 @@ export default ({ children }: PropsWithChildren) =>
 					/>
 					<TooltipPrimitive.Provider>
 						<PostHogProvider bootstrapData={bootstrapData}>
-							<AuthContextProvider user={userPromise}>
+							<AuthContextProvider user={runPromise(resolveCurrentUser)}>
 								<SessionProvider>
 									<StripeContextProvider
 										plans={

apps/web/app/s/[videoId]/page.tsx

@@ -42,13 +42,13 @@ import {
 } from "@/app/(org)/dashboard/dashboard-data";
 import { createNotification } from "@/lib/Notification";
 import * as EffectRuntime from "@/lib/server";
+import { runPromise } from "@/lib/server";
 import { transcribeVideo } from "@/lib/transcribe";
 import { optionFromTOrFirst } from "@/utils/effect";
 import { isAiGenerationEnabled } from "@/utils/flags";
 import { PasswordOverlay } from "./_components/PasswordOverlay";
 import { ShareHeader } from "./_components/ShareHeader";
 import { Share } from "./Share";
-import { runPromise } from "@/lib/server";
 
 // Helper function to fetch shared spaces data for a video
 async function getSharedSpacesForVideo(videoId: Video.VideoId) {