@draftlab/auth 0.0.3 → 0.1.0

package/dist/ui/select.d.ts

@@ -1,233 +1,34 @@
+import { Theme } from "../themes/theme.js";
+
 //#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.
+ * Provider configuration for the select UI
  */
 interface ProviderConfig {
-  /**
-   * Whether to hide the provider from the select UI.
-   * When true, the provider will not appear in the selection interface.
-   *
-   * @default false
-   */
+  /** Whether to hide the provider from the select UI */
   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"
-   */
+  /** Custom display name for this provider */
   display?: string;
 }
 /**
- * Configuration properties for the Select UI component.
- * Provides comprehensive customization of appearance and behavior.
+ * Props for the Select component
  */
 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"
-   *   }
-   * }
-   * ```
-   */
+  /** Provider-specific configurations */
   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>;
+  /** Custom copy text overrides */
+  copy?: {
+    button_provider?: string;
+  };
+  /** Global display name overrides for provider types */
+  displays?: Record<string, string>;
+  /** Theme configuration */
+  theme?: Theme;
 }
 /**
- * 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
+ * Creates a provider selection UI
  */
-declare const Select: (props?: SelectProps) => (providers: Record<string, string>, _req: Request) => Promise<Response>;
+declare const Select: (props?: SelectProps) => (providers: Record<string, string>) => Promise<Response>;
 //#endregion
-export { KnownProviderType, ProviderConfig, Select, SelectCopy, SelectProps };
+export { ProviderConfig, Select, SelectProps };

package/dist/ui/select.js

@@ -1,6 +1,93 @@
-import "../theme-CswaLtbW.js";
-import "../base-DRutbxgL.js";
-import "../icon-Ci5uqGB_.js";
-import { Select } from "../select-BjySLL8I.js";
+import { Layout, renderToHTML } from "./base.js";
+import { ICON_GITHUB, ICON_GOOGLE } from "./icon.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
 
+//#region src/ui/select.tsx
+/**
+* Icon components for providers
+*/
+const PROVIDER_ICONS = {
+	github: ICON_GITHUB,
+	google: ICON_GOOGLE,
+	code: () => /* @__PURE__ */ jsx("svg", {
+		width: "20",
+		height: "20",
+		viewBox: "0 0 52 52",
+		fill: "currentColor",
+		"aria-label": "Code authentication",
+		role: "img",
+		children: /* @__PURE__ */ jsx("path", { d: "M8.55,36.91A6.55,6.55,0,1,1,2,43.45,6.54,6.54,0,0,1,8.55,36.91Zm17.45,0a6.55,6.55,0,1,1-6.55,6.54A6.55,6.55,0,0,1,26,36.91Zm17.45,0a6.55,6.55,0,1,1-6.54,6.54A6.54,6.54,0,0,1,43.45,36.91ZM8.55,19.45A6.55,6.55,0,1,1,2,26,6.55,6.55,0,0,1,8.55,19.45Zm17.45,0A6.55,6.55,0,1,1,19.45,26,6.56,6.56,0,0,1,26,19.45Zm17.45,0A6.55,6.55,0,1,1,36.91,26,6.55,6.55,0,0,1,43.45,19.45ZM8.55,2A6.55,6.55,0,1,1,2,8.55,6.54,6.54,0,0,1,8.55,2ZM26,2a6.55,6.55,0,1,1-6.55,6.55A6.55,6.55,0,0,1,26,2ZM43.45,2a6.55,6.55,0,1,1-6.54,6.55A6.55,6.55,0,0,1,43.45,2Z" })
+	})
+};
+/**
+* Default display names for provider types
+*/
+const DEFAULT_DISPLAYS = {
+	github: "GitHub",
+	google: "Google",
+	code: "Code",
+	password: "Password"
+};
+/**
+* Individual provider button component
+*/
+const ProviderButton = ({ providerKey, providerType, config, displays, buttonText }) => {
+	const displayName = config?.display || displays[providerType] || DEFAULT_DISPLAYS[providerType] || providerType;
+	const IconComponent = PROVIDER_ICONS[providerKey] || PROVIDER_ICONS[providerType];
+	return /* @__PURE__ */ jsxs("a", {
+		href: `./${providerKey}/authorize`,
+		"data-component": "button",
+		"data-color": "ghost",
+		"aria-label": `${buttonText} ${displayName}`,
+		children: [
+			IconComponent && /* @__PURE__ */ jsx("i", {
+				"data-slot": "icon",
+				children: /* @__PURE__ */ jsx(IconComponent, {})
+			}),
+			buttonText,
+			" ",
+			displayName
+		]
+	});
+};
+/**
+* Main provider selection component
+*/
+const ProviderSelect = ({ providers, config = {}, theme }) => {
+	const buttonText = config.copy?.button_provider || "Continue with";
+	const displays = {
+		...DEFAULT_DISPLAYS,
+		...config.displays
+	};
+	const visibleProviders = Object.entries(providers).filter(([key]) => !config.providers?.[key]?.hide);
+	return /* @__PURE__ */ jsx(Layout, {
+		theme,
+		title: "Sign In",
+		children: /* @__PURE__ */ jsx("div", {
+			"data-component": "form",
+			children: visibleProviders.map(([key, type]) => /* @__PURE__ */ jsx(ProviderButton, {
+				providerKey: key,
+				providerType: type,
+				config: config.providers?.[key],
+				displays,
+				buttonText
+			}, key))
+		})
+	});
+};
+/**
+* Creates a provider selection UI
+*/
+const Select = (props = {}) => {
+	return async (providers) => {
+		const html = renderToHTML(/* @__PURE__ */ jsx(ProviderSelect, {
+			providers,
+			config: props,
+			theme: props.theme
+		}));
+		return new Response(html, { headers: { "Content-Type": "text/html" } });
+	};
+};
+
+//#endregion
 export { Select };

package/dist/util.d.ts

@@ -1,2 +1,72 @@
-import { Prettify, getRelativeUrl, isDomainMatch, lazy } from "./util-DbSKG1Xm.js";
+import { RouterContext } from "@draftlab/auth-router/types";
+
+//#region src/util.d.ts
+
+/**
+ * Utility type that flattens complex types for better IntelliSense display.
+ * Converts intersections and complex mapped types into cleaner object types.
+ *
+ * @template T - The type to prettify
+ *
+ * @example
+ * ```ts
+ * type Complex = { a: string } & { b: number }
+ * type Clean = Prettify<Complex> // { a: string; b: number }
+ * ```
+ */
+type Prettify<T> = { [K in keyof T]: T[K] } & {};
+/**
+ * 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"
+ * ```
+ */
+declare const getRelativeUrl: (ctx: RouterContext, path: string) => string;
+/**
+ * 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)
+ * ```
+ */
+declare const isDomainMatch: (a: string, b: string) => boolean;
+/**
+ * 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
+ * ```
+ */
+declare const lazy: <T>(fn: () => T) => (() => T);
+//#endregion
 export { Prettify, getRelativeUrl, isDomainMatch, lazy };

