@draftlab/auth 0.0.1

package/dist/ui/password.js

@@ -0,0 +1,300 @@
+import "../theme-CswaLtbW.js";
+import { Layout } from "../base-DRutbxgL.js";
+import { FormAlert } from "../form-6XKM_cOk.js";
+
+//#region src/ui/password.ts
+/**
+* Default text copy for all password authentication UI screens.
+* All text can be customized via the copy prop.
+*/
+const DEFAULT_COPY = {
+	error_email_taken: "There is already an account with this email.",
+	error_invalid_code: "Code is incorrect.",
+	error_invalid_email: "Email is not valid.",
+	error_invalid_password: "Password is incorrect.",
+	error_password_mismatch: "Passwords do not match.",
+	error_validation_error: "Password does not meet requirements.",
+	register_title: "Welcome to the app",
+	register_description: "Sign in with your email",
+	login_title: "Welcome to the app",
+	login_description: "Sign in with your email",
+	register: "Register",
+	register_prompt: "Don't have an account?",
+	login_prompt: "Already have an account?",
+	login: "Login",
+	change_prompt: "Forgot password?",
+	code_resend: "Resend code",
+	code_return: "Back to",
+	input_email: "Email",
+	input_password: "Password",
+	input_code: "Code",
+	input_repeat: "Repeat password",
+	button_continue: "Continue",
+	logo: "A"
+};
+/**
+* Creates a complete UI configuration for password-based authentication.
+*/
+const PasswordUI = (options) => {
+	const copy = {
+		...DEFAULT_COPY,
+		...options.copy
+	};
+	/**
+	* Gets the appropriate error message for display.
+	*/
+	const getErrorMessage = (error) => {
+		if (!error?.type) return;
+		if (error.type === "validation_error" && "message" in error && error.message) return error.message;
+		return copy[`error_${error.type}`];
+	};
+	return {
+		validatePassword: options.validatePassword,
+		sendCode: options.sendCode,
+		login: async (_req, form, error) => {
+			const formContent = `
+				<form data-component="form" method="post">
+					${FormAlert({ message: getErrorMessage(error) })}
+
+					<input
+						autocomplete="email"
+						data-component="input"
+						value="${form?.get("email")?.toString() || ""}"
+						name="email"
+						placeholder="${copy.input_email}"
+						required
+						type="email"
+					/>
+
+					<input
+						autocomplete="current-password"
+						data-component="input"
+						name="password"
+						placeholder="${copy.input_password}"
+						required
+						type="password"
+					/>
+
+					<button data-component="button" type="submit">
+						${copy.button_continue}
+					</button>
+
+					<div data-component="form-footer">
+						<span>
+							${copy.register_prompt} 
+							<a data-component="link" href="./register">
+								${copy.register}
+							</a>
+						</span>
+						<a data-component="link" href="./change">
+							${copy.change_prompt}
+						</a>
+					</div>
+				</form>
+			`;
+			const html = Layout({ children: formContent });
+			return new Response(html, {
+				status: error ? 401 : 200,
+				headers: { "Content-Type": "text/html" }
+			});
+		},
+		register: async (_req, state, form, error) => {
+			const emailError = ["invalid_email", "email_taken"].includes(error?.type || "");
+			const passwordError = [
+				"invalid_password",
+				"password_mismatch",
+				"validation_error"
+			].includes(error?.type || "");
+			let formContent = "";
+			if (state.type === "start") formContent = `
+					<form data-component="form" method="post">
+						${FormAlert({ message: getErrorMessage(error) })}
+						
+						<input name="action" type="hidden" value="register" />
+
+						<input
+							autocomplete="email"
+							data-component="input"
+							value="${emailError ? "" : form?.get("email")?.toString() || ""}"
+							name="email"
+							placeholder="${copy.input_email}"
+							required
+							type="email"
+						/>
+
+						<input
+							autocomplete="new-password"
+							data-component="input"
+							value="${passwordError ? "" : form?.get("password")?.toString() || ""}"
+							name="password"
+							placeholder="${copy.input_password}"
+							required
+							type="password"
+						/>
+
+						<input
+							autocomplete="new-password"
+							data-component="input"
+							name="repeat"
+							placeholder="${copy.input_repeat}"
+							required
+							type="password"
+						/>
+
+						<button data-component="button" type="submit">
+							${copy.button_continue}
+						</button>
+
+						<div data-component="form-footer">
+							<span>
+								${copy.login_prompt} 
+								<a data-component="link" href="./authorize">
+									${copy.login}
+								</a>
+							</span>
+						</div>
+					</form>
+				`;
+			else if (state.type === "code") formContent = `
+					<form data-component="form" method="post">
+						${FormAlert({ message: getErrorMessage(error) })}
+						
+						<input name="action" type="hidden" value="verify" />
+
+						<input
+							aria-label="6-digit verification code"
+							autocomplete="one-time-code"
+							data-component="input"
+							inputmode="numeric"
+							maxlength="6"
+							minlength="6"
+							name="code"
+							pattern="[0-9]{6}"
+							placeholder="${copy.input_code}"
+							required
+							type="text"
+						/>
+
+						<button data-component="button" type="submit">
+							${copy.button_continue}
+						</button>
+					</form>
+				`;
+			const html = Layout({ children: formContent });
+			return new Response(html, { headers: { "Content-Type": "text/html" } });
+		},
+		change: async (_req, state, form, error) => {
+			const passwordError = [
+				"invalid_password",
+				"password_mismatch",
+				"validation_error"
+			].includes(error?.type || "");
+			let formContent = "";
+			let additionalForms = "";
+			if (state.type === "start") formContent = `
+					<form data-component="form" method="post">
+						${FormAlert({ message: getErrorMessage(error) })}
+						
+						<input name="action" type="hidden" value="code" />
+
+						<input
+							autocomplete="email"
+							data-component="input"
+							value="${form?.get("email")?.toString() || ""}"
+							name="email"
+							placeholder="${copy.input_email}"
+							required
+							type="email"
+						/>
+
+						<button data-component="button" type="submit">
+							${copy.button_continue}
+						</button>
+					</form>
+				`;
+			else if (state.type === "code") {
+				formContent = `
+					<form data-component="form" method="post">
+						${FormAlert({ message: getErrorMessage(error) })}
+						
+						<input name="action" type="hidden" value="verify" />
+
+						<input
+							aria-label="6-digit verification code"
+							autocomplete="one-time-code"
+							data-component="input"
+							inputmode="numeric"
+							maxlength="6"
+							minlength="6"
+							name="code"
+							pattern="[0-9]{6}"
+							placeholder="${copy.input_code}"
+							required
+							type="text"
+						/>
+
+						<button data-component="button" type="submit">
+							${copy.button_continue}
+						</button>
+					</form>
+				`;
+				additionalForms = `
+					<form method="post">
+						<input name="action" type="hidden" value="code" />
+						<input name="email" type="hidden" value="${state.email}" />
+
+						<div data-component="form-footer">
+							<span>
+								${copy.code_return} 
+								<a data-component="link" href="./authorize">
+									${copy.login.toLowerCase()}
+								</a>
+							</span>
+							<button data-component="link" type="submit">
+								${copy.code_resend}
+							</button>
+						</div>
+					</form>
+				`;
+			} else if (state.type === "update") formContent = `
+					<form data-component="form" method="post">
+						${FormAlert({ message: getErrorMessage(error) })}
+						
+						<input name="action" type="hidden" value="update" />
+
+						<input
+							autocomplete="new-password"
+							data-component="input"
+							value="${passwordError ? "" : form?.get("password")?.toString() || ""}"
+							name="password"
+							placeholder="${copy.input_password}"
+							required
+							type="password"
+						/>
+
+						<input
+							autocomplete="new-password"
+							data-component="input"
+							value="${passwordError ? "" : form?.get("repeat")?.toString() || ""}"
+							name="repeat"
+							placeholder="${copy.input_repeat}"
+							required
+							type="password"
+						/>
+
+						<button data-component="button" type="submit">
+							${copy.button_continue}
+						</button>
+					</form>
+				`;
+			const html = Layout({ children: formContent + additionalForms });
+			return new Response(html, {
+				status: error ? 400 : 200,
+				headers: { "Content-Type": "text/html" }
+			});
+		}
+	};
+};
+
+//#endregion
+export { PasswordUI };

