feat: add @hanzo/ui/auth package with IAMLoginButton and AuthGuard

New auth components for unified IAM integration:
- IAMLoginButton: "Sign in with Hanzo" button that initiates OAuth flow
- AuthGuard: wrapper that redirects to IAM when unauthenticated
- Re-exports useHanzoAuth, UserOrgDropdown, HanzoUser/HanzoOrg types
Adds ./auth and ./auth/* subpath exports to package.json.

Author: hanzo-dev

pkg/ui/package.json

@@ -514,6 +514,16 @@
       "import": "./dist/pattern/*.mjs",
       "require": "./dist/pattern/*.js"
     },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.mjs",
+      "require": "./dist/auth/index.js"
+    },
+    "./auth/*": {
+      "types": "./dist/auth/*.d.ts",
+      "import": "./dist/auth/*.mjs",
+      "require": "./dist/auth/*.js"
+    },
     "./navigation": {
       "types": "./dist/navigation/index.d.ts",
       "import": "./dist/navigation/index.mjs",

pkg/ui/src/auth/AuthGuard.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import { useHanzoAuth } from '../navigation/hanzo-shell/useHanzoAuth'
+
+export interface AuthGuardProps {
+  /** Where to redirect when not authenticated (defaults to IAM login) */
+  loginUrl?: string
+  /** OAuth client ID for IAM redirect */
+  clientId?: string
+  /** Show loading state while checking auth */
+  fallback?: React.ReactNode
+  children: React.ReactNode
+}
+
+/**
+ * Wrapper component that redirects to IAM login if user is not authenticated.
+ * Uses useHanzoAuth to check localStorage token.
+ */
+export function AuthGuard({
+  loginUrl,
+  clientId,
+  fallback,
+  children,
+}: AuthGuardProps) {
+  const { user, loading } = useHanzoAuth()
+
+  useEffect(() => {
+    if (!loading && !user) {
+      if (loginUrl) {
+        window.location.href = loginUrl
+      } else if (clientId) {
+        const redirect = `${window.location.origin}/auth/callback`
+        const url = new URL('https://hanzo.id/login/oauth/authorize')
+        url.searchParams.set('client_id', clientId)
+        url.searchParams.set('response_type', 'code')
+        url.searchParams.set('redirect_uri', redirect)
+        url.searchParams.set('scope', 'openid profile email')
+        window.location.href = url.toString()
+      } else {
+        window.location.href = 'https://hanzo.id'
+      }
+    }
+  }, [loading, user, loginUrl, clientId])
+
+  if (loading) {
+    return (
+      <>
+        {fallback ?? (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', background: '#09090b', color: '#888' }}>
+            Loading...
+          </div>
+        )}
+      </>
+    )
+  }
+
+  if (!user) return null
+
+  return <>{children}</>
+}

pkg/ui/src/auth/IAMLoginButton.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+
+export interface IAMLoginButtonProps {
+  /** IAM server URL (e.g., https://hanzo.id) */
+  iamUrl?: string
+  /** OAuth client ID */
+  clientId: string
+  /** OAuth redirect URI (defaults to current origin + /auth/callback) */
+  redirectUri?: string
+  /** Button label */
+  label?: string
+  /** Additional CSS classes */
+  className?: string
+  /** Button variant: 'default' (filled) or 'outline' */
+  variant?: 'default' | 'outline'
+}
+
+/**
+ * "Sign in with Hanzo" button that initiates IAM OAuth flow.
+ * Zero-dependency — works in any React app.
+ */
+export function IAMLoginButton({
+  iamUrl = 'https://hanzo.id',
+  clientId,
+  redirectUri,
+  label = 'Sign in with Hanzo',
+  className = '',
+  variant = 'default',
+}: IAMLoginButtonProps) {
+  const [loading, setLoading] = useState(false)
+
+  const handleClick = useCallback(() => {
+    setLoading(true)
+    const redirect = redirectUri || `${window.location.origin}/auth/callback`
+    const state = crypto.randomUUID()
+
+    const url = new URL(`${iamUrl}/login/oauth/authorize`)
+    url.searchParams.set('client_id', clientId)
+    url.searchParams.set('response_type', 'code')
+    url.searchParams.set('redirect_uri', redirect)
+    url.searchParams.set('scope', 'openid profile email')
+    url.searchParams.set('state', state)
+
+    window.location.href = url.toString()
+  }, [iamUrl, clientId, redirectUri])
+
+  const baseStyles = 'inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'
+  const variantStyles = variant === 'outline'
+    ? 'border border-[#333] bg-transparent text-white hover:bg-[#1a1a1f]'
+    : 'bg-white text-black hover:bg-[#e5e5e5]'
+
+  return (
+    <button
+      type="button"
+      className={`${baseStyles} ${variantStyles} ${className}`}
+      onClick={handleClick}
+      disabled={loading}
+    >
+      <svg width="16" height="16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <text x="4" y="26" fontFamily="-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif" fontSize="28" fontWeight="700" fill="currentColor">H</text>
+      </svg>
+      {loading ? 'Redirecting...' : label}
+    </button>
+  )
+}

pkg/ui/src/auth/index.ts

@@ -0,0 +1,9 @@
+export { IAMLoginButton } from './IAMLoginButton'
+export type { IAMLoginButtonProps } from './IAMLoginButton'
+export { AuthGuard } from './AuthGuard'
+export type { AuthGuardProps } from './AuthGuard'
+
+// Re-export auth-related navigation components for convenience
+export { useHanzoAuth } from '../navigation/hanzo-shell/useHanzoAuth'
+export { UserOrgDropdown } from '../navigation/hanzo-shell/UserOrgDropdown'
+export type { HanzoUser, HanzoOrg } from '../navigation/hanzo-shell/types'