@tetherto/dev-websites-core 0.3.3 → 0.3.4

package/dist/site-url.mjs

@@ -0,0 +1,16 @@
+import { t as createLogger } from "./logger.mjs";
+//#region src/seo/site-url.ts
+const log = createLogger("siteUrl");
+/** Resolve the public site origin from env (`NEXT_PUBLIC_SITE_URL` / `VERCEL_URL`). */
+function getSiteUrl(options = {}) {
+	const fallback = options.fallback ?? "http://localhost:3000";
+	const fromEnv = process.env.NEXT_PUBLIC_SITE_URL;
+	if (fromEnv) return fromEnv.replace(/\/$/, "");
+	if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`.replace(/\/$/, "");
+	if (process.env.NODE_ENV === "production") log.warn(`NEXT_PUBLIC_SITE_URL and VERCEL_URL are unset — falling back to ${fallback}. Canonical and Open Graph URLs will be incorrect.`);
+	return fallback.replace(/\/$/, "");
+}
+//#endregion
+export { getSiteUrl as t };
+
+//# sourceMappingURL=site-url.mjs.map

package/dist/site-url.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"site-url.mjs","names":[],"sources":["../src/seo/site-url.ts"],"sourcesContent":["import { createLogger } from '../utils/logger/logger.js'\n\nconst log = createLogger('siteUrl')\n\nexport type GetSiteUrlOptions = {\n  /** Fallback when no env URL is set. Defaults to `http://localhost:3000`. */\n  fallback?: string\n}\n\n/** Resolve the public site origin from env (`NEXT_PUBLIC_SITE_URL` / `VERCEL_URL`). */\nexport function getSiteUrl(options: GetSiteUrlOptions = {}): string {\n  const fallback = options.fallback ?? 'http://localhost:3000'\n  const fromEnv = process.env.NEXT_PUBLIC_SITE_URL\n  if (fromEnv) return fromEnv.replace(/\\/$/, '')\n  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`.replace(/\\/$/, '')\n  // A localhost origin in production means canonical/OG URLs will be wrong — surface it loudly.\n  if (process.env.NODE_ENV === 'production') {\n    log.warn(\n      `NEXT_PUBLIC_SITE_URL and VERCEL_URL are unset — falling back to ${fallback}. Canonical and Open Graph URLs will be incorrect.`\n    )\n  }\n  return fallback.replace(/\\/$/, '')\n}\n"],"mappings":";;AAEA,MAAM,MAAM,aAAa,SAAS;;AAQlC,SAAgB,WAAW,UAA6B,CAAC,GAAW;CAClE,MAAM,WAAW,QAAQ,YAAY;CACrC,MAAM,UAAU,QAAQ,IAAI;CAC5B,IAAI,SAAS,OAAO,QAAQ,QAAQ,OAAO,EAAE;CAC7C,IAAI,QAAQ,IAAI,YAAY,OAAO,WAAW,QAAQ,IAAI,aAAa,QAAQ,OAAO,EAAE;CAExF,IAAI,QAAQ,IAAI,aAAa,cAC3B,IAAI,KACF,mEAAmE,SAAS,mDAC9E;CAEF,OAAO,SAAS,QAAQ,OAAO,EAAE;AACnC"}

package/dist/ui/components/Button/Button.d.mts

@@ -3,7 +3,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/ui/components/Button/Button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "link" | "solid" | "outline" | "ghost" | "secondary" | "social" | "action" | "elevated-outline" | null | undefined;
-  size?: "social" | "default" | "sm" | "cta" | "icon" | null | undefined;
+  size?: "sm" | "social" | "default" | "cta" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;

package/dist/ui/components/GoogleOAuthButton/GoogleOAuthButton.d.mts

@@ -0,0 +1,5 @@
+//#region src/ui/components/GoogleOAuthButton/GoogleOAuthButton.d.ts
+declare function GoogleOAuthButton(): import("react").JSX.Element;
+//#endregion
+export { GoogleOAuthButton };
+//# sourceMappingURL=GoogleOAuthButton.d.mts.map

package/dist/ui/components/GoogleOAuthButton/GoogleOAuthButton.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleOAuthButton.d.mts","names":[],"sources":["../../../../src/ui/components/GoogleOAuthButton/GoogleOAuthButton.tsx"],"mappings":";iBASgB,qCAAiB,IAAA"}

package/dist/ui/components/GoogleOAuthButton/GoogleOAuthButton.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { Button } from "../Button/Button.mjs";
+import { GOOGLE_OAUTH_START_PATH } from "./googleOAuthStartPath.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+//#region src/ui/components/GoogleOAuthButton/GoogleOAuthButton.tsx
+function GoogleOAuthButton() {
+	const searchParams = useSearchParams();
+	useEffect(() => {
+		const error = searchParams.get("error");
+		if (error && process.env.NODE_ENV === "development") console.error("OAuth error:", error);
+	}, [searchParams]);
+	const handleGoogleLogin = () => {
+		window.location.href = GOOGLE_OAUTH_START_PATH;
+	};
+	return /* @__PURE__ */ jsx("form", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "form-submit flex w-full flex-col items-stretch",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "my-3 flex w-full items-center gap-3",
+				role: "separator",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-center text-[13px] leading-none font-normal tracking-normal whitespace-nowrap text-[var(--theme-elevation-500,#8c8c8c)]",
+						children: "Or"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]",
+						"aria-hidden": "true"
+					})
+				]
+			}), /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				onClick: handleGoogleLogin,
+				className: "btn btn--icon-style-without-border btn--size-large btn--withoutPopup btn--style-primary !my-0",
+				children: [/* @__PURE__ */ jsxs("svg", {
+					className: "mr-2 size-[18px] shrink-0",
+					viewBox: "0 0 18 18",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("path", {
+							fill: "#4285F4",
+							d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							fill: "#34A853",
+							d: "M9.003 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							fill: "#FBBC05",
+							d: "M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+						}),
+						/* @__PURE__ */ jsx("path", {
+							fill: "#EA4335",
+							d: "M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.426 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z"
+						})
+					]
+				}), "Continue with Google"]
+			})]
+		})
+	});
+}
+//#endregion
+export { GoogleOAuthButton };
+
+//# sourceMappingURL=GoogleOAuthButton.mjs.map