package/dist/ui/select.d.ts

@@ -0,0 +1,233 @@
+//#region src/ui/select.d.ts
+/**
+ * Pre-built UI component for OAuth provider selection.
+ * Displays a clean selection interface where users can choose their preferred authentication method.
+ *
+ * ## Features
+ *
+ * - **Multiple providers**: Support for popular OAuth providers with built-in icons
+ * - **Customizable displays**: Override provider names and copy text
+ * - **Conditional visibility**: Hide specific providers using configuration
+ * - **Type safety**: Full TypeScript support with autocomplete for known providers
+ * - **Accessibility**: Proper ARIA labels and semantic markup
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import { Select } from "@draftauth/core/ui/select"
+ *
+ * export default issuer({
+ *   select: Select({
+ *     copy: {
+ *       button_provider: "Continuar com"
+ *     },
+ *     displays: {
+ *       code: "Código PIN",
+ *       github: "Conta GitHub"
+ *     },
+ *     providers: {
+ *       github: {
+ *         hide: true
+ *       },
+ *       google: {
+ *         display: "Google"
+ *       }
+ *     }
+ *   })
+ *   // ...
+ * })
+ * ```
+ *
+ * ## Provider Configuration
+ *
+ * Each provider can be individually configured:
+ *
+ * - **hide**: Boolean to control visibility
+ * - **display**: Custom display name override
+ *
+ * Global display overrides are applied through the `displays` property, which affects
+ * all providers of that type unless specifically overridden at the provider level.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Default copy text used throughout the select UI.
+ * These values are used when no custom copy is provided.
+ */
+declare const DEFAULT_COPY: {
+  /**
+   * Copy for the provider button prefix text.
+   * @example "Continue with GitHub" where "Continue with" is this value
+   */
+  button_provider: string;
+};
+/**
+ * Default display names for all known provider types.
+ * These provide consistent naming across the application and serve as fallbacks
+ * when no custom display name is configured.
+ */
+declare const DEFAULT_DISPLAY: {
+  steam: string;
+  twitch: string;
+  google: string;
+  github: string;
+  apple: string;
+  code: string;
+  x: string;
+  facebook: string;
+  microsoft: string;
+  slack: string;
+  password: string;
+};
+/**
+ * Customizable copy text for the Select UI component.
+ * Allows overriding default text to support internationalization or custom branding.
+ */
+type SelectCopy = typeof DEFAULT_COPY;
+/**
+ * Union type of all known provider types that have default display names and icons.
+ * These types get autocompletion support in the displays configuration.
+ */
+type KnownProviderType = keyof typeof DEFAULT_DISPLAY;
+/**
+ * Configuration options for individual providers in the select UI.
+ * Each provider can be individually controlled and customized.
+ */
+interface ProviderConfig {
+  /**
+   * Whether to hide the provider from the select UI.
+   * When true, the provider will not appear in the selection interface.
+   *
+   * @default false
+   */
+  hide?: boolean;
+  /**
+   * Custom display name for this specific provider instance.
+   * Overrides both the default display name and any global display override.
+   *
+   * @example "My Custom Google Login"
+   */
+  display?: string;
+}
+/**
+ * Configuration properties for the Select UI component.
+ * Provides comprehensive customization of appearance and behavior.
+ */
+interface SelectProps {
+  /**
+   * Provider-specific configurations mapped by provider key.
+   * Each key corresponds to a provider instance, allowing individual customization.
+   *
+   * @example
+   * ```ts
+   * {
+   *   github: {
+   *     hide: true
+   *   },
+   *   google: {
+   *     display: "Google Account"
+   *   },
+   *   "custom-provider": {
+   *     display: "Custom OAuth"
+   *   }
+   * }
+   * ```
+   */
+  providers?: Record<string, ProviderConfig>;
+  /**
+   * Custom copy text overrides for UI elements.
+   * Useful for internationalization and custom branding.
+   *
+   * @example
+   * ```ts
+   * {
+   *   button_provider: "Sign in with"
+   * }
+   * ```
+   */
+  copy?: Partial<SelectCopy>;
+  /**
+   * Global display name overrides for provider types.
+   *
+   * This allows you to override the default display names globally for all providers
+   * of a specific type. For known provider types, you get full autocompletion support.
+   * Custom provider types are also supported.
+   *
+   * The priority order for display names is:
+   * 1. Provider-specific `display` in `providers` config
+   * 2. Type-specific `displays` override (this property)
+   * 3. Default display name from `DEFAULT_DISPLAY`
+   * 4. Provider type string as fallback
+   *
+   * @example
+   * ```ts
+   * {
+   *   displays: {
+   *     code: "PIN Code",        // ✅ Autocomplete available
+   *     github: "GitHub Account", // ✅ Autocomplete available
+   *     customType: "Custom"     // ✅ Also works for unknown types
+   *   }
+   * }
+   * ```
+   */
+  displays?: Partial<Record<KnownProviderType, string>> & Record<string, string>;
+}
+/**
+ * Creates a provider selection UI component for OAuth authentication.
+ *
+ * This component generates a complete authentication provider selection interface that:
+ * - Displays available OAuth providers as clickable buttons
+ * - Includes appropriate icons for recognized providers
+ * - Supports custom theming and internationalization
+ * - Provides accessible markup with proper ARIA attributes
+ * - Handles provider visibility and custom display names
+ *
+ * @param props - Configuration options for customizing the select UI
+ * @returns An async function that generates the HTML response for the selection interface
+ *
+ * @example
+ * ```ts
+ * // Basic usage with defaults
+ * const selectUI = Select()
+ *
+ * // Customized with provider configuration
+ * const selectUI = Select({
+ *   copy: {
+ *     button_provider: "Sign in with"
+ *   },
+ *   displays: {
+ *     github: "GitHub Account",
+ *     code: "Email Code"
+ *   },
+ *   providers: {
+ *     facebook: { hide: true },
+ *     google: { display: "Google Workspace" }
+ *   }
+ * })
+ *
+ * // Use in issuer configuration
+ * export default issuer({
+ *   select: selectUI,
+ *   // ... other configuration
+ * })
+ * ```
+ *
+ * ## Provider Resolution Logic
+ *
+ * Display names are resolved in the following priority order:
+ * 1. Provider-specific `display` property
+ * 2. Global `displays` type override
+ * 3. Default display name from `DEFAULT_DISPLAY`
+ * 4. Provider type string as final fallback
+ *
+ * ## Accessibility Features
+ *
+ * The generated UI includes:
+ * - Semantic HTML structure
+ * - Proper button roles and keyboard navigation
+ * - Icon accessibility with `aria-hidden="true"`
+ * - Screen reader friendly provider names
+ */
+declare const Select: (props?: SelectProps) => (providers: Record<string, string>, _req: Request) => Promise<Response>;
+//#endregion
+export { KnownProviderType, ProviderConfig, Select, SelectCopy, SelectProps };

