@woodsportal/hubspot-kit 1.0.41 → 1.0.42-dev.0

package/templates/scaffold/auth/_full/src/features/auth/use-mfa-login-otp-flow.ts

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import type { MfaMethod } from '@/integrations/woodsportal-sdk'
+import { api } from '@/integrations/woodsportal-sdk'
+import { getMfaPendingContext } from '@/features/auth/mfa-pending-storage'
+import {
+  getResendSecondsLeft,
+  isValidOtpCode,
+  MFA_OTP_RESEND_COOLDOWN_MS,
+  normalizeOtpCode,
+} from '@/features/auth/mfa-otp-utils'
+import { resolveMfaPortalId } from '@/features/auth/mfa-portal'
+
+export function useMfaLoginOtpFlow() {
+  const pending = getMfaPendingContext()
+  const [method, setMethod] = useState<MfaMethod>(pending?.defaultMethod ?? 'EMAIL_OTP')
+  const [otp, setOtp] = useState('')
+  const [isSending, setIsSending] = useState(false)
+  const [isVerifying, setIsVerifying] = useState(false)
+  const [cooldownUntil, setCooldownUntil] = useState<number | null>(null)
+
+  const resendSecondsLeft = getResendSecondsLeft(cooldownUntil)
+
+  const sendOtp = useCallback(async () => {
+    if (resendSecondsLeft > 0) {
+      return
+    }
+    setIsSending(true)
+    try {
+      const portalId = resolveMfaPortalId()
+      const { sendOtp: send } = api.auth.mfa.sendOtp()
+      await send({ method, portalId })
+      setCooldownUntil(Date.now() + MFA_OTP_RESEND_COOLDOWN_MS)
+      toast.success('Verification code sent')
+    } catch {
+      toast.error('Could not send verification code')
+    } finally {
+      setIsSending(false)
+    }
+  }, [method, resendSecondsLeft])
+
+  useEffect(() => {
+    void sendOtp()
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- auto-send once on MFA gate mount
+  }, [])
+
+  const verifyOtp = async () => {
+    const code = normalizeOtpCode(otp)
+    if (!isValidOtpCode(code)) {
+      toast.error('Enter the 6-digit code')
+      return null
+    }
+    setIsVerifying(true)
+    try {
+      const portalId = resolveMfaPortalId()
+      const { verifyOtp: verify } = api.auth.mfa.verifyOtp()
+      return await verify({ method, otp: code, portalId })
+    } catch {
+      toast.error('Invalid or expired code')
+      return null
+    } finally {
+      setIsVerifying(false)
+    }
+  }
+
+  return {
+    method,
+    setMethod,
+    otp,
+    setOtp,
+    destination: pending?.otpDestination,
+    isSending,
+    isVerifying,
+    resendSecondsLeft,
+    sendOtp,
+    verifyOtp,
+  }
+}

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

