@woodsportal/hubspot-kit 1.0.41-dev.4 → 1.0.41-dev.6

package/templates/scaffold/auth/_shared/src/portal/mount-portal.tsx

@@ -0,0 +1,59 @@
+import { createRoot } from 'react-dom/client'
+import type { AnyRouter } from '@tanstack/react-router'
+
+import { configureWoodsPortalSdk } from '@/integrations/configure-woodsportal-sdk'
+import { syncSdkHubContextFromRuntime } from '@/data/sync-sdk-hub-context'
+import { App } from '@/app'
+import { getRouter } from '@/integrations/tanstack-router/router'
+
+export type MountPortalOptions = {
+  includeGlobalStyles?: boolean
+  skipRuntimeCss?: boolean
+  skipAppRender?: boolean
+}
+
+let portalRouter: AnyRouter | null = null
+
+/** Lazy router — created after optional SSO URL normalization. */
+export function getPortalRouter(): AnyRouter {
+  if (!portalRouter) {
+    portalRouter = getRouter()
+  }
+  return portalRouter
+}
+
+/** @deprecated Prefer getPortalRouter() after mount/bootstrap. */
+export const router = new Proxy({} as AnyRouter, {
+  get(_target, prop) {
+    return Reflect.get(getPortalRouter(), prop)
+  },
+})
+
+/** Mount the portal into `#app` with SDK bootstrap and router. */
+export async function mountPortal(options: MountPortalOptions = {}) {
+  const { skipAppRender = false } = options
+
+  syncSdkHubContextFromRuntime()
+  configureWoodsPortalSdk()
+
+  // WPHS_AUTH_SSO
+  const { clearLegacySsoCallbackInFlight, ensureSsoCallbackRoute } = await import(
+    '@/features/auth/sso-callback'
+  )
+  clearLegacySsoCallbackInFlight()
+  ensureSsoCallbackRoute()
+  // /WPHS_AUTH_SSO
+
+  const activeRouter = getPortalRouter()
+
+  if (skipAppRender) {
+    return
+  }
+
+  const rootElement = document.getElementById('app')
+  if (!rootElement) {
+    return
+  }
+
+  createRoot(rootElement).render(<App router={activeRouter} />)
+}

package/templates/scaffold/auth/_shared/src/routeTree.gen.ts