package/dist/ui/select.js

@@ -0,0 +1,6 @@
+import "../theme-CswaLtbW.js";
+import "../base-DRutbxgL.js";
+import "../icon-Ci5uqGB_.js";
+import { Select } from "../select-BjySLL8I.js";
+
+export { Select };

package/dist/util-CSdHUFOo.js

@@ -0,0 +1,108 @@
+//#region src/util.ts
+/**
+* Constructs a complete URL relative to the current request context.
+* Handles proxy headers (x-forwarded-*) to ensure correct URL generation
+* in containerized and load-balanced environments.
+*
+* @param ctx - Router context containing request information
+* @param path - Relative path to append to the base URL
+* @returns Complete URL string with proper protocol, host, and port
+*
+* @example
+* ```ts
+* const callbackUrl = getRelativeUrl(ctx, "/callback")
+* // Returns: "https://myapp.com/auth/callback"
+* ```
+*/
+const getRelativeUrl = (ctx, path) => {
+	const result = new URL(path, ctx.request.url);
+	result.host = ctx.header("x-forwarded-host") || result.host;
+	result.protocol = ctx.header("x-forwarded-proto") || result.protocol;
+	result.port = ctx.header("x-forwarded-port") || result.port;
+	return result.toString();
+};
+/**
+* List of known two-part top-level domains that require special handling
+* for domain matching. These domains have an additional level that should
+* be considered when determining effective domain boundaries.
+*/
+const twoPartTlds = [
+	"co.uk",
+	"co.jp",
+	"co.kr",
+	"co.nz",
+	"co.za",
+	"co.in",
+	"com.au",
+	"com.br",
+	"com.cn",
+	"com.mx",
+	"com.tw",
+	"net.au",
+	"org.uk",
+	"ne.jp",
+	"ac.uk",
+	"gov.uk",
+	"edu.au",
+	"gov.au"
+];
+/**
+* Determines if two domain names are considered a match for security purposes.
+* Uses effective TLD+1 matching to allow subdomains while preventing
+* unauthorized cross-domain requests.
+*
+* @param a - First domain name to compare
+* @param b - Second domain name to compare
+* @returns True if domains are considered a security match
+*
+* @example
+* ```ts
+* isDomainMatch("app.example.com", "auth.example.com") // true
+* isDomainMatch("example.com", "evil.com") // false
+* isDomainMatch("app.co.uk", "auth.co.uk") // true (handles two-part TLD)
+* ```
+*/
+const isDomainMatch = (a, b) => {
+	if (a === b) return true;
+	const partsA = a.split(".");
+	const partsB = b.split(".");
+	const hasTwoPartTld = twoPartTlds.some((tld) => a.endsWith(`.${tld}`) || b.endsWith(`.${tld}`));
+	const numParts = hasTwoPartTld ? -3 : -2;
+	const min = Math.min(partsA.length, partsB.length, numParts);
+	const tailA = partsA.slice(min).join(".");
+	const tailB = partsB.slice(min).join(".");
+	return tailA === tailB;
+};
+/**
+* Creates a lazy-evaluated function that caches the result of the first execution.
+* Subsequent calls return the cached value without re-executing the function.
+*
+* @template T - The return type of the lazy function
+* @param fn - Function to execute lazily
+* @returns Function that returns the cached result
+*
+* @example
+* ```ts
+* const expensiveOperation = lazy(() => {
+*   // Computing... (only logs once)
+*   return heavyComputation()
+* })
+*
+* const result1 = expensiveOperation() // Executes and caches
+* const result2 = expensiveOperation() // Returns cached value
+* ```
+*/
+const lazy = (fn) => {
+	let value;
+	let hasValue = false;
+	return () => {
+		if (!hasValue) {
+			value = fn();
+			hasValue = true;
+		}
+		return value;
+	};
+};
+
+//#endregion
+export { getRelativeUrl, isDomainMatch, lazy };