@aurostack/stacks 0.1.0

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

@@ -0,0 +1,70 @@
+import { type ReactNode, useState } from 'react';
+import { useField } from 'formik';
+import { FormError, Input, Label, cn } from '@acme/ui';
+import { scorePassword } from '../lib/password-strength';
+
+function StrengthMeter({ score }: { score: number }) {
+	const activeColor = ['bg-border', 'bg-negative', 'bg-warning', 'bg-positive'][score];
+	return (
+		<div className="mt-1 flex gap-1" aria-hidden="true">
+			{[1, 2, 3].map((bar) => (
+				<span key={bar} className={cn('h-1 flex-1 rounded-full', bar <= score ? activeColor : 'bg-border')} />
+			))}
+		</div>
+	);
+}
+
+type PasswordFieldProps = {
+	name: string;
+	label?: string;
+	placeholder?: string;
+	autoComplete?: string;
+	showStrength?: boolean;
+	/** Replaces the show/hide toggle in the label row (e.g. a "Forgot password?" link). */
+	action?: ReactNode;
+};
+
+export function PasswordField({
+	name,
+	label = 'Password',
+	placeholder,
+	autoComplete = 'current-password',
+	showStrength = false,
+	action
+}: PasswordFieldProps) {
+	const [field, meta] = useField(name);
+	const [visible, setVisible] = useState(false);
+	const showError = meta.touched && Boolean(meta.error);
+	const strength = showStrength ? scorePassword((field.value as string) ?? '') : null;
+
+	return (
+		<div className="flex flex-col gap-1.5">
+			<div className="flex items-center justify-between">
+				<Label htmlFor={name}>{label}</Label>
+				{action ?? (
+					<button
+						type="button"
+						onClick={() => setVisible((value) => !value)}
+						className="text-xs font-semibold text-ink-deep"
+					>
+						{visible ? 'Hide' : 'Show'}
+					</button>
+				)}
+			</div>
+			<Input
+				id={name}
+				type={visible ? 'text' : 'password'}
+				placeholder={placeholder}
+				autoComplete={autoComplete}
+				aria-invalid={showError || undefined}
+				{...field}
+			/>
+			{strength ? <StrengthMeter score={strength.score} /> : null}
+			{showError ? (
+				<FormError>{meta.error}</FormError>
+			) : strength ? (
+				<p className="text-xs text-mute">{strength.label}</p>
+			) : null}
+		</div>
+	);
+}

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

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button, Spinner, cn } from '@acme/ui';
+
+type SubmitButtonProps = ComponentProps<typeof Button> & {
+	loading?: boolean;
+	children: ReactNode;
+};
+
+export function SubmitButton({ loading, children, className, disabled, ...props }: SubmitButtonProps) {
+	return (
+		<Button type="submit" className={cn('w-full', className)} disabled={disabled || loading} {...props}>
+			{loading ? <Spinner /> : null}
+			{children}
+		</Button>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/lib/auth-actions.ts

@@ -0,0 +1,68 @@
+import { getAuthClient } from '@acme/auth';
+
+type ActionResult = { error?: string };
+
+function messageOf(error: { message?: string } | null | undefined, fallback: string): string {
+	return error?.message ?? fallback;
+}
+
+export async function loginWithEmail(input: {
+	email: string;
+	password: string;
+	remember?: boolean;
+}): Promise<ActionResult> {
+	const { error } = await getAuthClient().signIn.email({
+		email: input.email,
+		password: input.password,
+		rememberMe: input.remember ?? true
+	});
+	return error ? { error: messageOf(error, 'Could not log in. Check your details and try again.') } : {};
+}
+
+export async function signupWithEmail(input: {
+	name: string;
+	email: string;
+	password: string;
+	callbackURL?: string;
+}): Promise<ActionResult> {
+	const { error } = await getAuthClient().signUp.email({
+		name: input.name,
+		email: input.email,
+		password: input.password,
+		callbackURL: input.callbackURL
+	});
+	return error ? { error: messageOf(error, 'Could not create your account.') } : {};
+}
+
+export async function signInWithGoogle(options: {
+	/** Where existing users land after sign-in (usually the client app). */
+	callbackURL?: string;
+	/** Where first-time users land (the onboarding wizard). */
+	newUserCallbackURL?: string;
+}): Promise<void> {
+	await getAuthClient().signIn.social({
+		provider: 'google',
+		callbackURL: options.callbackURL,
+		newUserCallbackURL: options.newUserCallbackURL
+	});
+}
+
+export async function requestPasswordReset(input: { email: string; redirectTo?: string }): Promise<ActionResult> {
+	const { error } = await getAuthClient().requestPasswordReset({ email: input.email, redirectTo: input.redirectTo });
+	return error ? { error: messageOf(error, 'Could not send the reset link.') } : {};
+}
+
+export async function resetPasswordWithToken(input: { newPassword: string; token: string }): Promise<ActionResult> {
+	const { error } = await getAuthClient().resetPassword({ newPassword: input.newPassword, token: input.token });
+	return error ? { error: messageOf(error, 'Could not reset your password. The link may have expired.') } : {};
+}
+
+export async function resendVerification(input: { email: string; callbackURL?: string }): Promise<ActionResult> {
+	const { error } = await getAuthClient().sendVerificationEmail({ email: input.email, callbackURL: input.callbackURL });
+	return error ? { error: messageOf(error, 'Could not resend the email.') } : {};
+}
+
+export async function verifyEmailToken(token: string): Promise<ActionResult> {
+	const { error } = await getAuthClient().verifyEmail({ query: { token } });
+	return error ? { error: messageOf(error, 'Could not verify your email. The link may have expired.') } : {};
+}

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

@@ -0,0 +1,8 @@
+const env = import.meta.env;
+
+export const APP_URL = env.VITE_APP_CLIENT_HOST;
+export const ADMIN_URL = env.VITE_APP_ADMIN_HOST;
+export const API_URL = env.VITE_APP_API_URL;
+/** Terms and Privacy live on the marketing site, which is a different origin. */
+export const LANDING_URL = env.VITE_APP_LANDING;
+export const AUTH_URL = window.location.origin;

package/templates/react-monorepo/files/apps/auth/src/lib/password-strength.ts

@@ -0,0 +1,20 @@
+export type PasswordStrength = {
+	/** 0 (empty/too short) … 3 (strong) */
+	score: 0 | 1 | 2 | 3;
+	label: string;
+};
+
+/** Lightweight strength heuristic driving the 3-bar meter on the signup screen. */
+export function scorePassword(password: string): PasswordStrength {
+	if (!password) {
+		return { score: 0, label: 'Use 8+ characters with a mix of letters and numbers.' };
+	}
+	let points = 0;
+	if (password.length >= 8) points += 1;
+	if (/[a-z]/.test(password) && /[A-Z]/.test(password)) points += 1;
+	if (/\d/.test(password) || /[^A-Za-z0-9]/.test(password)) points += 1;
+
+	const score = Math.min(points, 3) as 0 | 1 | 2 | 3;
+	const labels = ['Too short', 'Weak — add more variety', 'Getting there', 'Strong password'];
+	return { score, label: labels[score] };
+}

package/templates/react-monorepo/files/apps/auth/src/lib/redirect.ts

@@ -0,0 +1,6 @@
+/** Append the current `redirect` param to an in-app path (threads it across screens). */
+export function withRedirect(path: string, redirect: string | null): string {
+	if (!redirect) return path;
+	const separator = path.includes('?') ? '&' : '?';
+	return `${path}${separator}redirect=${encodeURIComponent(redirect)}`;
+}

package/templates/react-monorepo/files/apps/auth/src/lib/schemas.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+	email: z.string().min(1, 'Email is required').email('Enter a valid email'),
+	password: z.string().min(1, 'Password is required'),
+	remember: z.boolean().optional()
+});
+export type LoginValues = z.infer<typeof loginSchema>;
+
+export const signupSchema = z.object({
+	name: z.string().min(1, 'Enter your name'),
+	email: z.string().min(1, 'Email is required').email('Enter a valid email'),
+	password: z.string().min(8, 'At least 8 characters'),
+	// Consent is a gate, not a preference, so it is validated rather than merely
+	// displayed. It is stripped before the payload reaches the API — see
+	// `SignupRoute`; nothing on the server takes it.
+	acceptedTerms: z.boolean().refine((accepted) => accepted, {
+		message: 'Please accept the terms to continue'
+	})
+});
+export type SignupValues = z.infer<typeof signupSchema>;
+
+export const forgotSchema = z.object({
+	email: z.string().min(1, 'Email is required').email('Enter a valid email')
+});
+export type ForgotValues = z.infer<typeof forgotSchema>;
+
+export const resetSchema = z
+	.object({
+		password: z.string().min(8, 'At least 8 characters'),
+		confirm: z.string().min(1, 'Confirm your password')
+	})
+	.refine((values) => values.password === values.confirm, {
+		message: "Passwords don't match yet.",
+		path: ['confirm']
+	});
+export type ResetValues = z.infer<typeof resetSchema>;