package/dist/ui/components/GoogleOAuthButton/GoogleOAuthButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleOAuthButton.mjs","names":[],"sources":["../../../../src/ui/components/GoogleOAuthButton/GoogleOAuthButton.tsx"],"sourcesContent":["'use client'\n\nimport { useSearchParams } from 'next/navigation'\nimport { useEffect } from 'react'\n\nimport { Button } from '../Button/Button.js'\n\nimport { GOOGLE_OAUTH_START_PATH } from './googleOAuthStartPath.js'\n\nexport function GoogleOAuthButton() {\n  const searchParams = useSearchParams()\n\n  useEffect(() => {\n    const error = searchParams.get('error')\n    if (error && process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.error('OAuth error:', error)\n    }\n  }, [searchParams])\n\n  const handleGoogleLogin = () => {\n    window.location.href = GOOGLE_OAUTH_START_PATH\n  }\n\n  return (\n    <form className=\"w-full\">\n      <div className=\"form-submit flex w-full flex-col items-stretch\">\n        <div className=\"my-3 flex w-full items-center gap-3\" role=\"separator\">\n          <span\n            className=\"block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"shrink-0 text-center text-[13px] leading-none font-normal tracking-normal whitespace-nowrap text-[var(--theme-elevation-500,#8c8c8c)]\">\n            Or\n          </span>\n          <span\n            className=\"block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]\"\n            aria-hidden=\"true\"\n          />\n        </div>\n        <Button\n          type=\"button\"\n          onClick={handleGoogleLogin}\n          className=\"btn btn--icon-style-without-border btn--size-large btn--withoutPopup btn--style-primary !my-0\"\n        >\n          <svg className=\"mr-2 size-[18px] shrink-0\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n            <path\n              fill=\"#4285F4\"\n              d=\"M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z\"\n            />\n            <path\n              fill=\"#34A853\"\n              d=\"M9.003 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z\"\n            />\n            <path\n              fill=\"#FBBC05\"\n              d=\"M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z\"\n            />\n            <path\n              fill=\"#EA4335\"\n              d=\"M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.426 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z\"\n            />\n          </svg>\n          Continue with Google\n        </Button>\n      </div>\n    </form>\n  )\n}\n"],"mappings":";;;;;;;AASA,SAAgB,oBAAoB;CAClC,MAAM,eAAe,gBAAgB;CAErC,gBAAgB;EACd,MAAM,QAAQ,aAAa,IAAI,OAAO;EACtC,IAAI,SAAS,QAAQ,IAAI,aAAa,eAEpC,QAAQ,MAAM,gBAAgB,KAAK;CAEvC,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,0BAA0B;EAC9B,OAAO,SAAS,OAAO;CACzB;CAEA,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAsC,MAAK;IAA1D,UAAA;KACE,oBAAC,QAAD;MACE,WAAU;MACV,eAAY;KACb,CAAA;KACD,oBAAC,QAAD;MAAM,WAAU;MAAwI,UAAA;KAElJ,CAAA;KACN,oBAAC,QAAD;MACE,WAAU;MACV,eAAY;KACb,CAAA;IACE;GACL,CAAA,GAAA,qBAAC,QAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;IAHZ,UAAA,CAKE,qBAAC,OAAD;KAAK,WAAU;KAA4B,SAAQ;KAAY,eAAY;KAA3E,UAAA;MACE,oBAAC,QAAD;OACE,MAAK;OACL,GAAE;MACH,CAAA;MACD,oBAAC,QAAD;OACE,MAAK;OACL,GAAE;MACH,CAAA;MACD,oBAAC,QAAD;OACE,MAAK;OACL,GAAE;MACH,CAAA;MACD,oBAAC,QAAD;OACE,MAAK;OACL,GAAE;MACH,CAAA;KACE;IAAC,CAAA,GAAA,sBAEA;GACL,CAAA,CAAA;;CACD,CAAA;AAEV"}

package/dist/ui/components/GoogleOAuthButton/googleOAuthStartPath.d.mts

@@ -0,0 +1,6 @@
+//#region src/ui/components/GoogleOAuthButton/googleOAuthStartPath.d.ts
+/** Site route that starts the Google OAuth redirect. */
+declare const GOOGLE_OAUTH_START_PATH = "/api/auth/google";
+//#endregion
+export { GOOGLE_OAUTH_START_PATH };
+//# sourceMappingURL=googleOAuthStartPath.d.mts.map

package/dist/ui/components/GoogleOAuthButton/googleOAuthStartPath.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleOAuthStartPath.d.mts","names":[],"sources":["../../../../src/ui/components/GoogleOAuthButton/googleOAuthStartPath.ts"],"mappings":";;cACa"}

package/dist/ui/components/GoogleOAuthButton/googleOAuthStartPath.mjs

@@ -0,0 +1,7 @@
+//#region src/ui/components/GoogleOAuthButton/googleOAuthStartPath.ts
+/** Site route that starts the Google OAuth redirect. */
+const GOOGLE_OAUTH_START_PATH = "/api/auth/google";
+//#endregion
+export { GOOGLE_OAUTH_START_PATH };
+
+//# sourceMappingURL=googleOAuthStartPath.mjs.map

package/dist/ui/components/GoogleOAuthButton/googleOAuthStartPath.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleOAuthStartPath.mjs","names":[],"sources":["../../../../src/ui/components/GoogleOAuthButton/googleOAuthStartPath.ts"],"sourcesContent":["/** Site route that starts the Google OAuth redirect. */\nexport const GOOGLE_OAUTH_START_PATH = '/api/auth/google'\n"],"mappings":";;AACA,MAAa,0BAA0B"}

package/dist/ui/components/GoogleOAuthButton/index.d.mts

@@ -0,0 +1,2 @@
+import { GoogleOAuthButton } from "./GoogleOAuthButton.mjs";
+export { GoogleOAuthButton };

package/dist/ui/components/GoogleOAuthButton/index.mjs

@@ -0,0 +1,2 @@
+import { GoogleOAuthButton } from "./GoogleOAuthButton.mjs";
+export { GoogleOAuthButton };

package/dist/ui/index.d.mts

@@ -33,6 +33,8 @@ import { FieldError, FieldErrorProps } from "./components/FieldError/FieldError.
 import "./components/FieldError/index.mjs";
 import { FormatDateOptions, FormattedDate, FormattedDateProps, formatDate } from "./components/FormattedDate/FormattedDate.mjs";
 import "./components/FormattedDate/index.mjs";
+import { GoogleOAuthButton } from "./components/GoogleOAuthButton/GoogleOAuthButton.mjs";
+import "./components/GoogleOAuthButton/index.mjs";
 import "./components/IconButton/index.mjs";
 import { Input, InputProps } from "./components/Input/Input.mjs";
 import "./components/Input/index.mjs";
@@ -78,4 +80,4 @@ import { UseInViewOptions, useInView } from "./hooks/useInView.mjs";
 import "./hooks/index.mjs";
 import { cn } from "./utils/cn.mjs";
 import "./utils/index.mjs";
-export { Accordion, type AccordionItem, type AccordionProps, Avatar, type AvatarProps, BADGE_VERSION_RELEASE_TYPE_STYLES, Badge, type BadgeProps, BadgeVersion, type BadgeVersionProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type CodeBlockTab, CodeBlockTabs, type CodeBlockTabsProps, type CodeBlockTabsTheme, type CodeBlockTheme, CollapsibleSection, type CollapsibleSectionProps, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, EmptyState, type EmptyStateProps, FieldError, type FieldErrorProps, type FormatDateOptions, FormattedDate, type FormattedDateProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LazyVideo, type LazyVideoProps, Pagination, PaginationItem, type PaginationItemProps, type PaginationLabels, type PaginationProps, PasswordInput, type PasswordInputProps, ProgressStepper, type ProgressStepperProps, Prose, type ProseProps, Radio, type RadioProps, type ReleaseType, Reveal, type RevealProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetOverlay, type SheetOverlayProps, SheetPortal, SheetTrigger, StaggerReveal, type StaggerRevealProps, Stepper, type StepperItem, type StepperProps, Switch, type SwitchProps, TextButton, type TextButtonProps, Textarea, type TextareaProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseInViewOptions, VisuallyHidden, type VisuallyHiddenProps, badgeVariants, buildPageItems, buttonVariants, cardVariants, cn, coerceBadgeReleaseType, dialogFullscreenOnMobile, emptyStateVariants, focusRingClassName, formatDate, segmentVariants, useInView, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, Avatar, type AvatarProps, BADGE_VERSION_RELEASE_TYPE_STYLES, Badge, type BadgeProps, BadgeVersion, type BadgeVersionProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, type CodeBlockTab, CodeBlockTabs, type CodeBlockTabsProps, type CodeBlockTabsTheme, type CodeBlockTheme, CollapsibleSection, type CollapsibleSectionProps, CopyButton, type CopyButtonProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, EmptyState, type EmptyStateProps, FieldError, type FieldErrorProps, type FormatDateOptions, FormattedDate, type FormattedDateProps, GoogleOAuthButton, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LazyVideo, type LazyVideoProps, Pagination, PaginationItem, type PaginationItemProps, type PaginationLabels, type PaginationProps, PasswordInput, type PasswordInputProps, ProgressStepper, type ProgressStepperProps, Prose, type ProseProps, Radio, type RadioProps, type ReleaseType, Reveal, type RevealProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetOverlay, type SheetOverlayProps, SheetPortal, SheetTrigger, StaggerReveal, type StaggerRevealProps, Stepper, type StepperItem, type StepperProps, Switch, type SwitchProps, TextButton, type TextButtonProps, Textarea, type TextareaProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, type UseInViewOptions, VisuallyHidden, type VisuallyHiddenProps, badgeVariants, buildPageItems, buttonVariants, cardVariants, cn, coerceBadgeReleaseType, dialogFullscreenOnMobile, emptyStateVariants, focusRingClassName, formatDate, segmentVariants, useInView, useToast };

package/dist/ui/index.mjs

@@ -38,3 +38,4 @@ export * from './components/PasswordInput/index.mjs'
 export * from './components/SearchInput/index.mjs'
 export * from './components/FieldError/index.mjs'
 export * from './components/CollapsibleSection/index.mjs'
+export * from './components/GoogleOAuthButton/index.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tetherto/dev-websites-core",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Shared CMS, SEO, i18n, utils, UI, and analytics primitives for the WDK / QVAC / PEAR / MDK websites.",
   "license": "Apache-2.0",
   "publishConfig": {
@@ -28,6 +28,11 @@
       "import": "./dist/cms/index.mjs",
       "default": "./dist/cms/index.mjs"
     },
+    "./cms/google-oauth": {
+      "types": "./dist/cms/google-oauth.d.mts",
+      "import": "./dist/cms/google-oauth.mjs",
+      "default": "./dist/cms/google-oauth.mjs"
+    },
     "./seo": {
       "types": "./dist/seo/index.d.mts",
       "import": "./dist/seo/index.mjs",
@@ -53,6 +58,11 @@
       "import": "./dist/ui/index.mjs",
       "default": "./dist/ui/index.mjs"
     },
+    "./ui/google-oauth": {
+      "types": "./dist/ui/components/GoogleOAuthButton/index.d.mts",
+      "import": "./dist/ui/components/GoogleOAuthButton/index.mjs",
+      "default": "./dist/ui/components/GoogleOAuthButton/index.mjs"
+    },
     "./ui/a11y": {
       "types": "./dist/ui/a11y/index.d.mts",
       "import": "./dist/ui/a11y/index.mjs",
@@ -71,7 +81,8 @@
   },
   "files": [
     "dist",
-    "src/ui/theme"
+    "src/ui/theme",
+    "src/ui/components/GoogleOAuthButton"
   ],
   "scripts": {
     "build": "tsdown",
@@ -99,6 +110,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "embla-carousel-react": "^8.0.0",
+    "google-auth-library": "^11.1.0",
     "next": ">=15",
     "payload": "^3.85.1",
     "react": ">=19",
@@ -113,6 +125,9 @@
     "embla-carousel-react": {
       "optional": true
     },
+    "google-auth-library": {
+      "optional": true
+    },
     "react-icons": {
       "optional": true
     }
@@ -139,6 +154,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "google-auth-library": "^11.1.0",
     "next": "^16.2.6",
     "payload": "3.88.0",
     "prettier": "^3.8.1",

package/src/ui/components/GoogleOAuthButton/GoogleOAuthButton.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+
+import { Button } from '../Button/Button.js'
+
+import { GOOGLE_OAUTH_START_PATH } from './googleOAuthStartPath.js'
+
+export function GoogleOAuthButton() {
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const error = searchParams.get('error')
+    if (error && process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.error('OAuth error:', error)
+    }
+  }, [searchParams])
+
+  const handleGoogleLogin = () => {
+    window.location.href = GOOGLE_OAUTH_START_PATH
+  }
+
+  return (
+    <form className="w-full">
+      <div className="form-submit flex w-full flex-col items-stretch">
+        <div className="my-3 flex w-full items-center gap-3" role="separator">
+          <span
+            className="block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]"
+            aria-hidden="true"
+          />
+          <span className="shrink-0 text-center text-[13px] leading-none font-normal tracking-normal whitespace-nowrap text-[var(--theme-elevation-500,#8c8c8c)]">
+            Or
+          </span>
+          <span
+            className="block h-px min-w-0 flex-1 bg-[var(--theme-elevation-250,#cfcfcf)]"
+            aria-hidden="true"
+          />
+        </div>
+        <Button
+          type="button"
+          onClick={handleGoogleLogin}
+          className="btn btn--icon-style-without-border btn--size-large btn--withoutPopup btn--style-primary !my-0"
+        >
+          <svg className="mr-2 size-[18px] shrink-0" viewBox="0 0 18 18" aria-hidden="true">
+            <path
+              fill="#4285F4"
+              d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z"
+            />
+            <path
+              fill="#34A853"
+              d="M9.003 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.96v2.332C2.44 15.983 5.485 18 9.003 18z"
+            />
+            <path
+              fill="#FBBC05"
+              d="M3.964 10.712c-.18-.54-.282-1.117-.282-1.71 0-.593.102-1.17.282-1.71V4.96H.957C.347 6.175 0 7.55 0 9.002c0 1.452.348 2.827.957 4.042l3.007-2.332z"
+            />
+            <path
+              fill="#EA4335"
+              d="M9.003 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.464.891 11.426 0 9.003 0 5.485 0 2.44 2.017.96 4.958L3.967 7.29c.708-2.127 2.692-3.71 5.036-3.71z"
+            />
+          </svg>
+          Continue with Google
+        </Button>
+      </div>
+    </form>
+  )
+}

package/src/ui/components/GoogleOAuthButton/googleOAuthStartPath.ts

@@ -0,0 +1,2 @@
+/** Site route that starts the Google OAuth redirect. */
+export const GOOGLE_OAUTH_START_PATH = '/api/auth/google'

package/src/ui/components/GoogleOAuthButton/index.ts

@@ -0,0 +1 @@
+export { GoogleOAuthButton } from './GoogleOAuthButton.js'