@main12/auth-login 0.3.8 → 0.4.1

package/README.md

@@ -36,6 +36,7 @@ plugins: [
 - **Smart redirects** — logged-in users are redirected away from auth pages
 - **Google account picker** — always shows account selection by default (`prompt: 'select_account'`)
 - **Zero runtime deps** (Tailwind mode) — Next.js + React are peer dependencies
+- **Multi-language** — built-in English/Spanish, auto-detected per-request, fully overridable via `messages` prop, works with or without next-intl/next-i18next
 
 ---
 
@@ -146,6 +147,41 @@ This redirects:
 
 ---
 
+## Testing All Pages
+
+Once the catch-all route is set up, every auth page is reachable directly by URL. Some pages require query params to have meaningful content (they're normally reached by clicking through the flow, e.g. signup → verify-otp), so use the URLs below to test each one in isolation:
+
+| Page | URL to test | Notes |
+|------|-------------|-------|
+| **Login** | `/auth/login` | 3 sub-states, driven by user interaction: email step (default) → password step or OTP-prompt step, depending on whether the account has a password and `passwordLogin`/`otpLogin` config |
+| **Signup** | `/auth/signup` | Hidden entirely if `allowSignup: false` — falls back to rendering Login instead |
+| **Forgot Password** | `/auth/forgot-password` | No query params required |
+| **Verify OTP** | `/auth/verify-otp?email=test@example.com&purpose=signup` | ⚠️ **Renders a blank page if `email` is missing** — always include `?email=...`. `purpose` can be `login`, `signup`, or `password-reset` (changes the title/subtitle) |
+| **Set Password** | `/auth/set-password` | No query params required |
+
+> **Why does `/auth/verify-otp` show a blank page?** The page intentionally renders `null` when there's no `email` in the URL, since in real usage it's always reached via a redirect from signup/login/forgot-password that appends `?email=...&purpose=...`. This is expected — not a bug. Always test it with the full query string above.
+
+### Testing the Login page's 3 sub-states
+
+The Login page's step is internal UI state, not driven by the URL — to see each one:
+1. **Email step** (default) — just load `/auth/login`.
+2. **Password step** — enter an email that belongs to a user *with* a password set, then submit. Requires `passwordLogin: true` (default).
+3. **OTP-prompt step** — enter an email that belongs to a user *without* a password set (e.g. a Google OAuth-only user), with `otpLogin: true` and `passwordLogin: true`.
+
+### Testing Google OAuth
+
+Google OAuth buttons only render when `providers.google` is configured with valid credentials (see [Google OAuth](#google-oauth-providers) below). With no credentials, the button is hidden — this is expected in a fresh setup.
+
+### Testing different locales
+
+Every page also respects the `locale` prop / auto-detection (see [Multi-Language Support](#multi-language-support)). To manually verify a specific language without changing your browser or OS settings, append the plugin's `locale` prop explicitly in your route file, or set the `NEXT_LOCALE` cookie / send an `Accept-Language` header:
+
+```bash
+curl -H "Accept-Language: es-MX,es;q=0.9" http://localhost:3000/auth/login
+```
+
+---
+
 ## Configuration
 
 ```ts
@@ -260,9 +296,91 @@ The `AuthPages` component accepts these props for customization:
   showGoogleOAuth={true}         // Override Google OAuth visibility
   onPasswordLogin={customLogin}  // Custom login handler
   onSignup={customSignup}        // Custom signup handler
+  locale="es"                    // Override auto-detected locale (see Multi-Language Support)
+  messages={{ es: { login: { title: 'Bienvenido' } } }} // Partial translation overrides
+/>
+```
+
+---
+
+## Multi-Language Support
+
+Built-in support for **English (`en`)** and **Spanish (`es`)** — works out of the box, no configuration required. The plugin never depends on next-intl, next-i18next, or any i18n library; it reads the same conventional signals those libraries already write, so it plugs into whatever your app already does automatically.
+
+### Automatic locale detection
+
+If you don't pass a `locale` prop, it's resolved per-request in this order:
+
+1. `NEXT_LOCALE` cookie (written by next-intl, next-i18next, and most i18n routing middlewares by convention)
+2. `Accept-Language` request header
+3. `<html lang="...">` attribute (client-side fallback)
+4. `'en'` (default)
+
+This means if your app already uses next-intl or next-i18next, the auth pages automatically match your site's current language — **zero extra code needed**.
+
+### Explicit locale override
+
+Pass `locale` directly on `<AuthPages />` (or any individual page component) to force a specific language for that render, regardless of auto-detection — useful if you resolve the locale yourself server-side:
+
+```tsx
+// app/(auth)/auth/[...slug]/page.tsx
+import { AuthPages } from '@main12/auth-login/rsc'
+import { getLocale } from 'next-intl/server' // or however your app resolves it
+
+export default async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
+  const { slug } = await params
+  const locale = await getLocale()
+  return <AuthPages slug={slug} locale={locale} />
+}
+```
+
+### Overriding copy / adding new languages
+
+Pass a `messages` object — a partial override, keyed by locale. Any key you don't specify falls back to the built-in English/Spanish copy automatically. You can also introduce entirely new locales this way (e.g. French, Portuguese):
+
+```tsx
+<AuthPages
+  slug={slug}
+  messages={{
+    en: {
+      login: { title: 'Welcome Back!' }, // override just this one key
+    },
+    es: {
+      login: { title: '¡Bienvenido de nuevo!' },
+    },
+    fr: { // brand new locale, not built-in — falls back to English for any key not provided
+      login: { title: 'Content de vous revoir', subtitle: 'Connectez-vous pour continuer.' },
+      signup: { title: 'Créer un compte' },
+    },
+  }}
 />
 ```
 
+Resolution order per key: `messages[locale]` → `messages.en` → built-in `[locale]` dictionary → built-in `en` dictionary.
+
+### Available translation keys
+
+Each page has its own section — see `UiTranslations` (exported from `@main12/auth-login/client`) for the full shape:
+
+| Section | Covers |
+|---------|--------|
+| `login` | Title/subtitle for all 3 sub-states (email, password, OTP-prompt), Google button, form labels, links |
+| `signup` | Title/subtitle, form labels, Google button, terms/privacy links, login link |
+| `forgotPassword` | Title/subtitle, form labels, back-to-login link |
+| `verifyOtp` | Title/subtitle for both variants (code verification vs password-reset), resend button (supports `{seconds}` interpolation) |
+| `setPassword` | Title/subtitle, form labels, password requirements text |
+
+### Using translations in custom pages
+
+If you're building fully custom pages with the hooks (see [Building Custom Pages](#building-custom-pages)), import `getUiTranslations` directly:
+
+```tsx
+import { getUiTranslations } from '@main12/auth-login/client'
+
+const t = getUiTranslations(locale, messages).login
+// t.title, t.continueWithGoogle, t.emailLabel, etc.
+```
+
 ---
 
 ## Individual Page Setup (Advanced)
@@ -455,15 +573,73 @@ await payload.sendEmail({
 
 ---
 
-## Exports
+## Exports & Components Reference
 
 | Import path | Contents |
 |-------------|----------|
-| `@main12/auth-login` | Plugin factory, types, server config |
-| `@main12/auth-login/client` | Page components, `AuthPages`, hooks, services, UI utilities |
-| `@main12/auth-login/rsc` | Email template generators, translations |
+| `@main12/auth-login` | Plugin factory (`authLoginPlugin`), types, server config |
+| `@main12/auth-login/client` | Page components, `AuthPages`, hooks, services, UI/locale utilities |
+| `@main12/auth-login/rsc` | Server component `AuthPages` wrapper, email template generators, email translations |
 | `@main12/auth-login/proxy` | Next.js 16 proxy for route redirects |
 
+### Components (`@main12/auth-login/client` unless noted)
+
+| Component | Description | Typical usage |
+|-----------|-------------|----------------|
+| `AuthPages` (also `@main12/auth-login/rsc`) | Catch-all component — renders the correct page based on `slug`. The `/rsc` version is a server component that auto-resolves plugin config + locale from headers; the `/client` version needs `'use client'` and manual config props | `<AuthPages slug={slug} />` in your `[...slug]/page.tsx` |
+| `LoginPage` | Standalone login page (email → password/OTP flow) | Individual route setup, or full customization via props |
+| `SignupPage` | Standalone signup page | Individual route setup |
+| `ForgotPasswordPage` | Standalone forgot-password page | Individual route setup |
+| `VerifyOtpPage` | Standalone OTP verification page — **requires `?email=...` in the URL** | Reached via redirect from signup/login/forgot-password |
+| `SetPasswordPage` | Standalone set/reset password page | Individual route setup, or post-OTP password creation |
+| `AuthLayout` | Shared card/background/logo/footer chrome used by every page — use it directly when building fully custom pages | `<AuthLayout title="..." subtitle="...">{children}</AuthLayout>` |
+| `AuthClientInit` | Drop into your root layout to sync server plugin config (`style`, Google OAuth flag) to client bundles. Optional — only needed if you hit issues with plugin config not reaching client components in certain bundler setups | `<AuthClientInit />` inside `<body>` |
+| `PoweredBy` | The "Powered by Main 12" footer badge, rendered automatically on every page (configurable via `poweredBy` prop) | Rarely used standalone — mostly internal |
+
+### Hooks (`@main12/auth-login/client`)
+
+| Hook | Returns | Key inputs |
+|------|---------|------------|
+| `useLoginFlow({ redirectTo, onPasswordLogin })` | `step, email, password, error, isLoading, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail` | `redirectTo: string`, `onPasswordLogin: (creds) => Promise<void>` |
+| `useForgotPasswordFlow()` | `email, error, isLoading, setEmail, handleSubmit` | none |
+| `useVerifyOtpFlow({ email, purpose, redirectTo })` | `otp, error, isLoading, isResending, resendCooldown, setOtp, handleSubmit, handleResendCode` | `email: string`, `purpose: 'login'\|'signup'\|'password-reset'` |
+| `useSetPasswordFlow({ redirectTo })` | `password, confirmPassword, error, isLoading, strength, setPassword, setConfirmPassword, handleSubmit` | `redirectTo: string` |
+
+### Service functions (`@main12/auth-login/client`)
+
+Low-level `fetch` wrappers used internally by the hooks — call directly for fully custom flows:
+
+| Function | Description |
+|----------|--------------|
+| `checkEmail(email)` | Checks whether an email is already registered |
+| `sendOtp(email, purpose)` | Requests a new OTP code |
+| `verifyOtp(email, otp, purpose)` | Verifies an OTP code, logs the user in on success |
+| `setUserPassword(password)` | Sets/updates the current user's password |
+| `signup(name, email)` | Creates a new account, triggers welcome email + OTP verification |
+| `initiateGoogleLogin()` | Redirects to the Google OAuth flow |
+
+### Utilities & config (`@main12/auth-login/client`)
+
+| Export | Description |
+|--------|--------------|
+| `initClientConfig(opts)` | Manually sync plugin config into the client bundle (used internally by `AuthPages`/`AuthClientInit`) |
+| `evaluatePasswordStrength(password)` | Returns `{ score, isValid, ... }` — used by the password strength meter |
+| `isPasswordValid(password)` / `MIN_PASSWORD_LENGTH` | Password validation helpers |
+| `getUiTranslations(locale, messages)` | Resolve translated UI copy — see [Multi-Language Support](#multi-language-support) |
+| `uiTranslations` | Raw built-in `{ en, es }` dictionaries, if you need to read them directly |
+| `detectClientLocale()` | Client-side locale auto-detection (cookie → `<html lang>` → `'en'`) |
+
+### Email templates (`@main12/auth-login/rsc`)
+
+| Export | Description |
+|--------|--------------|
+| `generateWelcomeEmail(params)` | Welcome email after signup |
+| `generateOtpEmail(params)` | OTP code email (login/signup/password-reset) |
+| `generatePasswordResetEmail(params)` | Password reset code email |
+| `generatePasswordChangedEmail(params)` | Confirmation after password change |
+| `getEmailTranslations(locale)` | English/Spanish email copy (separate dictionary from the UI translations above) |
+| `wrapInBaseTemplate(options)` | Wraps any HTML body in the plugin's branded email shell |
+
 ---
 
 ## ShadCN Compatibility

package/dist/components/AuthLayout.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { DeepPartial, UiTranslations } from './ui/translations';
 export interface AuthLayoutConfig {
     /** Component or URL. Falls back to pluginConfig when omitted. */
     logo?: React.ReactNode;
@@ -13,6 +14,14 @@ export interface AuthLayoutConfig {
     };
     cardClassName?: string;
     backgroundClass?: string;
+    /**
+     * Locale for this page's copy. Built-in support for 'en' and 'es'.
+     * Auto-detected by `<AuthPages />` when omitted; pass explicitly when using
+     * individual page components directly. Falls back to 'en'.
+     */
+    locale?: string;
+    /** Partial translation overrides, keyed by locale. See `getUiTranslations`. */
+    messages?: Record<string, DeepPartial<UiTranslations>>;
 }
 export interface AuthLayoutProps extends AuthLayoutConfig {
     children: React.ReactNode;

package/dist/components/AuthPages.d.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { DeepPartial, UiTranslations } from './ui/translations';
 export interface AuthPagesProps {
     /** The slug segments from the catch-all route, e.g. ['login'] or ['forgot-password'] */
     slug?: string[];
@@ -30,5 +31,18 @@ export interface AuthPagesProps {
     passwordLogin?: boolean;
     /** Allow OTP-based login. @default true */
     otpLogin?: boolean;
+    /**
+     * Locale for the auth pages' copy. Built-in support for 'en' and 'es'.
+     * If omitted, auto-detected from the `NEXT_LOCALE` cookie, `Accept-Language`
+     * header, or `<html lang>` — works automatically with next-intl,
+     * next-i18next, or no i18n library at all. Falls back to 'en'.
+     */
+    locale?: string;
+    /**
+     * Partial translation overrides, keyed by locale. Any key you omit falls
+     * back to the built-in English/Spanish copy. You can also add entirely new
+     * locales this way (e.g. `messages={{ fr: { login: { title: 'Bienvenue' } } }}`).
+     */
+    messages?: Record<string, DeepPartial<UiTranslations>>;
 }
-export default function AuthPages({ slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, backgroundClass, style, allowSignup, passwordLogin, otpLogin, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;
+export default function AuthPages({ slug, redirectTo, logo, onPasswordLogin, onSignup, basePath, showGoogleOAuth, backgroundClass, style, allowSignup, passwordLogin, otpLogin, locale, messages, }: AuthPagesProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AuthPages.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { pluginConfig, initClientConfig } from '../config.js';
+import { detectClientLocale } from './ui/locale.js';
 import LoginPage from './pages/LoginPage.js';
 import SignupPage from './pages/SignupPage.js';
 import ForgotPasswordPage from './pages/ForgotPasswordPage.js';
@@ -38,7 +39,7 @@ const defaultSignup = async ({ name, email })=>{
         throw new Error(err.message || 'Signup failed');
     }
 };
-export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth, backgroundClass, style, allowSignup = true, passwordLogin = true, otpLogin = true }) {
+export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswordLogin = defaultPasswordLogin, onSignup = defaultSignup, basePath = '/auth', showGoogleOAuth, backgroundClass, style, allowSignup = true, passwordLogin = true, otpLogin = true, locale, messages }) {
     // Sync server plugin config to client using props (which come from the server via AuthPagesServer)
     initClientConfig({
         style: style ?? pluginConfig.style,
@@ -46,10 +47,15 @@ export default function AuthPages({ slug, redirectTo = '/admin', logo, onPasswor
         passwordLogin,
         otpLogin
     });
+    // Resolve locale client-side only if the server didn't already resolve one
+    // (AuthPagesServer always resolves and passes an explicit locale down).
+    const resolvedLocale = locale ?? detectClientLocale();
     const page = slug?.[0] ?? 'login';
     const base = basePath.replace(/\/$/, '');
     const shared = {
         logo,
+        locale: resolvedLocale,
+        messages,
         ...showGoogleOAuth !== undefined ? {
             showGoogleOAuth
         } : {},

package/dist/components/AuthPagesServer.d.ts

@@ -7,6 +7,11 @@ export type { AuthPagesProps };
  * down to the client component. No env vars involved — the plugin's
  * `style`, `googleOAuthEnabled`, etc. options are the single source of truth.
  *
+ * Locale is resolved per-request: an explicit `locale` prop always wins,
+ * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or
+ * `Accept-Language` header (works automatically with next-intl,
+ * next-i18next, or no i18n library at all — no dependency required).
+ *
  * ```tsx
  * // app/(auth)/auth/[...slug]/page.tsx  (NO 'use client' needed!)
  * import { AuthPages } from '@main12/auth-login/rsc'
@@ -16,4 +21,4 @@ export type { AuthPagesProps };
  * }
  * ```
  */
-export default function AuthPages(props: AuthPagesProps): import("react/jsx-runtime").JSX.Element;
+export default function AuthPages(props: AuthPagesProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/AuthPagesServer.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { headers } from 'next/headers';
 import AuthPagesClient from './AuthPages.js';
 import { pluginConfig } from '../config.js';
+import { detectServerLocale } from './ui/locale.js';
 /**
  * Server component wrapper for AuthPages.
  * Reads plugin config directly from the shared `pluginConfig` singleton
@@ -8,6 +10,11 @@ import { pluginConfig } from '../config.js';
  * down to the client component. No env vars involved — the plugin's
  * `style`, `googleOAuthEnabled`, etc. options are the single source of truth.
  *
+ * Locale is resolved per-request: an explicit `locale` prop always wins,
+ * otherwise it's auto-detected from the `NEXT_LOCALE` cookie or
+ * `Accept-Language` header (works automatically with next-intl,
+ * next-i18next, or no i18n library at all — no dependency required).
+ *
  * ```tsx
  * // app/(auth)/auth/[...slug]/page.tsx  (NO 'use client' needed!)
  * import { AuthPages } from '@main12/auth-login/rsc'
@@ -16,13 +23,15 @@ import { pluginConfig } from '../config.js';
  *   return <AuthPages slug={slug} />
  * }
  * ```
- */ export default function AuthPages(props) {
+ */ export default async function AuthPages(props) {
+    const resolvedLocale = props.locale ?? detectServerLocale(await headers());
     return /*#__PURE__*/ _jsx(AuthPagesClient, {
         ...props,
         showGoogleOAuth: props.showGoogleOAuth ?? pluginConfig.googleOAuthEnabled,
         style: props.style ?? pluginConfig.style,
         allowSignup: props.allowSignup ?? pluginConfig.allowSignup,
         passwordLogin: pluginConfig.passwordLogin,
-        otpLogin: pluginConfig.otpLogin
+        otpLogin: pluginConfig.otpLogin,
+        locale: resolvedLocale
     });
 }

package/dist/components/pages/ForgotPasswordPageHero.d.ts

@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout';
 export interface ForgotPasswordPageHeroProps extends AuthLayoutConfig {
     loginUrl?: string;
 }
-export default function ForgotPasswordPageHero({ loginUrl, logo, poweredBy, cardClassName, backgroundClass }: ForgotPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;
+export default function ForgotPasswordPageHero({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, locale, messages }: ForgotPasswordPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPageHero.js

@@ -6,12 +6,14 @@ import { Icon } from '@iconify/react';
 import { motion } from 'framer-motion';
 import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    const t = getUiTranslations(locale, messages).forgotPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: "Forgot Password",
-        subtitle: "Enter your email and we'll send you a reset code",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
@@ -23,7 +25,7 @@ export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, powe
                     icon: "lucide:arrow-left",
                     width: 16
                 }),
-                "Back to Login"
+                t.backToLogin
             ]
         }),
         children: /*#__PURE__*/ _jsxs("form", {
@@ -49,7 +51,7 @@ export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, powe
                     children: [
                         /*#__PURE__*/ _jsx(Label, {
                             className: "text-gray-600",
-                            children: "Email"
+                            children: t.emailLabel
                         }),
                         /*#__PURE__*/ _jsx(Input, {
                             variant: "secondary"
@@ -68,7 +70,7 @@ export default function ForgotPasswordPageHero({ loginUrl = '/login', logo, powe
                                     color: "current",
                                     size: "sm"
                                 }),
-                                "Send Reset Code"
+                                t.sendResetCode
                             ]
                         })
                 })

package/dist/components/pages/ForgotPasswordPageTailwind.d.ts

@@ -2,4 +2,4 @@ import type { AuthLayoutConfig } from '../AuthLayout';
 export interface ForgotPasswordPageProps extends AuthLayoutConfig {
     loginUrl?: string;
 }
-export default function ForgotPasswordPage({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, }: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;
+export default function ForgotPasswordPage({ loginUrl, logo, poweredBy, cardClassName, backgroundClass, locale, messages, }: ForgotPasswordPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/pages/ForgotPasswordPageTailwind.js

@@ -4,19 +4,24 @@ import React from 'react';
 import { Button, Input } from '../ui/index.js';
 import { useForgotPasswordFlow } from '../../auth/application/hooks/useForgotPasswordFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const { email, error, isLoading, setEmail, handleSubmit } = useForgotPasswordFlow();
+    const t = getUiTranslations(locale, messages).forgotPassword;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
-        title: "Forgot Password",
-        subtitle: "Enter your email and we'll send you a reset code",
+        title: t.title,
+        subtitle: t.subtitle,
         poweredBy: poweredBy,
         cardClassName: cardClassName,
         backgroundClass: backgroundClass,
-        footer: /*#__PURE__*/ _jsx("a", {
+        footer: /*#__PURE__*/ _jsxs("a", {
             href: loginUrl,
             className: "text-sm text-gray-600 hover:text-gray-900 inline-flex items-center gap-1",
-            children: "← Back to Login"
+            children: [
+                "← ",
+                t.backToLogin
+            ]
         }),
         children: /*#__PURE__*/ _jsxs("form", {
             onSubmit: handleSubmit,
@@ -28,7 +33,7 @@ export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredB
                 }),
                 /*#__PURE__*/ _jsx(Input, {
                     type: "email",
-                    label: "Email",
+                    label: t.emailLabel,
                     value: email,
                     onChange: (e)=>setEmail(e.target.value),
                     isRequired: true
@@ -37,7 +42,7 @@ export default function ForgotPasswordPage({ loginUrl = '/login', logo, poweredB
                     type: "submit",
                     variant: "primary",
                     isLoading: isLoading,
-                    children: "Send Reset Code"
+                    children: t.sendResetCode
                 })
             ]
         })

package/dist/components/pages/LoginPageHero.js

@@ -7,15 +7,17 @@ import { motion, AnimatePresence } from 'framer-motion';
 import { Icon } from '@iconify/react';
 import { useLoginFlow } from '../../auth/application/hooks/useLoginFlow.js';
 import { AuthLayout } from '../AuthLayout.js';
-function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass }) {
+import { getUiTranslations } from '../ui/translations.js';
+function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth = true, signupUrl = '/signup', logo, poweredBy, cardClassName, backgroundClass, locale, messages }) {
     const searchParams = useSearchParams();
     const resolvedRedirect = searchParams.get('redirect') || redirectTo;
+    const t = getUiTranslations(locale, messages).login;
     const { step, email, password, error, isLoading, isSendingOtp, showPassword, setEmail, setPassword, setShowPassword, handleEmailSubmit, handlePasswordSubmit, handleSendOtp, handleEditEmail, handleGoogleLogin } = useLoginFlow({
         redirectTo: resolvedRedirect,
         onPasswordLogin
     });
-    const stepTitle = step === 'otp-prompt' ? 'Verify Identity' : step === 'email' ? 'Welcome Back' : 'Enter Password';
-    const stepSubtitle = step === 'otp-prompt' ? "We need to verify it's you." : step === 'email' ? 'Sign in with your email to continue.' : 'Enter your password to sign in.';
+    const stepTitle = step === 'otp-prompt' ? t.otpPromptTitle : step === 'email' ? t.title : t.passwordStepTitle;
+    const stepSubtitle = step === 'otp-prompt' ? t.otpPromptSubtitle : step === 'email' ? t.subtitle : t.passwordStepSubtitle;
     return /*#__PURE__*/ _jsx(AuthLayout, {
         logo: logo,
         title: stepTitle,
@@ -26,12 +28,12 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
         footer: signupUrl ? /*#__PURE__*/ _jsxs("p", {
             className: "text-center text-gray-600 text-sm",
             children: [
-                "Don't have an account?",
+                t.noAccount,
                 ' ',
                 /*#__PURE__*/ _jsx("a", {
                     href: signupUrl,
                     className: "text-gray-900 font-medium hover:underline",
-                    children: "Sign up"
+                    children: t.signUpLink
                 })
             ]
         }) : undefined,
@@ -67,7 +69,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                             icon: "flat-color-icons:google",
                                             width: 20
                                         }),
-                                        "Continue with Google"
+                                        t.continueWithGoogle
                                     ]
                                 }),
                                 /*#__PURE__*/ _jsxs("div", {
@@ -78,7 +80,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                         }),
                                         /*#__PURE__*/ _jsx("span", {
                                             className: "text-gray-500 text-sm",
-                                            children: "or"
+                                            children: t.or
                                         }),
                                         /*#__PURE__*/ _jsx(Separator, {
                                             className: "flex-1"
@@ -110,7 +112,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     children: [
                                         /*#__PURE__*/ _jsx(Label, {
                                             className: "text-gray-600",
-                                            children: "Email"
+                                            children: t.emailLabel
                                         }),
                                         /*#__PURE__*/ _jsx(Input, {
                                             variant: "secondary"
@@ -128,7 +130,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                                     color: "current",
                                                     size: "sm"
                                                 }),
-                                                "Continue"
+                                                t.continue
                                             ]
                                         })
                                 })
@@ -164,7 +166,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     type: "button",
                                     onClick: handleEditEmail,
                                     className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                    children: "Edit"
+                                    children: t.edit
                                 })
                             ]
                         }),
@@ -192,7 +194,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     children: [
                                         /*#__PURE__*/ _jsx(Label, {
                                             className: "text-gray-600",
-                                            children: "Password"
+                                            children: t.passwordLabel
                                         }),
                                         /*#__PURE__*/ _jsxs("div", {
                                             className: "relative",
@@ -219,7 +221,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     children: /*#__PURE__*/ _jsx("a", {
                                         href: "/forgot-password",
                                         className: "text-sm text-gray-700 hover:underline",
-                                        children: "Forgot password?"
+                                        children: t.forgotPassword
                                     })
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
@@ -234,7 +236,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                                     color: "current",
                                                     size: "sm"
                                                 }),
-                                                "Continue"
+                                                t.continue
                                             ]
                                         })
                                 })
@@ -270,7 +272,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                     type: "button",
                                     onClick: handleEditEmail,
                                     className: "text-gray-600 text-sm font-medium hover:text-gray-900",
-                                    children: "Edit"
+                                    children: t.edit
                                 })
                             ]
                         }),
@@ -288,7 +290,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                 }),
                                 /*#__PURE__*/ _jsx("p", {
                                     className: "text-sm text-blue-700",
-                                    children: "We'll send a verification code to this email."
+                                    children: t.verificationNotice
                                 })
                             ]
                         }),
@@ -304,7 +306,7 @@ function LoginHeroContent({ onPasswordLogin, redirectTo = '/', showGoogleOAuth =
                                             color: "current",
                                             size: "sm"
                                         }),
-                                        isPending ? 'Sending...' : 'Send Code'
+                                        isPending ? t.sendingCode : t.sendCode
                                     ]
                                 })
                         })