package/templates/react-monorepo/files/apps/auth/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/auth/src/routes/forgot-password.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { Form, Formik } from 'formik';
+import { Link, useNavigate } from 'react-router';
+import { toFormikValidationSchema } from 'zod-formik-adapter';
+import { AuthLayout } from '@acme/layouts';
+import { Alert, Button, FormField } from '@acme/ui';
+import { AuthCard } from '../components/auth-card';
+import { SubmitButton } from '../components/submit-button';
+import { requestPasswordReset } from '../lib/auth-actions';
+import { AUTH_URL } from '../lib/env';
+import { forgotSchema } from '../lib/schemas';
+
+export function ForgotPasswordRoute() {
+	const navigate = useNavigate();
+	const [error, setError] = useState<string | null>(null);
+	const [sentTo, setSentTo] = useState<string | null>(null);
+
+	return (
+		<AuthLayout>
+			<AuthCard
+				title="Reset your password"
+				footer={
+					<Link to="/login" className="font-semibold text-ink-deep">
+						← Back to log in
+					</Link>
+				}
+			>
+				{sentTo ? (
+					<div className="flex flex-col gap-4">
+						<div className="flex items-start gap-3 rounded-2xl bg-accent p-4">
+							<span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground">
+								✓
+							</span>
+							<div>
+								<p className="text-sm font-semibold text-foreground">Reset link sent</p>
+								<p className="mt-0.5 text-sm text-body">
+									If <strong className="font-semibold">{sentTo}</strong> has an account, a link is on its way. It
+									expires in 30 minutes.
+								</p>
+							</div>
+						</div>
+						<Button variant="outline" className="w-full" onClick={() => navigate('/reset-password')}>
+							I have the link — set a new password
+						</Button>
+					</div>
+				) : (
+					<>
+						{error ? (
+							<Alert variant="destructive" className="mb-4">
+								{error}
+							</Alert>
+						) : null}
+						<p className="mb-4 text-sm text-body">
+							Enter the email you signed up with and we'll send you a reset link.
+						</p>
+						<Formik
+							initialValues={{ email: '' }}
+							validationSchema={toFormikValidationSchema(forgotSchema)}
+							onSubmit={async (values, helpers) => {
+								setError(null);
+								const { error: err } = await requestPasswordReset({
+									email: values.email,
+									redirectTo: `${AUTH_URL}/reset-password`
+								});
+								helpers.setSubmitting(false);
+								if (err) {
+									setError(err);
+									return;
+								}
+								setSentTo(values.email);
+							}}
+						>
+							{({ isSubmitting }) => (
+								<Form className="flex flex-col gap-4">
+									<FormField
+										name="email"
+										label="Email"
+										type="email"
+										placeholder="ama@example.com"
+										autoComplete="email"
+									/>
+									<SubmitButton loading={isSubmitting}>Send reset link</SubmitButton>
+								</Form>
+							)}
+						</Formik>
+					</>
+				)}
+			</AuthCard>
+		</AuthLayout>
+	);
+}

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

