@aurostack/stacks 0.1.0

package/templates/react-monorepo/files/apps/admin/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "admin",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc --noEmit && vite build",
+		"preview": "vite preview",
+		"lint": "eslint .",
+		"typecheck": "tsc --noEmit",
+		"secrets": "node .bin/secrets.js"
+	},
+	"dependencies": {
+		"@acme/api": "workspace:*",
+		"@acme/auth": "workspace:*",
+		"@acme/layouts": "workspace:*",
+		"@acme/ui": "workspace:*",
+		"@reduxjs/toolkit": "^2.12.0",
+		"lucide-react": "^1.17.0",
+		"react": "^19.2.6",
+		"react-dom": "^19.2.6",
+		"react-redux": "^9.3.0",
+		"react-router": "^8.2.0"
+	},
+	"devDependencies": {
+		"@acme/config": "workspace:*",
+		"@types/node": "^26.1.1",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"vite": "^8.0.12"
+	}
+}

package/templates/react-monorepo/files/apps/admin/src/App.tsx

@@ -0,0 +1,3 @@
+// The Admin app is driven by the router (see app/router.tsx); this module is
+// intentionally empty and no longer rendered.
+export {};

package/templates/react-monorepo/files/apps/admin/src/app/nav.tsx

@@ -0,0 +1,14 @@
+import { Home, Settings } from 'lucide-react';
+import type { NavItem } from '@acme/layouts';
+
+/**
+ * Drives the app shell's navigation. Keep it in step with `router.tsx` — the
+ * shell derives the sidebar from this list, not from the router, so a route
+ * added in one place and not the other is simply unreachable or dead.
+ *
+ * `icon` is a rendered element, not a component reference.
+ */
+export const NAV_ITEMS: NavItem[] = [
+	{ to: '/', label: 'Home', icon: <Home className="size-4" />, end: true },
+	{ to: '/settings', label: 'Settings', icon: <Settings className="size-4" /> }
+];

package/templates/react-monorepo/files/apps/admin/src/app/providers.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { configureApi } from '@acme/api';
+import { AuthProvider, configureAuth, redirectToLogin } from '@acme/auth';
+import { MetaProvider, ThemeProvider, Toaster, installZodErrorMap } from '@acme/ui';
+import { store } from './store';
+
+const env = import.meta.env;
+const apiBaseUrl = env.VITE_APP_API_URL;
+const authAppUrl = env.VITE_APP_AUTH_HOST as string;
+
+const trustedOrigins = [env.VITE_APP_LANDING, env.VITE_APP_CLIENT_HOST, env.VITE_APP_ADMIN_HOST, authAppUrl].filter(
+	(value): value is string => Boolean(value)
+);
+
+// Wire the shared API + auth clients once, before rendering. Unauthenticated users are sent to the Auth app and returned here.
+configureApi({ baseUrl: apiBaseUrl, onUnauthorized: () => redirectToLogin() });
+configureAuth({
+	authApiBaseUrl: `${apiBaseUrl}/auth`,
+	authAppUrl,
+	trustedOrigins,
+	defaultRedirect: (env.VITE_APP_ADMIN_HOST as string | undefined) ?? window.location.origin
+});
+installZodErrorMap();
+
+export function Providers({ children }: { children: ReactNode }) {
+	return (
+		// ThemeProvider above the Redux Provider: it only touches the document
+		// (`dark` class, color-scheme, theme-color meta) and must not re-render
+		// through the store.
+		<ThemeProvider>
+			<MetaProvider>
+				<Provider store={store}>
+					<AuthProvider>
+						{children}
+						<Toaster />
+					</AuthProvider>
+				</Provider>
+			</MetaProvider>
+		</ThemeProvider>
+	);
+}

package/templates/react-monorepo/files/apps/admin/src/app/router.tsx

