UI

Author: itsmeakhil

apps/web/src/app/account/plan/page.tsx

@@ -1,33 +1,13 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { Loader2 } from 'lucide-react'
-import { backendFetch } from '@/lib/backend-auth'
-import { PlanCard, type PlanProfile } from '@/components/plan-card'
+import { PlanCard } from '@/components/plan-card'
+import { useAccountProfile } from '@/lib/use-account-profile'
 
 export default function AccountPlanPage() {
   const t = useTranslations('AccountPlan')
-  const router = useRouter()
-  const [profile, setProfile] = useState<PlanProfile | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    backendFetch('/api/backend/auth/me')
-      .then(async (res) => {
-        if (cancelled) return
-        if (!res.ok) {
-          router.replace('/login?next=/account/plan')
-          return
-        }
-        setProfile(await res.json())
-      })
-      .catch(() => {
-        if (!cancelled) router.replace('/login?next=/account/plan')
-      })
-    return () => { cancelled = true }
-  }, [router])
+  const { profile } = useAccountProfile('/account/plan')
 
   if (!profile) {
     return (

apps/web/src/app/dashboard/page.tsx

@@ -1,36 +1,16 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
 import { useTranslations } from 'next-intl'
 import { Loader2 } from 'lucide-react'
 import { Header } from '@/components/header'
 import { Footer } from '@/components/footer'
-import { backendFetch } from '@/lib/backend-auth'
-import { PlanCard, type PlanProfile } from '@/components/plan-card'
+import { PlanCard } from '@/components/plan-card'
 import { PasskeysManager } from '@/components/passkeys-manager'
+import { useAccountProfile } from '@/lib/use-account-profile'
 
 export default function DashboardPage() {
   const t = useTranslations('Dashboard')
-  const router = useRouter()
-  const [profile, setProfile] = useState<PlanProfile | null>(null)
-
-  useEffect(() => {
-    let cancelled = false
-    backendFetch('/api/backend/auth/me')
-      .then(async (res) => {
-        if (cancelled) return
-        if (!res.ok) {
-          router.replace('/login?next=/dashboard')
-          return
-        }
-        setProfile(await res.json())
-      })
-      .catch(() => {
-        if (!cancelled) router.replace('/login?next=/dashboard')
-      })
-    return () => { cancelled = true }
-  }, [router])
+  const { profile } = useAccountProfile('/dashboard')
 
   return (
     <>

apps/web/src/lib/use-account-profile.ts

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import useAuth from '@/utils/useAuth'
+import { backendFetch, ensureBackendSession } from '@/lib/backend-auth'
+import type { PlanProfile } from '@/components/plan-card'
+
+/**
+ * Loads the signed-in user's account profile for authed pages (dashboard, plan).
+ *
+ * Right after OAuth sign-in, LoginRedirectIfAuthed navigates here on the
+ * `onAuthStateChanged` event — which can fire *before* login-form's
+ * `establishBackendSession` has set the API cookie. Calling `ensureBackendSession`
+ * first mints/verifies that cookie from the Firebase user, so `/auth/me` doesn't
+ * 401 → forceLogout → bounce the user straight back to /login.
+ */
+export function useAccountProfile(nextPath: string): { profile: PlanProfile | null } {
+  const { user, loading } = useAuth(false)
+  const router = useRouter()
+  const [profile, setProfile] = useState<PlanProfile | null>(null)
+
+  useEffect(() => {
+    if (loading) return
+    const toLogin = () => router.replace(`/login?next=${encodeURIComponent(nextPath)}`)
+    if (!user) {
+      toLogin()
+      return
+    }
+    let cancelled = false
+    ;(async () => {
+      try {
+        await ensureBackendSession(user)
+        const res = await backendFetch('/api/backend/auth/me')
+        if (cancelled) return
+        if (!res.ok) {
+          toLogin()
+          return
+        }
+        setProfile(await res.json())
+      } catch {
+        if (!cancelled) toLogin()
+      }
+    })()
+    return () => { cancelled = true }
+  }, [user, loading, router, nextPath])
+
+  return { profile }
+}