@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Form, Formik } from 'formik';
+import { Link, useSearchParams } from 'react-router';
+import { toFormikValidationSchema } from 'zod-formik-adapter';
+import { getSafeRedirect } from '@acme/auth';
+import { AuthLayout } from '@acme/layouts';
+import { Alert, FormField } from '@acme/ui';
+import { AuthCard } from '../components/auth-card';
+import { CheckboxField } from '../components/checkbox-field';
+import { GoogleButton } from '../components/google-button';
+import { OrDivider } from '../components/or-divider';
+import { PasswordField } from '../components/password-field';
+import { SubmitButton } from '../components/submit-button';
+import { loginWithEmail, signInWithGoogle } from '../lib/auth-actions';
+import { APP_URL } from '../lib/env';
+import { withRedirect } from '../lib/redirect';
+import { loginSchema } from '../lib/schemas';
+
+export function LoginRoute() {
+	const [params] = useSearchParams();
+	const redirect = params.get('redirect');
+	const [error, setError] = useState<string | null>(null);
+	const target = () => getSafeRedirect(redirect, APP_URL);
+
+	return (
+		<AuthLayout>
+			<AuthCard
+				title="Welcome back"
+				description="Log in to pick up where you left off."
+				footer={
+					<>
+						New here?{' '}
+						<Link to={withRedirect('/signup', redirect)} className="font-semibold text-ink-deep">
+							Create a free account
+						</Link>
+					</>
+				}
+			>
+				{error ? (
+					<Alert variant="destructive" className="mb-4">
+						{error}
+					</Alert>
+				) : null}
+				<Formik
+					initialValues={{ email: '', password: '', remember: true }}
+					validationSchema={toFormikValidationSchema(loginSchema)}
+					onSubmit={async (values, helpers) => {
+						setError(null);
+						const { error: err } = await loginWithEmail(values);
+						helpers.setSubmitting(false);
+						if (err) {
+							setError(err);
+							return;
+						}
+						window.location.assign(target());
+					}}
+				>
+					{({ isSubmitting }) => (
+						<Form className="flex flex-col gap-4">
+							<FormField name="email" label="Email" type="email" placeholder="ama@example.com" autoComplete="email" />
+							<PasswordField
+								name="password"
+								label="Password"
+								placeholder="Your password"
+								autoComplete="current-password"
+								action={
+									<Link to="/forgot-password" className="text-xs font-semibold text-ink-deep">
+										Forgot password?
+									</Link>
+								}
+							/>
+							<CheckboxField name="remember" label="Remember me on this device" />
+							<SubmitButton loading={isSubmitting}>Log in</SubmitButton>
+							<OrDivider />
+							<GoogleButton onClick={() => void signInWithGoogle({ callbackURL: target() })} disabled={isSubmitting} />
+						</Form>
+					)}
+				</Formik>
+			</AuthCard>
+		</AuthLayout>
+	);
+}