@@ -0,0 +1,182 @@
+/* eslint-disable */
+// @ts-nocheck
+// TanStack Router generated route tree (starter + SSO + MFA tier).
+
+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 AuthLoginSsoRouteImport } from './routes/_auth/login/sso'
+import { Route as AuthTwoFaRouteImport } from './routes/_auth/two-fa'
+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 AuthLoginSsoRoute = AuthLoginSsoRouteImport.update({
+  id: '/_auth/login/sso',
+  path: '/sso',
+  getParentRoute: () => AuthLoginRoute,
+} as any)
+
+const AuthTwoFaRoute = AuthTwoFaRouteImport.update({
+  id: '/_auth/two-fa',
+  path: '/two-fa',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AppPortalRoute = AppPortalRouteImport.update({
+  id: '/_app/portal',
+  path: '/portal',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+const AuthLoginRouteWithChildren = AuthLoginRoute._addFileChildren({
+  AuthLoginSsoRoute,
+})
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/login': typeof AuthLoginRouteWithChildren
+  '/login/sso': typeof AuthLoginSsoRoute
+  '/two-fa': typeof AuthTwoFaRoute
+  '/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/guide': typeof GuideRoute
+  '/_auth/login': typeof AuthLoginRouteWithChildren
+  '/_auth/login/sso': typeof AuthLoginSsoRoute
+  '/_auth/two-fa': typeof AuthTwoFaRoute
+  '/_app/portal': typeof AppPortalRoute
+  '/unauthorized': typeof UnauthorizedRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/guide' | '/login' | '/login/sso' | '/two-fa' | '/portal' | '/unauthorized'
+  id:
+    | '__root__'
+    | '/'
+    | '/guide'
+    | '/_auth/login'
+    | '/_auth/login/sso'
+    | '/_auth/two-fa'
+    | '/_app/portal'
+    | '/unauthorized'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  GuideRoute: typeof GuideRoute
+  AuthLoginRoute: typeof AuthLoginRouteWithChildren
+  AuthTwoFaRoute: typeof AuthTwoFaRoute
+  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
+    }
+    '/login/sso': {
+      id: '/_auth/login/sso'
+      path: '/sso'
+      fullPath: '/login/sso'
+      preLoaderRoute: typeof AuthLoginSsoRouteImport
+      parentRoute: typeof AuthLoginRouteImport
+    }
+    '/two-fa': {
+      id: '/_auth/two-fa'
+      path: '/two-fa'
+      fullPath: '/two-fa'
+      preLoaderRoute: typeof AuthTwoFaRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/portal': {
+      id: '/_app/portal'
+      path: '/portal'
+      fullPath: '/portal'
+      preLoaderRoute: typeof AppPortalRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute,
+  GuideRoute,
+  AuthLoginRoute: AuthLoginRouteWithChildren,
+  AuthTwoFaRoute,
+  AppPortalRoute,
+  UnauthorizedRoute,
+}
+
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/templates/scaffold/auth/_full/src/routes/_auth/two-fa.tsx

@@ -0,0 +1,91 @@
+import { createFileRoute, useRouter } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import { Button } from '@/components/ui/Button'
+import { Form, FormField } from '@/components/ui/Form'
+import { Input } from '@/components/ui/Input'
+import Loader from '@/components/ui/loader/loader'
+import { handleAuthLoginResponse } from '@/features/auth/login-session-bridge'
+import { useMfaLoginOtpFlow } from '@/features/auth/use-mfa-login-otp-flow'
+import { clearMfaPendingLoginSession } from '@/features/auth/auth-session'
+import { Routes } from '@/config/routes'
+
+function TwoFaPage() {
+  const router = useRouter()
+  const {
+    otp,
+    setOtp,
+    destination,
+    isSending,
+    isVerifying,
+    resendSecondsLeft,
+    sendOtp,
+    verifyOtp,
+  } = useMfaLoginOtpFlow()
+
+  const onSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    const response = await verifyOtp()
+    if (!response) {
+      return
+    }
+    const result = await handleAuthLoginResponse(response, router)
+    if (result.success && !result.mfaRequired) {
+      toast.success('Signed in')
+    }
+  }
+
+  if (isSending && !destination) {
+    return <Loader text="Sending verification code…" />
+  }
+
+  return (
+    <div className="w-full max-w-md rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <h1 className="mb-2 text-xl font-semibold text-gray-900">Two-factor authentication</h1>
+      <p className="mb-6 text-sm text-gray-600">
+        Enter the code sent to {destination ?? 'your registered contact'}.
+      </p>
+      <Form onSubmit={onSubmit}>
+        <FormField label="Verification code">
+          <Input
+            inputMode="numeric"
+            autoComplete="one-time-code"
+            value={otp}
+            onChange={(e) => setOtp(e.target.value)}
+            placeholder="000000"
+          />
+        </FormField>
+        <Button type="submit" className="w-full" disabled={isVerifying}>
+          {isVerifying ? 'Verifying…' : 'Verify'}
+        </Button>
+      </Form>
+      <div className="mt-4 flex items-center justify-between text-sm">
+        <button
+          type="button"
+          className="text-orange-600 disabled:text-gray-400"
+          disabled={resendSecondsLeft > 0 || isSending}
+          onClick={() => void sendOtp()}
+        >
+          {resendSecondsLeft > 0 ? `Resend in ${resendSecondsLeft}s` : 'Resend code'}
+        </button>
+        <button
+          type="button"
+          className="text-gray-600"
+          onClick={() => {
+            clearMfaPendingLoginSession()
+            router.navigate({ to: Routes.login })
+          }}
+        >
+          Back to login
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const Route = createFileRoute('/_auth/two-fa')({
+  component: TwoFaPage,
+  beforeLoad: () => ({
+    layout: 'AuthLayout' as const,
+    requiresAuth: false,
+  }),
+})

package/templates/scaffold/auth/_nav-sidebar/src/components/Layouts/MainLayout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react'
+
+import { PortalSidebar } from '@/components/layout/portal-sidebar'
+
+export default function MainLayout({ children }: { children?: ReactNode }) {
+  return <PortalSidebar>{children}</PortalSidebar>
+}

package/templates/scaffold/auth/_nav-sidebar/src/components/layout/portal-sidebar-nav.tsx

@@ -0,0 +1,33 @@
+import { Link } from '@/components/ui/link'
+import { portalNavItems } from '@/config/portal-nav'
+
+type PortalSidebarNavProps = {
+  collapsed?: boolean
+  onNavigate?: () => void
+}
+
+export function PortalSidebarNav({ collapsed = false, onNavigate }: PortalSidebarNavProps) {
+  return (
+    <nav className="flex flex-col gap-1 px-2 py-3">
+      {portalNavItems.map((item) => (
+        <Link
+          key={item.to}
+          to={item.to}
+          onClick={onNavigate}
+          title={collapsed ? item.label : undefined}
+          className={`rounded-md px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 ${
+            collapsed ? 'text-center' : ''
+          }`}
+          activeProps={{
+            className: `rounded-md bg-orange-50 px-3 py-2 text-sm font-medium text-orange-700 ${
+              collapsed ? 'text-center' : ''
+            }`,
+          }}
+          activeOptions={{ exact: true }}
+        >
+          {collapsed ? item.label.charAt(0) : item.label}
+        </Link>
+      ))}
+    </nav>
+  )
+}

package/templates/scaffold/auth/_nav-sidebar/src/components/layout/portal-sidebar.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { useRouter } from '@tanstack/react-router'
+
+import { Button } from '@/components/ui/Button'
+import { Routes } from '@/config/routes'
+import { clearClientAuthSession } from '@/features/auth/clear-client-auth-session'
+import { useSignedInEmail } from '@/features/auth/use-signed-in-email'
+import { usePortalSession } from '@/features/auth/use-portal-session'
+import { api } from '@/integrations/woodsportal-sdk'
+
+import { PortalSidebarNav } from './portal-sidebar-nav'
+
+type PortalSidebarProps = {
+  children: ReactNode
+}
+
+export function PortalSidebar({ children }: PortalSidebarProps) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const isAuthenticated = usePortalSession()
+  const { email, isLoading } = useSignedInEmail()
+  const router = useRouter()
+
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+
+  useEffect(() => {
+    if (!mobileOpen) {
+      return
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        closeMobile()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [mobileOpen, closeMobile])
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+    const { me } = api.auth.me({})
+    void me()
+  }, [isAuthenticated])
+
+  const handleLogout = async () => {
+    clearClientAuthSession()
+    try {
+      const { logout } = api.auth.logout({})
+      await logout()
+    } catch {
+      // local state already cleared
+    }
+    router.navigate({ to: Routes.login })
+  }
+
+  const signedInLabel = isLoading ? 'Loading…' : (email ?? 'Signed in')
+
+  const sidebarWidth = collapsed ? 'w-16' : 'w-60'
+  const motionClass = 'motion-reduce:transition-none transition-[width] duration-200 ease-in-out'
+
+  const sidebarPanel = (
+    <aside
+      className={`flex h-full shrink-0 flex-col border-r border-gray-200 bg-white ${sidebarWidth} ${motionClass}`}
+    >
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-4">
+        {!collapsed ? (
+          <span className="truncate text-sm font-semibold text-gray-900">WoodsPortal</span>
+        ) : (
+          <span className="w-full text-center text-sm font-semibold text-gray-900">W</span>
+        )}
+        <button
+          type="button"
+          className="hidden rounded-md p-1 text-gray-500 hover:bg-gray-100 md:inline-flex"
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          onClick={() => setCollapsed((value) => !value)}
+        >
+          {collapsed ? '»' : '«'}
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        <PortalSidebarNav collapsed={collapsed} onNavigate={closeMobile} />
+      </div>
+
+      {isAuthenticated ? (
+        <div className="border-t border-gray-200 p-3">
+          {!collapsed ? (
+            <p className="mb-2 truncate text-xs text-gray-500" title={signedInLabel}>
+              {signedInLabel}
+            </p>
+          ) : null}
+          <Button
+            type="button"
+            variant="outline"
+            className={`w-full text-xs ${collapsed ? 'px-2' : ''}`}
+            onClick={() => void handleLogout()}
+          >
+            {collapsed ? 'Out' : 'Sign out'}
+          </Button>
+        </div>
+      ) : null}
+    </aside>
+  )
+
+  return (
+    <div className="flex min-h-screen bg-white">
+      <div className="hidden md:flex">{sidebarPanel}</div>
+
+      {mobileOpen ? (
+        <div className="fixed inset-0 z-40 flex md:hidden">
+          <button
+            type="button"
+            className="absolute inset-0 bg-black/40"
+            aria-label="Close navigation"
+            onClick={closeMobile}
+          />
+          <div className="relative z-50 flex h-full w-60 flex-col bg-white shadow-lg">{sidebarPanel}</div>
+        </div>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="flex items-center gap-3 border-b border-gray-200 px-4 py-3 md:hidden">
+          <button
+            type="button"
+            className="rounded-md border border-gray-200 px-2 py-1 text-sm text-gray-700"
+            aria-label="Open navigation"
+            onClick={() => setMobileOpen(true)}
+          >
+            Menu
+          </button>
+          <span className="text-sm font-semibold text-gray-900">WoodsPortal</span>
+        </header>
+        <main className="flex-1 p-6">{children}</main>
+      </div>
+    </div>
+  )
+}

package/templates/scaffold/auth/_nav-top/src/components/Layouts/MainLayout.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+
+import { Link } from '@/components/ui/link'
+import { portalNavItems } from '@/config/portal-nav'
+import { usePortalSession } from '@/features/auth/use-portal-session'
+import { api } from '@/integrations/woodsportal-sdk'
+
+export default function MainLayout({ children }: { children?: ReactNode }) {
+  const isAuthenticated = usePortalSession()
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return
+    }
+    const { me } = api.auth.me({})
+    void me()
+  }, [isAuthenticated])
+
+  return (
+    <div className="min-h-screen bg-white">
+      <header className="border-b border-gray-200 px-6 py-4">
+        <div className="flex items-center justify-between gap-4">
+          <span className="text-sm font-semibold text-gray-900">WoodsPortal</span>
+          <nav className="flex flex-wrap items-center gap-4 text-sm">
+            {portalNavItems.map((item) => (
+              <Link
+                key={item.to}
+                to={item.to}
+                activeProps={{ className: 'font-semibold text-gray-900 no-underline' }}
+                activeOptions={{ exact: true }}
+              >
+                {item.label}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">{children}</main>
+    </div>
+  )
+}