@@ -0,0 +1,50 @@
+import { Suspense, lazy, type ReactNode } from 'react';
+import { createBrowserRouter } from 'react-router';
+import { ProtectedRoute, signOut, useAuth } from '@acme/auth';
+import { AppShell, AppShellSkeleton, ErrorBoundary, NotFound, RouteFallback } from '@acme/layouts';
+import { NAV_ITEMS } from './nav';
+import { HomeRoute } from '../routes/home';
+
+/**
+ * Feature routes are lazy so the initial bundle stays the shell plus one page.
+ * Add a route here and a matching entry in `nav.tsx`.
+ */
+const SettingsRoute = lazy(() => import('../routes/settings').then((m) => ({ default: m.SettingsRoute })));
+
+const lazyRoute = (element: ReactNode) => <Suspense fallback={<RouteFallback />}>{element}</Suspense>;
+
+/**
+ * The shell reads the session itself rather than taking it as a prop —
+ * `ProtectedRoute` has already established the user is authenticated by the
+ * time this renders.
+ *
+ * `ErrorBoundary` wraps the shell rather than being passed as the route's
+ * `errorElement`: it is a plain React error boundary taking `children`, so it
+ * catches render errors anywhere below, including inside a lazy chunk.
+ */
+function Shell() {
+	const { user } = useAuth();
+	return (
+		<ErrorBoundary>
+			<AppShell nav={NAV_ITEMS} user={user ?? {}} onSignOut={() => void signOut()} />
+		</ErrorBoundary>
+	);
+}
+
+export const router = createBrowserRouter([
+	{
+		// `fallback` is required and must not be blank: the session round trip is
+		// cross-origin and takes most of a second, and rendering nothing for that
+		// long reads as a broken app.
+		element: (
+			<ProtectedRoute fallback={<AppShellSkeleton />}>
+				<Shell />
+			</ProtectedRoute>
+		),
+		children: [
+			{ index: true, element: <HomeRoute /> },
+			{ path: 'settings', element: lazyRoute(<SettingsRoute />) }
+		]
+	},
+	{ path: '*', element: <NotFound /> }
+]);

package/templates/react-monorepo/files/apps/admin/src/app/store.ts

@@ -0,0 +1,15 @@
+import { makeStore } from '@acme/api';
+import { authReducer } from '@acme/auth';
+import { useDispatch, useSelector } from 'react-redux';
+
+export const store = makeStore({
+	reducer: {
+		auth: authReducer
+	}
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/templates/react-monorepo/files/apps/admin/src/lib/env.ts

@@ -0,0 +1,12 @@
+const env = import.meta.env;
+
+/** Backend base URL (Better Auth lives at `${API_URL}/auth`). */
+export const API_URL = env.VITE_APP_API_URL as string;
+/** The Auth app users are redirected to for login. */
+export const AUTH_HOST = env.VITE_APP_AUTH_HOST as string;
+/** This admin console's own origin. */
+export const ADMIN_URL = env.VITE_APP_ADMIN_HOST as string;
+/** The client app origin. */
+export const CLIENT_URL = env.VITE_APP_CLIENT_HOST as string;
+/** The public marketing site (logout destination). */
+export const LANDING_URL = env.VITE_APP_LANDING as string;

package/templates/react-monorepo/files/apps/admin/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router';
+import '@acme/ui/globals.css';
+import { Providers } from './app/providers';
+import { router } from './app/router';
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<Providers>
+			<RouterProvider router={router} />
+		</Providers>
+	</StrictMode>
+);

package/templates/react-monorepo/files/apps/admin/src/routes/home.tsx

@@ -0,0 +1,17 @@
+import { PageMeta } from '@acme/ui';
+
+export function HomeRoute() {
+	return (
+		<>
+			<PageMeta title="Home" />
+			<div className="space-y-2">
+				<h1 className="text-2xl font-semibold">Home</h1>
+				<p className="text-muted-foreground">
+					Replace this with your first feature. Data calls belong in a
+					<code className="mx-1">features/&lt;name&gt;/api.ts</code>
+					slice that extends the shared <code>baseApi</code>.
+				</p>
+			</div>
+		</>
+	);
+}

package/templates/react-monorepo/files/apps/admin/src/routes/settings.tsx

@@ -0,0 +1,10 @@
+import { PageMeta } from '@acme/ui';
+
+export function SettingsRoute() {
+	return (
+		<>
+			<PageMeta title="Settings" />
+			<h1 className="text-2xl font-semibold">Settings</h1>
+		</>
+	);
+}

package/templates/react-monorepo/files/apps/admin/src/vite-env.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+	VITE_APP_API_URL: string;
+	VITE_APP_ALLOWED_HOSTS: string;
+	VITE_APP_AUTH_HOST: string;
+	VITE_APP_CLIENT_HOST: string;
+	VITE_APP_LANDING: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}