package/templates/react-monorepo/files/apps/auth/src/routes/reset-password.tsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Form, Formik } from 'formik';
+import { Link, useNavigate, useSearchParams } from 'react-router';
+import { toFormikValidationSchema } from 'zod-formik-adapter';
+import { toast } from 'sonner';
+import { AuthLayout } from '@acme/layouts';
+import { Alert } from '@acme/ui';
+import { AuthCard } from '../components/auth-card';
+import { PasswordField } from '../components/password-field';
+import { SubmitButton } from '../components/submit-button';
+import { resetPasswordWithToken } from '../lib/auth-actions';
+import { resetSchema } from '../lib/schemas';
+
+export function ResetPasswordRoute() {
+	const [params] = useSearchParams();
+	const token = params.get('token');
+	const navigate = useNavigate();
+	const [error, setError] = useState<string | null>(null);
+
+	if (!token) {
+		return (
+			<AuthLayout>
+				<AuthCard
+					title="Reset link invalid"
+					description="This password reset link is missing or has expired."
+					footer={
+						<Link to="/forgot-password" className="font-semibold text-ink-deep">
+							Request a new link
+						</Link>
+					}
+				>
+					<Alert variant="destructive">Open the most recent reset email and use its link.</Alert>
+				</AuthCard>
+			</AuthLayout>
+		);
+	}
+
+	return (
+		<AuthLayout>
+			<AuthCard title="Choose a new password">
+				{error ? (
+					<Alert variant="destructive" className="mb-4">
+						{error}
+					</Alert>
+				) : null}
+				<Formik
+					initialValues={{ password: '', confirm: '' }}
+					validationSchema={toFormikValidationSchema(resetSchema)}
+					onSubmit={async (values, helpers) => {
+						setError(null);
+						const { error: err } = await resetPasswordWithToken({ newPassword: values.password, token });
+						helpers.setSubmitting(false);
+						if (err) {
+							setError(err);
+							return;
+						}
+						toast.success('Password updated. You can log in now.');
+						navigate('/login');
+					}}
+				>
+					{({ isSubmitting }) => (
+						<Form className="flex flex-col gap-4">
+							<PasswordField
+								name="password"
+								label="New password"
+								placeholder="At least 8 characters"
+								autoComplete="new-password"
+								showStrength
+							/>
+							<PasswordField
+								name="confirm"
+								label="Confirm new password"
+								placeholder="Type it again"
+								autoComplete="new-password"
+							/>
+							<SubmitButton loading={isSubmitting}>Save new password</SubmitButton>
+						</Form>
+					)}
+				</Formik>
+			</AuthCard>
+		</AuthLayout>
+	);
+}

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

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { Form, Formik } from 'formik';
+import { Link, useNavigate, useSearchParams } from 'react-router';
+import { toFormikValidationSchema } from 'zod-formik-adapter';
+import { getSafeRedirect } from '@acme/auth';
+import { AuthLayout } from '@acme/layouts';
+import { Alert, FormField } from '@acme/ui';
+import { AuthCard } from '../components/auth-card';
+import { CheckboxField } from '../components/checkbox-field';
+import { GoogleButton } from '../components/google-button';
+import { OrDivider } from '../components/or-divider';
+import { PasswordField } from '../components/password-field';
+import { SubmitButton } from '../components/submit-button';
+import { signInWithGoogle, signupWithEmail } from '../lib/auth-actions';
+import { APP_URL, AUTH_URL, LANDING_URL } from '../lib/env';
+import { withRedirect } from '../lib/redirect';
+import { signupSchema } from '../lib/schemas';
+
+/**
+ * Terms and Privacy are on the marketing site, so these are absolute and open in
+ * a new tab — a same-tab navigation across origins would discard a half-filled
+ * signup form, and asking someone to re-enter it to read what they are agreeing
+ * to is how consent gets clicked through unread.
+ */
+const legalLinkClass = 'font-semibold text-ink-deep underline underline-offset-2';
+
+function TermsLabel() {
+	return (
+		<>
+			I agree to the{' '}
+			<a href={`${LANDING_URL}/terms`} target="_blank" rel="noopener noreferrer" className={legalLinkClass}>
+				Terms of Service
+			</a>{' '}
+			and{' '}
+			<a href={`${LANDING_URL}/privacy`} target="_blank" rel="noopener noreferrer" className={legalLinkClass}>
+				Privacy Policy
+			</a>
+			.
+		</>
+	);
+}
+
+export function SignupRoute() {
+	const [params] = useSearchParams();
+	const redirect = params.get('redirect');
+	const navigate = useNavigate();
+	const [error, setError] = useState<string | null>(null);
+
+	return (
+		<AuthLayout>
+			<AuthCard
+				title="Create your free account"
+				description="No fees, no card — get started in a minute."
+				footer={
+					<>
+						Already have an account?{' '}
+						<Link to={withRedirect('/login', redirect)} className="font-semibold text-ink-deep">
+							Log in
+						</Link>
+					</>
+				}
+			>
+				{error ? (
+					<Alert variant="destructive" className="mb-4">
+						{error}
+					</Alert>
+				) : null}
+				<Formik
+					initialValues={{ name: '', email: '', password: '', acceptedTerms: false }}
+					validationSchema={toFormikValidationSchema(signupSchema)}
+					onSubmit={async ({ name, email, password }, helpers) => {
+						setError(null);
+						const { error: err } = await signupWithEmail({
+							name,
+							email,
+							password,
+							callbackURL: `${AUTH_URL}/verified`
+						});
+						helpers.setSubmitting(false);
+						if (err) {
+							setError(err);
+							return;
+						}
+						navigate(withRedirect(`/verify-email?email=${encodeURIComponent(email)}`, redirect));
+					}}
+				>
+					{({ isSubmitting, values }) => (
+						<Form className="flex flex-col gap-4">
+							<FormField name="name" label="Full name" placeholder="Ama Mensah" autoComplete="name" />
+							<FormField name="email" label="Email" type="email" placeholder="ama@example.com" autoComplete="email" />
+							<PasswordField
+								name="password"
+								label="Password"
+								placeholder="At least 8 characters"
+								autoComplete="new-password"
+								showStrength
+							/>
+							<CheckboxField name="acceptedTerms" label={<TermsLabel />} />
+							<SubmitButton loading={isSubmitting}>Create account</SubmitButton>
+							<OrDivider />
+							{/* Google is a second route to the same account, so the same gate applies —
+								    otherwise the consent is one click away from being skipped entirely. */}
+							<GoogleButton
+								onClick={() =>
+									void signInWithGoogle({
+										callbackURL: getSafeRedirect(redirect, APP_URL)
+									})
+								}
+								disabled={isSubmitting || !values.acceptedTerms}
+							/>
+						</Form>
+					)}
+				</Formik>
+			</AuthCard>
+		</AuthLayout>
+	);
+}

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

@@ -0,0 +1,30 @@
+import { useSearchParams } from 'react-router';
+import { Check } from 'lucide-react';
+import { getSafeRedirect } from '@acme/auth';
+import { AuthLayout } from '@acme/layouts';
+import { Button, Card } from '@acme/ui';
+import { APP_URL } from '../lib/env';
+
+export function VerifiedRoute() {
+	const [params] = useSearchParams();
+	const redirect = params.get('redirect');
+
+	return (
+		<AuthLayout>
+			<Card className="items-center text-center">
+				<span className="flex size-16 items-center justify-center rounded-full bg-primary text-primary-foreground">
+					<Check className="size-8" strokeWidth={2.4} />
+				</span>
+				<div className="flex flex-col gap-2">
+					<h2 className="font-display text-2xl font-black text-foreground">You're verified</h2>
+					<p className="text-sm text-body">
+						Your email is confirmed. Continue to Acme Corp — everything is ready for you.
+					</p>
+				</div>
+				<Button className="w-full" onClick={() => window.location.assign(getSafeRedirect(redirect, APP_URL))}>
+					Continue
+				</Button>
+			</Card>
+		</AuthLayout>
+	);
+}