package/dist/util.js

@@ -1,3 +1,108 @@
-import { getRelativeUrl, isDomainMatch, lazy } from "./util-CSdHUFOo.js";
+//#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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftlab/auth",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "description": "Core implementation for @draftlab/auth",
   "author": "Matheus Pergoli",
@@ -37,7 +37,7 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@types/node": "^24.0.12",
+    "@types/node": "^24.0.13",
     "tsdown": "^0.12.9",
     "typescript": "^5.8.3",
     "@draftlab/tsconfig": "0.1.0"
@@ -57,7 +57,9 @@
   "dependencies": {
     "@standard-schema/spec": "^1.0.0",
     "jose": "^6.0.11",
-    "@draftlab/auth-router": "0.0.1"
+    "preact": "^10.26.9",
+    "preact-render-to-string": "^6.5.13",
+    "@draftlab/auth-router": "0.0.2"
   },
   "engines": {
     "node": ">=18"

package/dist/allow-CixonwTW.d.ts

@@ -1,59 +0,0 @@
-//#region src/allow.d.ts
-/**
- * Client authorization validation utilities.
- * Provides security checks to determine if OAuth authorization requests should be permitted
- * based on redirect URI validation and domain matching policies.
- */
-/**
- * Input parameters for authorization allow checks.
- * Contains all necessary information to validate if a client request should be permitted.
- */
-interface AllowCheckInput {
-  /** The client ID of the application requesting authorization */
-  readonly clientID: string;
-  /** The redirect URI where the user will be sent after authorization */
-  readonly redirectURI: string;
-  /** Optional audience parameter for the authorization request */
-  readonly audience?: string;
-}
-/**
- * Default authorization check that validates client requests based on redirect URI security.
- *
- * ## Security Policy
- * - **Localhost**: Always allowed (for development)
- * - **Same domain**: Redirect URI must match request origin at TLD+1 level
- * - **Cross-domain**: Rejected for security
- *
- * This prevents unauthorized applications from hijacking authorization codes by using
- * malicious redirect URIs that don't belong to the legitimate client application.
- *
- * @param input - Client request details including ID and redirect URI
- * @param req - The original HTTP request for domain comparison
- * @returns Promise resolving to true if the request should be allowed
- *
- * @example
- * ```ts
- * // Allowed: localhost development
- * await defaultAllowCheck({
- *   clientID: "dev-app",
- *   redirectURI: "http://localhost:3000/callback"
- * }, request) // → true
- *
- * // Allowed: same domain
- * // Request from: https://myapp.com
- * await defaultAllowCheck({
- *   clientID: "web-app",
- *   redirectURI: "https://auth.myapp.com/callback"
- * }, request) // → true
- *
- * // Rejected: different domain
- * // Request from: https://myapp.com
- * await defaultAllowCheck({
- *   clientID: "malicious-app",
- *   redirectURI: "https://evil.com/steal-codes"
- * }, request) // → false
- * ```
- */
-declare const defaultAllowCheck: (input: AllowCheckInput, req: Request) => Promise<boolean>;
-//#endregion
-export { AllowCheckInput, defaultAllowCheck };

package/dist/allow-DX5cehSc.js

@@ -1,63 +0,0 @@
-import { isDomainMatch } from "./util-CSdHUFOo.js";
-
-//#region src/allow.ts
-/**
-* Default authorization check that validates client requests based on redirect URI security.
-*
-* ## Security Policy
-* - **Localhost**: Always allowed (for development)
-* - **Same domain**: Redirect URI must match request origin at TLD+1 level
-* - **Cross-domain**: Rejected for security
-*
-* This prevents unauthorized applications from hijacking authorization codes by using
-* malicious redirect URIs that don't belong to the legitimate client application.
-*
-* @param input - Client request details including ID and redirect URI
-* @param req - The original HTTP request for domain comparison
-* @returns Promise resolving to true if the request should be allowed
-*
-* @example
-* ```ts
-* // Allowed: localhost development
-* await defaultAllowCheck({
-*   clientID: "dev-app",
-*   redirectURI: "http://localhost:3000/callback"
-* }, request) // → true
-*
-* // Allowed: same domain
-* // Request from: https://myapp.com
-* await defaultAllowCheck({
-*   clientID: "web-app",
-*   redirectURI: "https://auth.myapp.com/callback"
-* }, request) // → true
-*
-* // Rejected: different domain
-* // Request from: https://myapp.com
-* await defaultAllowCheck({
-*   clientID: "malicious-app",
-*   redirectURI: "https://evil.com/steal-codes"
-* }, request) // → false
-* ```
-*/
-const defaultAllowCheck = (input, req) => {
-	return Promise.resolve((() => {
-		let redirectHostname;
-		try {
-			redirectHostname = new URL(input.redirectURI).hostname;
-		} catch {
-			return false;
-		}
-		if (redirectHostname === "localhost" || redirectHostname === "127.0.0.1") return true;
-		let currentHostname;
-		try {
-			const forwardedHost = req.headers.get("x-forwarded-host");
-			currentHostname = forwardedHost ? new URL(`https://${forwardedHost}`).hostname : new URL(req.url).hostname;
-		} catch {
-			return false;
-		}
-		return isDomainMatch(redirectHostname, currentHostname);
-	})());
-};
-
-//#endregion
-export { defaultAllowCheck };