package/templates/react-monorepo/files/apps/admin/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@acme/config/tsconfig/react.json",
+	"compilerOptions": {
+		"types": ["vite/client"],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src"]
+}

package/templates/react-monorepo/files/apps/admin/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineAppConfig } from '@acme/config/vite';
+import { BRAND } from '@acme/ui/brand';
+import { THEME_COLORS } from '@acme/ui/theme-colors';
+
+// `themeColors` substitutes %THEME_LIGHT%/%THEME_DARK% into index.html — the
+// pre-paint theme script and the `html` background both need them, and HTML
+// can't import. `appTitle` substitutes %APP_TITLE% for the same reason: the
+// static <title> must match the suffix MetaProvider appends at runtime.
+export default defineAppConfig({
+	rootDir: import.meta.dirname,
+	themeColors: THEME_COLORS,
+	appTitle: BRAND.adminName
+});

package/templates/react-monorepo/files/apps/auth/.bin/secrets.js

@@ -0,0 +1,57 @@
+import { execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Pulls this workspace's env from Infisical into the matching .env file.
+// The Infisical path is derived from the package name, e.g.
+//   @scope/types -> /frontend/types, landing -> /frontend/landing
+//
+// The project ID comes from the environment rather than being hardcoded: it
+// identifies one organisation's vault, so a value baked in here would follow
+// every copy of this scaffold to projects it has nothing to do with. Put it in
+// your shell profile, or in a committed `.infisical.json`.
+const PROJECT_ID = process.env.INFISICAL_PROJECT_ID;
+const SECRET_ROOT = process.env.INFISICAL_PATH_PREFIX ?? '/frontend';
+
+const ENV_FILES = {
+	dev: '.env',
+	test: '.env.test',
+	staging: '.env.staging',
+	prod: '.env.production'
+};
+
+const normalizeEnv = (raw) => {
+	if (['dev', 'development'].includes(raw)) return 'dev';
+	if (['test', 'testing'].includes(raw)) return 'test';
+	if (['prod', 'production'].includes(raw)) return 'prod';
+	if (raw === 'staging') return 'staging';
+	throw new Error(`Unknown env '${raw}' (use one of: dev, test, staging, prod)`);
+};
+
+const parseEnvArg = () => {
+	const args = process.argv.slice(2);
+	const flagIndex = args.findIndex((a) => a === '-e' || a === '--env');
+	if (flagIndex !== -1 && args[flagIndex + 1]) return args[flagIndex + 1];
+	const inline = args.find((a) => a.startsWith('--env='));
+	if (inline) return inline.slice('--env='.length);
+	return 'development';
+};
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
+const slug = pkg.name.replace(/^@[^/]+\//, '');
+const secretPath = `${SECRET_ROOT}/${slug}`;
+
+if (!PROJECT_ID) {
+	console.error('INFISICAL_PROJECT_ID is not set — nothing to fetch from.');
+	process.exit(1);
+}
+
+const env = normalizeEnv(parseEnvArg());
+const envFile = ENV_FILES[env];
+
+console.log(`Fetching secrets for '${slug}' (${env}) -> ${envFile}...`);
+execSync(`infisical export --projectId="${PROJECT_ID}" --path="${secretPath}" --env=${env} > ${envFile}`, {
+	stdio: 'inherit'
+});

package/templates/react-monorepo/files/apps/auth/.env.example

@@ -0,0 +1,16 @@
+# Copy to .env. Vite only exposes variables prefixed VITE_, and inlines them at
+# build time — never put a secret here, it ships to the browser.
+
+# Backend base URL. Better Auth lives at ${VITE_APP_API_URL}/auth.
+VITE_APP_API_URL='http://localhost:5000'
+
+# Sibling app origins. All four share one session cookie across subdomains, so
+# these must agree with the backend's BETTER_AUTH_COOKIE_DOMAIN and its
+# trustedOrigins list, or login will appear to succeed and then bounce.
+VITE_APP_LANDING='http://localhost:3000'
+VITE_APP_AUTH_HOST='http://localhost:3001'
+VITE_APP_CLIENT_HOST='http://localhost:3002'
+VITE_APP_ADMIN_HOST='http://localhost:3003'
+
+# This app's own dev port.
+PORT='3001'

package/templates/react-monorepo/files/apps/auth/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from '@acme/config/eslint';
+
+export default config;

package/templates/react-monorepo/files/apps/auth/index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+		<link rel="icon" href="/favicon.ico" sizes="any" />
+		<link rel="manifest" href="/site.webmanifest" />
+		<meta name="theme-color" content="%THEME_LIGHT%" />
+		<!--
+			Applies the saved (or system) theme before first paint, so the app never
+			flashes light then flips to dark. Mirrors `themeInitScript` in @acme/ui —
+			inlined because it must run before any module loads. Keep the two in sync.
+			%THEME_LIGHT/DARK% come from THEME_COLORS via the shared vite config.
+		-->
+		<script>
+			(function () {
+				try {
+					var m = localStorage.getItem('acme-theme');
+					var d =
+						m === 'dark' || ((m === null || m === 'system') && matchMedia('(prefers-color-scheme: dark)').matches);
+					var r = document.documentElement;
+					r.classList.toggle('dark', d);
+					r.style.colorScheme = d ? 'dark' : 'light';
+					var t = document.querySelector('meta[name="theme-color"]');
+					if (t) t.setAttribute('content', d ? '%THEME_DARK%' : '%THEME_LIGHT%');
+				} catch (e) {}
+			})();
+		</script>
+		<!--
+			globals.css only styles `body`, so without this the UA canvas paints white
+			for the moment before the stylesheet lands — a white flash on a dark load.
+		-->
+		<style>
+			html {
+				background: %THEME_LIGHT%;
+			}
+			html.dark {
+				background: %THEME_DARK%;
+			}
+		</style>
+		<meta name="description" content="Sign in to Acme Corp." />
+		<!--
+			Private surface: never indexed. `robots.txt` only discourages crawling,
+			while `noindex` prevents listing, so both are present. This app's routes
+			include password-reset and email-verify URLs.
+		-->
+		<meta name="robots" content="noindex, nofollow" />
+		<title>%APP_TITLE%</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/templates/react-monorepo/files/apps/auth/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "auth",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc --noEmit && vite build",
+		"preview": "vite preview",
+		"lint": "eslint .",
+		"typecheck": "tsc --noEmit",
+		"secrets": "node .bin/secrets.js"
+	},
+	"dependencies": {
+		"@acme/api": "workspace:*",
+		"@acme/auth": "workspace:*",
+		"@acme/layouts": "workspace:*",
+		"@acme/ui": "workspace:*",
+		"@reduxjs/toolkit": "^2.12.0",
+		"formik": "^2.4.9",
+		"react": "^19.2.6",
+		"react-dom": "^19.2.6",
+		"react-redux": "^9.3.0",
+		"react-router": "^8.2.0"
+	},
+	"devDependencies": {
+		"@acme/config": "workspace:*",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"vite": "^8.0.12"
+	}
+}