@@ -0,0 +1,134 @@
+/* eslint-disable */
+// @ts-nocheck
+// TanStack Router generated route tree (starter tier). Regenerate after adding routes.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as UnauthorizedRouteImport } from './routes/unauthorized'
+import { Route as GuideRouteImport } from './routes/guide'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as AuthLoginRouteImport } from './routes/_auth/login'
+import { Route as AppPortalRouteImport } from './routes/_app/portal'
+
+const UnauthorizedRoute = UnauthorizedRouteImport.update({
+  id: '/unauthorized',
+  path: '/unauthorized',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const GuideRoute = GuideRouteImport.update({
+  id: '/guide',
+  path: '/guide',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRoute = AuthLoginRouteImport.update({
+  id: '/_auth/login',
+  path: '/login',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AppPortalRoute = AppPortalRouteImport.update({
+  id: '/_app/portal',
+  path: '/portal',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/_auth/login': typeof AuthLoginRoute
+  '/_app/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/guide' | '/login' | '/portal' | '/unauthorized'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/guide' | '/login' | '/portal' | '/unauthorized'
+  id: '__root__' | '/' | '/guide' | '/_auth/login' | '/_app/portal' | '/unauthorized'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GuideRoute: typeof GuideRoute
+  AuthLoginRoute: typeof AuthLoginRoute
+  AppPortalRoute: typeof AppPortalRoute
+  UnauthorizedRoute: typeof UnauthorizedRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/unauthorized': {
+      id: '/unauthorized'
+      path: '/unauthorized'
+      fullPath: '/unauthorized'
+      preLoaderRoute: typeof UnauthorizedRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/guide': {
+      id: '/guide'
+      path: '/guide'
+      fullPath: '/guide'
+      preLoaderRoute: typeof GuideRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/login': {
+      id: '/_auth/login'
+      path: '/login'
+      fullPath: '/login'
+      preLoaderRoute: typeof AuthLoginRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/portal': {
+      id: '/_app/portal'
+      path: '/portal'
+      fullPath: '/portal'
+      preLoaderRoute: typeof AppPortalRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute,
+  GuideRoute,
+  AuthLoginRoute,
+  AppPortalRoute,
+  UnauthorizedRoute,
+}
+
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/scaffold/auth/_shared/src/routes/__root.tsx

@@ -0,0 +1,12 @@
+import { createRootRouteWithContext } from '@tanstack/react-router'
+
+import AppLayoutWrapper from '@/components/Layouts/AppLayoutWrapper'
+import { Provider } from '@/integrations/tanstack-query/root-provider'
+
+export const Route = createRootRouteWithContext()({
+  component: () => (
+    <Provider>
+      <AppLayoutWrapper />
+    </Provider>
+  ),
+})

package/templates/scaffold/auth/_shared/src/routes/_app/portal.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterProtectedPage } from '@/features/starter/components/starter-protected-page'
+
+export const Route = createFileRoute('/_app/portal')({
+  component: StarterProtectedPage,
+  beforeLoad: () => ({
+    layout: 'MainLayout' as const,
+    requiresAuth: true,
+  }),
+})

package/templates/scaffold/auth/_shared/src/routes/_auth/login.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterLogin } from '@/features/auth/components/starter-login'
+
+export const Route = createFileRoute('/_auth/login')({
+  component: StarterLogin,
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/templates/scaffold/auth/_shared/src/routes/guide.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { StarterGuidePage } from '@/features/starter/components/starter-guide-page'
+
+export const Route = createFileRoute('/guide')({
+  component: StarterGuidePage,
+  beforeLoad: () => ({
+    layout: 'MainLayout' as const,
+  }),
+})

package/templates/scaffold/auth/_shared/src/routes/index.tsx

@@ -0,0 +1,8 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+import { Routes } from '@/config/routes'
+
+export const Route = createFileRoute('/')({
+  beforeLoad: () => {
+    throw redirect({ to: Routes.guide })
+  },
+})

package/templates/scaffold/auth/_shared/src/routes/unauthorized.tsx

@@ -0,0 +1,50 @@
+import { createFileRoute, useNavigate, useRouter } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { Button } from '@/components/ui/Button'
+import { Routes } from '@/config/routes'
+import { readPersistedAuthError, WP_STORAGE_KEYS } from 'woodsportal-client-sdk'
+import { clearClientAuthSession } from '@/features/auth/clear-client-auth-session'
+import { isHubSpotCmsEditor } from '@/hubspot/is-cms-editor'
+
+function Unauthorized() {
+  const router = useRouter()
+  const navigate = useNavigate()
+  const inCmsEditor = isHubSpotCmsEditor()
+  const authError = readPersistedAuthError()
+
+  useEffect(() => {
+    if (authError != null) {
+      clearClientAuthSession()
+    } else if (!inCmsEditor) {
+      router.navigate({ to: Routes.guide })
+    }
+  }, [authError, inCmsEditor, router])
+
+  useEffect(() => {
+    return () => {
+      sessionStorage.removeItem(WP_STORAGE_KEYS.c.auth.err)
+    }
+  }, [])
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 text-center shadow-sm">
+        <h1 className="mb-2 text-xl font-semibold">401 Unauthorized</h1>
+        <p className="mb-6 text-sm text-gray-600">
+          {authError?.errorMessage ??
+            'Your session may have expired. Please sign in again to continue.'}
+        </p>
+        <Button className="w-full" onClick={() => navigate({ to: Routes.login })}>
+          Go to login
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/unauthorized')({
+  component: Unauthorized,
+  beforeLoad: () => ({
+    layout: 'UnauthorizedLayout' as const,
+  }),
+})

package/templates/scaffold/auth/_shared/src/utils/ValidationSchema.ts

@@ -0,0 +1 @@
+export { isProtectedHashPath as skipCurrentPublicPath } from '@/features/auth/auth-route-paths'

package/templates/scaffold/auth/_shared/src/utils/cookie.ts

@@ -0,0 +1,23 @@
+import { env } from '@/env'
+
+const COOKIE_KEYS = [
+  env.VITE_LOGIN_DETAILS,
+  env.VITE_REFRESH_TOKEN,
+  env.VITE_PORTAL,
+  env.VITE_SUBSCRIPTION_TYPE,
+  env.VITE_AUTH_USER_KEY,
+  env.VITE_PAGINATION_DATA,
+  env.VITE_ROUTE_MENU_CONFIG_KEY,
+  env.VITE_ASSOCIATION_VIEW_URL_KEY,
+  env.VITE_AUTH_TOKEN_KEY,
+]
+
+export function clearClientAuthCookies(): void {
+  if (typeof document === 'undefined') {
+    return
+  }
+  for (const name of COOKIE_KEYS) {
+    document.cookie = `${name}=; Max-Age=0; path=/`
+    document.cookie = `${name}=; Max-Age=0; path=/; domain=${window.location.hostname}`
+  }
+}

package/templates/scaffold/auth/_shared/src/utils/normalize-router-path.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@/config/routes'
+
+export function normalizeRouterPath(path: string): string {
+  const trimmed = (path ?? '').trim()
+  if (!trimmed || trimmed === '/') {
+    return Routes.app
+  }
+  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`
+  return withLeadingSlash.replace(/\/{2,}/g, '/')
+}

package/templates/scaffold/auth/_shared/src/utils/private-route.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { useRouter } from '@tanstack/react-router'
+import Loader from '@/components/ui/loader/loader'
+import { Routes } from '@/config/routes'
+import { isPublicAuthRoute } from '@/features/auth/auth-route-paths'
+import { isHubSpotCmsEditor } from '@/hubspot/is-cms-editor'
+import { api, resolveAuthRouteAction } from '@/integrations/woodsportal-sdk'
+import { useAuthSessionRevision } from '@/features/auth/use-portal-session'
+import { navigateToLogin, navigateToMfaGate } from '@/features/auth/auth-navigation'
+import { isMfaPendingSession } from '@/features/auth/auth-session'
+
+const SESSION_RESTORE_LOADER_MS = 5_000
+
+function redirectUnauthenticatedToLogin(
+  router: ReturnType<typeof useRouter>,
+  inCmsEditor: boolean,
+): void {
+  const currentPath = router?.state?.location?.pathname
+  if (inCmsEditor) {
+    navigateToLogin(router)
+    return
+  }
+  const redirectPath =
+    currentPath !== Routes.login ? `?r=${router?.state?.location?.href}` : ''
+  navigateToLogin(router, `${Routes.login}${redirectPath}`)
+}
+
+const PrivateRoute: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const router = useRouter()
+  const sessionRevision = useAuthSessionRevision()
+  const inCmsEditor = isHubSpotCmsEditor()
+  const sessionRefreshExhausted = api.auth.session.isSessionRefreshExhausted?.() ?? false
+  const refreshInFlight = api.auth.session.isRefreshInFlight?.() ?? false
+  const hasRefreshHint = api.auth.session.hasRefreshSession()
+  const hasValidAccess = api.auth.session.hasValidAccessToken()
+
+  const sessionRestoring =
+    !sessionRefreshExhausted && refreshInFlight && hasRefreshHint && !hasValidAccess
+
+  const [restoreLoaderTimedOut, setRestoreLoaderTimedOut] = useState(false)
+
+  useEffect(() => {
+    if (!sessionRestoring) {
+      setRestoreLoaderTimedOut(false)
+      return
+    }
+    const id = window.setTimeout(() => setRestoreLoaderTimedOut(true), SESSION_RESTORE_LOADER_MS)
+    return () => window.clearTimeout(id)
+  }, [sessionRestoring])
+
+  const effectiveSessionRestoring = sessionRestoring && !restoreLoaderTimedOut
+
+  const routeAction = useMemo(() => {
+    const currentPath = router?.state?.location?.pathname
+    const session = api.auth.session.contract()
+    return resolveAuthRouteAction({
+      pathname: currentPath,
+      isPublicAuthRoute,
+      session: {
+        ...session,
+        isMfaPending: () => isMfaPendingSession(),
+      },
+      mfaRoute: Routes.twoFa,
+      previewMode: false,
+      sessionRestoring: effectiveSessionRestoring,
+      sessionRefreshExhausted,
+    })
+  }, [
+    router,
+    sessionRefreshExhausted,
+    effectiveSessionRestoring,
+    sessionRevision,
+    refreshInFlight,
+    hasRefreshHint,
+    hasValidAccess,
+  ])
+
+  useEffect((): void => {
+    if (routeAction.kind === 'redirect_mfa') {
+      navigateToMfaGate(router)
+      return
+    }
+    if (
+      routeAction.kind === 'redirect_login' ||
+      (routeAction.kind === 'show_loader' && restoreLoaderTimedOut)
+    ) {
+      redirectUnauthenticatedToLogin(router, inCmsEditor)
+    }
+  }, [routeAction, router, inCmsEditor, restoreLoaderTimedOut])
+
+  if (routeAction.kind === 'allow') {
+    return <>{children}</>
+  }
+  if (routeAction.kind === 'show_loader' && !restoreLoaderTimedOut) {
+    return <Loader showText={false} />
+  }
+  return null
+}
+
+export default PrivateRoute

package/templates/scaffold/auth/_shared/src/utils/public-route.tsx

@@ -0,0 +1,64 @@
+import React, { useLayoutEffect } from 'react'
+import { useRouter, useRouterState } from '@tanstack/react-router'
+import Loader from '@/components/ui/loader/loader'
+import { Routes } from '@/config/routes'
+import { isPublicAuthRoute } from '@/features/auth/auth-route-paths'
+import {
+  isRouterAtPath,
+  navigateAfterFullAuth,
+  navigateToLogin,
+  navigateToMfaGate,
+} from '@/features/auth/auth-navigation'
+import { resolvePostLoginPath } from '@/features/auth/resolve-post-login-path'
+import {
+  useAuthSessionRevision,
+  useIsMfaPendingSession,
+  usePortalSession,
+} from '@/features/auth/use-portal-session'
+import { isHubSpotCmsEditor } from '@/hubspot/is-cms-editor'
+
+const PublicRoute: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const router = useRouter()
+  const routeState = useRouterState()
+  const currentRoute = routeState.location.pathname
+  const isAuthenticated = usePortalSession()
+  const isMfaPending = useIsMfaPendingSession()
+  const sessionRevision = useAuthSessionRevision()
+  const inCmsEditor = isHubSpotCmsEditor()
+  const postLoginTarget = resolvePostLoginPath(router)
+
+  useLayoutEffect(() => {
+    const isPublicPath = isPublicAuthRoute(currentRoute)
+
+    if (isMfaPending && currentRoute !== Routes.twoFa) {
+      navigateToMfaGate(router)
+      return
+    }
+
+    if (!isAuthenticated && !isMfaPending && !isPublicPath) {
+      navigateToLogin(router)
+      return
+    }
+
+    if (isAuthenticated && isPublicPath && !(inCmsEditor && currentRoute === Routes.twoFa)) {
+      navigateAfterFullAuth(router)
+    }
+  }, [router, isAuthenticated, isMfaPending, inCmsEditor, currentRoute, sessionRevision])
+
+  if (isMfaPending) {
+    return currentRoute === Routes.twoFa ? <>{children}</> : <Loader showText={false} />
+  }
+
+  if (isAuthenticated && isPublicAuthRoute(currentRoute)) {
+    return isRouterAtPath(router, postLoginTarget) ? <>{children}</> : <Loader showText={false} />
+  }
+
+  if (!isAuthenticated) {
+    return <>{children}</>
+  }
+
+  // Authenticated on a general public page (e.g. /guide) — no redirect gate.
+  return <>{children}</>
+}
+
+export default PublicRoute

package/templates/scaffold/auth/_shared/src/utils/resolve-api-base-url.ts

@@ -0,0 +1,44 @@
+import { env } from '@/env'
+
+type HubSpotRuntimeData = {
+  developerOption?: boolean
+  developerOptionTempUrl?: string
+}
+
+type HubSpotRuntimeWindow = Window & {
+  hubSpotData?: HubSpotRuntimeData
+  /** Module-config live exports in `wp dev` / `yarn local` (see wphs.adapter.ts). */
+  __WPHS_DATA__?: HubSpotRuntimeData
+}
+
+function readHubSpotRuntimeData(): HubSpotRuntimeData | undefined {
+  if (typeof window === 'undefined') {
+    return undefined
+  }
+  const win = window as HubSpotRuntimeWindow
+  return win.hubSpotData ?? win.__WPHS_DATA__
+}
+
+/**
+ * API host for woodsportal-client-sdk.
+ * Priority: developer temp URL (HubSpot embed) → `VITE_PUBLIC_REST_API_ENDPOINT`.
+ * WoodsCLI dev (`__WPHS_DATA__` without HubL `hubSpotData`) always uses the Vite env URL.
+ */
+export function resolveWoodsPortalApiBaseUrl(
+  hubSpotData: HubSpotRuntimeData | undefined = readHubSpotRuntimeData(),
+): string {
+  const envApi = env.VITE_PUBLIC_REST_API_ENDPOINT
+
+  if (import.meta.env.DEV && typeof window !== 'undefined') {
+    const win = window as HubSpotRuntimeWindow
+    if (win.__WPHS_DATA__ != null && win.hubSpotData == null) {
+      return envApi
+    }
+  }
+
+  if (hubSpotData?.developerOption === true && hubSpotData.developerOptionTempUrl) {
+    return hubSpotData.developerOptionTempUrl
+  }
+
+  return envApi
+}

package/templates/scaffold/auth/_shared/src/utils/safe-router-navigation.ts

@@ -0,0 +1,82 @@
+export type SafeAuthRouter = {
+  navigate: (opts: { to: string; replace?: boolean }) => void | Promise<void>
+  history?: { replace: (path: string) => unknown }
+  state?: { location?: { pathname?: string; href?: string } }
+}
+
+export const NAVIGATION_WAIT_MS = 2500
+
+const PATHNAME_VERIFY_DELAY_MS = 100
+
+export function hashPath(path: string): string {
+  const trimmed = (path ?? '').trim()
+  if (!trimmed) {
+    return '#/'
+  }
+  if (trimmed.startsWith('#')) {
+    return trimmed
+  }
+  return trimmed.startsWith('/') ? `#${trimmed}` : `#/${trimmed}`
+}
+
+export function syncHashToPath(path: string): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+  const expectedHash = hashPath(path)
+  if (window.location.hash !== expectedHash) {
+    window.location.hash = expectedHash
+  }
+}
+
+export async function raceNavigation(
+  router: SafeAuthRouter,
+  target: string,
+  timeoutMs: number = NAVIGATION_WAIT_MS,
+): Promise<void> {
+  await Promise.race([
+    Promise.resolve(router.navigate({ to: target, replace: true })).catch(() => undefined),
+    new Promise<void>((resolve) => window.setTimeout(resolve, timeoutMs)),
+  ])
+}
+
+export async function historyReplaceFirstNavigate(
+  router: SafeAuthRouter,
+  target: string,
+): Promise<void> {
+  const normalized = target.trim()
+  if (!normalized) {
+    return
+  }
+  try {
+    router.history?.replace(normalized)
+  } catch {
+    // fall through
+  }
+  await raceNavigation(router, normalized, NAVIGATION_WAIT_MS)
+  syncHashToPath(normalized)
+}
+
+export function hardReplaceToHashPath(target: string): void {
+  if (typeof window === 'undefined') {
+    return
+  }
+  const hash = hashPath(target)
+  window.location.replace(`${window.location.pathname}${hash}`)
+}
+
+export function readRouterPathname(router: SafeAuthRouter): string {
+  return router.state?.location?.pathname ?? ''
+}
+
+export function readHashPathname(): string {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  const raw = window.location.hash.replace(/^#/, '').split('?')[0]
+  return raw || '/'
+}
+
+export function safeRouterReplace(router: SafeAuthRouter, path: string): void {
+  void historyReplaceFirstNavigate(router, path.trim())
+}