package/templates/react-monorepo/files/apps/auth/src/App.tsx

@@ -0,0 +1,3 @@
+// The Auth app is driven by the router (see app/router.tsx); this module is
+// intentionally empty and no longer rendered.
+export {};

package/templates/react-monorepo/files/apps/auth/src/app/providers.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { configureApi } from '@acme/api';
+import { AuthProvider, configureAuth, redirectToLogin } from '@acme/auth';
+import { MetaProvider, ThemeProvider, Toaster, installZodErrorMap } from '@acme/ui';
+import { store } from './store';
+
+const env = import.meta.env;
+const apiBaseUrl = env.VITE_APP_API_URL;
+const authAppUrl = window.location.origin;
+
+const trustedOrigins = [env.VITE_APP_LANDING, env.VITE_APP_CLIENT_HOST, env.VITE_APP_ADMIN_HOST, authAppUrl].filter(
+	(value): value is string => Boolean(value)
+);
+
+// Wire the shared API + auth clients once, before rendering.
+configureApi({ baseUrl: apiBaseUrl, onUnauthorized: () => redirectToLogin() });
+configureAuth({
+	authApiBaseUrl: `${apiBaseUrl}/auth`,
+	authAppUrl,
+	trustedOrigins,
+	defaultRedirect: (env.VITE_APP_CLIENT_HOST as string | undefined) ?? window.location.origin
+});
+installZodErrorMap();
+
+export function Providers({ children }: { children: ReactNode }) {
+	return (
+		// ThemeProvider above the Redux Provider: it only touches the document
+		// (`dark` class, color-scheme, theme-color meta) and must not re-render
+		// through the store.
+		<ThemeProvider>
+			<MetaProvider>
+				<Provider store={store}>
+					<AuthProvider>
+						{children}
+						<Toaster />
+					</AuthProvider>
+				</Provider>
+			</MetaProvider>
+		</ThemeProvider>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/app/router.tsx

@@ -0,0 +1,19 @@
+import { createBrowserRouter, Navigate } from 'react-router';
+import { NotFound } from '@acme/layouts';
+import { ForgotPasswordRoute } from '../routes/forgot-password';
+import { LoginRoute } from '../routes/login';
+import { ResetPasswordRoute } from '../routes/reset-password';
+import { SignupRoute } from '../routes/signup';
+import { VerifiedRoute } from '../routes/verified';
+import { VerifyEmailRoute } from '../routes/verify-email';
+
+export const router = createBrowserRouter([
+	{ path: '/', element: <Navigate to="/login" replace /> },
+	{ path: '/login', element: <LoginRoute /> },
+	{ path: '/signup', element: <SignupRoute /> },
+	{ path: '/forgot-password', element: <ForgotPasswordRoute /> },
+	{ path: '/reset-password', element: <ResetPasswordRoute /> },
+	{ path: '/verify-email', element: <VerifyEmailRoute /> },
+	{ path: '/verified', element: <VerifiedRoute /> },
+	{ path: '*', element: <NotFound /> }
+]);

package/templates/react-monorepo/files/apps/auth/src/app/store.ts

@@ -0,0 +1,15 @@
+import { makeStore } from '@acme/api';
+import { authReducer } from '@acme/auth';
+import { useDispatch, useSelector } from 'react-redux';
+
+export const store = makeStore({
+	reducer: {
+		auth: authReducer
+	}
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/templates/react-monorepo/files/apps/auth/src/components/auth-card.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@acme/ui';
+
+type AuthCardProps = {
+	title: string;
+	description?: ReactNode;
+	children: ReactNode;
+	footer?: ReactNode;
+};
+
+/** Standard auth surface: white 24px card, 900-weight heading, optional footer. */
+export function AuthCard({ title, description, children, footer }: AuthCardProps) {
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle className="font-black">{title}</CardTitle>
+				{description ? <CardDescription className="text-body">{description}</CardDescription> : null}
+			</CardHeader>
+			<CardContent>{children}</CardContent>
+			{footer ? <p className="text-center text-sm text-body">{footer}</p> : null}
+		</Card>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/components/checkbox-field.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { useField } from 'formik';
+import { Checkbox, FormError } from '@acme/ui';
+
+/**
+ * Formik-bound checkbox with the design's inline label treatment.
+ *
+ * `label` is a node, not a string, because the signup consent needs links to
+ * Terms and Privacy inside it. Clicking one does not toggle the box: HTML
+ * defines a label's activation behaviour as doing nothing for events targeted
+ * at interactive descendants.
+ *
+ * `items-start` rather than the design's `center`: the design only has this on
+ * the single-line "Remember me", and consent copy wraps to two or three lines on
+ * a phone — centring would then float the box against the middle of the block.
+ * `mt-0.5` puts it on the first line's optical centre, so the single-line case
+ * looks unchanged.
+ */
+export function CheckboxField({ name, label }: { name: string; label: ReactNode }) {
+	const [field, meta] = useField({ name, type: 'checkbox' });
+	const showError = meta.touched && Boolean(meta.error);
+
+	return (
+		<div className="flex flex-col gap-1.5">
+			<label className="flex cursor-pointer items-start gap-2.5">
+				<Checkbox {...field} checked={field.value} aria-invalid={showError || undefined} className="mt-0.5" />
+				<span className="text-sm text-body">{label}</span>
+			</label>
+			{showError ? <FormError>{meta.error}</FormError> : null}
+		</div>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/components/google-button.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@acme/ui';
+
+function GoogleIcon() {
+	return (
+		<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
+			<path
+				fill="#4285F4"
+				d="M23.5 12.3c0-.9-.1-1.5-.3-2.2H12v4.1h6.5c-.1 1.1-.8 2.7-2.4 3.8l3.7 2.9c2.3-2.1 3.7-5.1 3.7-8.6z"
+			/>
+			<path
+				fill="#34A853"
+				d="M12 24c3.2 0 6-1.1 7.9-2.9l-3.7-2.9c-1 .7-2.4 1.2-4.2 1.2-3.2 0-6-2.1-6.9-5.1L1.2 17.2C3.2 21.2 7.3 24 12 24z"
+			/>
+			<path
+				fill="#FBBC05"
+				d="M5.1 14.3c-.2-.7-.4-1.5-.4-2.3s.2-1.6.4-2.3L1.2 6.8C.4 8.4 0 10.1 0 12s.4 3.6 1.2 5.2l3.9-2.9z"
+			/>
+			<path
+				fill="#EA4335"
+				d="M12 4.6c1.8 0 3 .8 3.7 1.4l3.3-3.2C17 1 14.2 0 12 0 7.3 0 3.2 2.8 1.2 6.8l3.9 2.9c1-3 3.7-5.1 6.9-5.1z"
+			/>
+		</svg>
+	);
+}
+
+export function GoogleButton({
+	onClick,
+	disabled,
+	label = 'Continue with Google'
+}: {
+	onClick: () => void;
+	disabled?: boolean;
+	label?: string;
+}) {
+	return (
+		<Button type="button" variant="outline" className="w-full" onClick={onClick} disabled={disabled}>
+			<GoogleIcon />
+			{label}
+		</Button>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/components/or-divider.tsx

@@ -0,0 +1,9 @@
+export function OrDivider({ label = 'or continue with' }: { label?: string }) {
+	return (
+		<div className="flex items-center gap-3">
+			<span className="h-px flex-1 bg-border" />
+			<span className="text-xs font-medium text-mute">{label}</span>
+			<span className="h-px flex-1 bg-border" />
+		</div>
+	);
+}