@draftlab/auth 0.6.0 → 0.8.0

package/dist/core.mjs

@@ -187,6 +187,15 @@ const issuer = (input) => {
 			const authorization = await getAuthorization(ctx);
 			const currentProvider = ctx.get("provider") || "unknown";
 			if (!authorization.client_id) throw new Error("client_id is required");
+			if (manager) try {
+				const subjectProperties = properties && typeof properties === "object" ? properties : {};
+				await manager.executeSuccessHooks(authorization.client_id, currentProvider, {
+					type: currentProvider,
+					properties: subjectProperties
+				});
+			} catch (error$1) {
+				console.error("Plugin success hook failed:", error$1);
+			}
 			return await input.success({ async subject(type, properties$1, subjectOpts) {
 				const subject = subjectOpts?.subject ?? await resolveSubject(type, properties$1);
 				await successOpts?.invalidate?.(await resolveSubject(type, properties$1));
@@ -276,10 +285,21 @@ const issuer = (input) => {
 		storage
 	};
 	const app = new Router({ basePath: input.basePath });
-	if (input.plugins && input.plugins.length > 0) {
-		const manager = new PluginManager(input.storage);
+	const manager = input.plugins && input.plugins.length > 0 ? new PluginManager(input.storage) : null;
+	let pluginsInitialized = false;
+	if (manager && input.plugins) {
 		manager.registerAll(input.plugins);
 		manager.setupRoutes(app);
+		app.use(async (c, next) => {
+			if (!pluginsInitialized) try {
+				await manager.initialize();
+				pluginsInitialized = true;
+			} catch (error$1) {
+				console.error("Plugin initialization failed:", error$1);
+				return c.newResponse("Plugin initialization failed", { status: 500 });
+			}
+			return await next();
+		});
 	}
 	for (const [name, value] of Object.entries(input.providers)) {
 		const route = new Router();
@@ -498,13 +518,14 @@ const issuer = (input) => {
 		const audience = c.query("audience");
 		const code_challenge = c.query("code_challenge");
 		const code_challenge_method = c.query("code_challenge_method");
+		const scope = c.query("scope");
 		const authorization = {
 			response_type,
 			redirect_uri,
 			state,
 			client_id,
 			audience,
-			scope: c.query("scope"),
+			scope,
 			...code_challenge && code_challenge_method && { pkce: {
 				challenge: code_challenge,
 				method: code_challenge_method
@@ -520,6 +541,10 @@ const issuer = (input) => {
 			redirectURI: redirect_uri,
 			audience
 		}, c.request)) throw new UnauthorizedClientError(client_id, redirect_uri);
+		if (manager) {
+			const scopes = scope ? scope.split(" ") : void 0;
+			await manager.executeAuthorizeHooks(client_id, provider, scopes);
+		}
 		await auth.set(c, "authorization", 900, authorization);
 		if (provider) return c.redirect(`${provider}/authorize`);
 		const availableProviders = Object.keys(input.providers);
@@ -527,6 +552,12 @@ const issuer = (input) => {
 		return auth.forward(c, await select()(Object.fromEntries(Object.entries(input.providers).map(([key, value]) => [key, value.type])), c.request));
 	});
 	app.onError(async (err, c) => {
+		if (manager) try {
+			const errorObj = err instanceof Error ? err : new Error(String(err));
+			await manager.executeErrorHooks(errorObj);
+		} catch (hookError) {
+			console.error("Plugin error hook failed:", hookError);
+		}
 		if (err instanceof UnknownStateError) return auth.forward(c, await error(err, c.request));
 		try {
 			const authorization = await getAuthorization(c);

package/dist/plugin/builder.d.mts

@@ -3,7 +3,24 @@ import { PluginBuilder } from "./plugin.mjs";
 //#region src/plugin/builder.d.ts
 
 /**
- * Create a new plugin
+ * Create a new plugin builder.
+ * Plugins are built using a fluent API that supports routes and lifecycle hooks.
+ *
+ * @param id - Unique identifier for the plugin
+ * @returns Plugin builder with chainable methods
+ *
+ * @example
+ * ```ts
+ * const analytics = plugin("analytics")
+ *   .onSuccess(async (ctx) => {
+ *     await ctx.storage.set(`success:${ctx.clientID}`, ctx.subject)
+ *   })
+ *   .post("/stats", async (ctx) => {
+ *     const stats = await ctx.pluginStorage.get("stats")
+ *     return ctx.json(stats)
+ *   })
+ *   .build()
+ * ```
  */
 declare const plugin: (id: string) => PluginBuilder;
 //#endregion

package/dist/plugin/builder.mjs

@@ -1,11 +1,32 @@
 //#region src/plugin/builder.ts
 /**
-* Create a new plugin
+* Create a new plugin builder.
+* Plugins are built using a fluent API that supports routes and lifecycle hooks.
+*
+* @param id - Unique identifier for the plugin
+* @returns Plugin builder with chainable methods
+*
+* @example
+* ```ts
+* const analytics = plugin("analytics")
+*   .onSuccess(async (ctx) => {
+*     await ctx.storage.set(`success:${ctx.clientID}`, ctx.subject)
+*   })
+*   .post("/stats", async (ctx) => {
+*     const stats = await ctx.pluginStorage.get("stats")
+*     return ctx.json(stats)
+*   })
+*   .build()
+* ```
 */
 const plugin = (id) => {
 	if (!id || typeof id !== "string") throw new Error("Plugin id must be a non-empty string");
 	const routes = [];
 	const registeredPaths = /* @__PURE__ */ new Set();
+	let initHook;
+	let authorizeHook;
+	let successHook;
+	let errorHook;
 	const validatePath = (path) => {
 		if (!path || typeof path !== "string") throw new Error("Route path must be a non-empty string");
 		if (!path.startsWith("/")) throw new Error("Route path must start with '/'");
@@ -35,11 +56,34 @@ const plugin = (id) => {
 			});
 			return this;
 		},
+		onInit(handler) {
+			if (initHook) throw new Error(`onInit hook already defined for plugin '${id}'`);
+			initHook = handler;
+			return this;
+		},
+		onAuthorize(handler) {
+			if (authorizeHook) throw new Error(`onAuthorize hook already defined for plugin '${id}'`);
+			authorizeHook = handler;
+			return this;
+		},
+		onSuccess(handler) {
+			if (successHook) throw new Error(`onSuccess hook already defined for plugin '${id}'`);
+			successHook = handler;
+			return this;
+		},
+		onError(handler) {
+			if (errorHook) throw new Error(`onError hook already defined for plugin '${id}'`);
+			errorHook = handler;
+			return this;
+		},
 		build() {
-			if (routes.length === 0) throw new Error(`Plugin '${id}' has no routes defined`);
 			return {
 				id,
-				routes
+				routes: routes.length > 0 ? routes : void 0,
+				onInit: initHook,
+				onAuthorize: authorizeHook,
+				onSuccess: successHook,
+				onError: errorHook
 			};
 		}
 	};

package/dist/plugin/manager.d.mts

@@ -24,6 +24,35 @@ declare class PluginManager {
    * Get plugin by id
    */
   get(id: string): Plugin | undefined;
+  /**
+   * Initialize all plugins.
+   * Called once during issuer setup.
+   * Plugins can set up initial state or validate configuration.
+   *
+   * @throws PluginError if any plugin initialization fails
+   */
+  initialize(): Promise<void>;
+  /**
+   * Execute authorize hooks for all plugins.
+   * Called before processing an authorization request.
+   * Can validate, rate limit, or enhance the request.
+   */
+  executeAuthorizeHooks(clientID: string, provider?: string, scopes?: string[]): Promise<void>;
+  /**
+   * Execute success hooks for all plugins.
+   * Called after successful authentication.
+   * Runs in parallel for better performance.
+   * Plugins cannot modify the response.
+   */
+  executeSuccessHooks(clientID: string, provider: string | undefined, subject: {
+    type: string;
+    properties: Record<string, unknown>;
+  }): Promise<void>;
+  /**
+   * Execute error hooks for all plugins.
+   * Called when an authentication error occurs.
+   */
+  executeErrorHooks(error: Error, clientID?: string, provider?: string): Promise<void>;
   /**
    * Setup plugin routes on a router
    */

package/dist/plugin/manager.mjs

@@ -33,6 +33,99 @@ var PluginManager = class {
 		return this.plugins.get(id);
 	}
 	/**
+	* Initialize all plugins.
+	* Called once during issuer setup.
+	* Plugins can set up initial state or validate configuration.
+	*
+	* @throws PluginError if any plugin initialization fails
+	*/
+	async initialize() {
+		for (const plugin of this.plugins.values()) {
+			if (!plugin.onInit) continue;
+			try {
+				const context = {
+					pluginId: plugin.id,
+					request: new Request("http://internal/init"),
+					now: /* @__PURE__ */ new Date(),
+					storage: this.storage
+				};
+				await plugin.onInit(context);
+			} catch (error) {
+				throw new PluginError(`Initialization failed: ${error instanceof Error ? error.message : String(error)}`, plugin.id);
+			}
+		}
+	}
+	/**
+	* Execute authorize hooks for all plugins.
+	* Called before processing an authorization request.
+	* Can validate, rate limit, or enhance the request.
+	*/
+	async executeAuthorizeHooks(clientID, provider, scopes) {
+		for (const plugin of this.plugins.values()) {
+			if (!plugin.onAuthorize) continue;
+			try {
+				const context = {
+					pluginId: plugin.id,
+					request: new Request("http://internal/authorize"),
+					now: /* @__PURE__ */ new Date(),
+					storage: this.storage,
+					clientID,
+					provider,
+					scopes
+				};
+				await plugin.onAuthorize(context);
+			} catch (error) {
+				throw new PluginError(`Authorization hook failed: ${error instanceof Error ? error.message : String(error)}`, plugin.id);
+			}
+		}
+	}
+	/**
+	* Execute success hooks for all plugins.
+	* Called after successful authentication.
+	* Runs in parallel for better performance.
+	* Plugins cannot modify the response.
+	*/
+	async executeSuccessHooks(clientID, provider, subject) {
+		const hooks = Array.from(this.plugins.values()).filter((p) => p.onSuccess).map(async (plugin) => {
+			const context = {
+				pluginId: plugin.id,
+				request: new Request("http://internal/success"),
+				now: /* @__PURE__ */ new Date(),
+				storage: this.storage,
+				clientID,
+				provider,
+				subject
+			};
+			return plugin.onSuccess?.(context).catch((error) => {
+				console.error(`[Plugin: ${plugin.id}] Success hook failed:`, error instanceof Error ? error.message : String(error));
+			});
+		});
+		await Promise.all(hooks);
+	}
+	/**
+	* Execute error hooks for all plugins.
+	* Called when an authentication error occurs.
+	*/
+	async executeErrorHooks(error, clientID, provider) {
+		for (const plugin of this.plugins.values()) {
+			if (!plugin.onError) continue;
+			try {
+				const context = {
+					pluginId: plugin.id,
+					request: new Request("http://internal/error"),
+					now: /* @__PURE__ */ new Date(),
+					storage: this.storage,
+					error,
+					clientID,
+					provider
+				};
+				await plugin.onError(context);
+			} catch (hookError) {
+				console.error(`[Plugin: ${plugin.id}] Error hook failed:`, hookError instanceof Error ? hookError.message : String(hookError));
+			}
+		}
+	}
+	/**
 	* Setup plugin routes on a router
 	*/
 	setupRoutes(router) {
@@ -40,7 +133,7 @@ var PluginManager = class {
 		for (const plugin of this.plugins.values()) {
 			if (!plugin.routes) continue;
 			for (const route of plugin.routes) {
-				const fullPath = `/${plugin.id}${route.path}`;
+				const fullPath = `/plugin/${plugin.id}${route.path}`;
 				if (registeredPaths.has(fullPath)) throw new PluginError(`Route conflict: ${fullPath} already registered`, plugin.id);
 				registeredPaths.add(fullPath);
 				const handler = async (ctx) => {

package/dist/plugin/plugin.d.mts

@@ -1,16 +1,41 @@
-import { Plugin, PluginRouteHandler } from "./types.mjs";
+import { Plugin, PluginAuthorizeHook, PluginErrorHook, PluginInitHook, PluginRouteHandler, PluginSuccessHook } from "./types.mjs";
 
 //#region src/plugin/plugin.d.ts
 
 /**
- * Plugin builder interface
+ * Plugin builder interface for creating plugins with a fluent API.
+ *
+ * The builder pattern allows for elegant plugin definition:
+ * - Chain route definitions with lifecycle hooks
+ * - Each method returns this for chaining
+ * - Build finalizes the plugin definition
+ *
+ * @example
+ * ```ts
+ * const myPlugin = plugin("my-plugin")
+ *   .onInit(async (ctx) => {
+ *     console.log("Plugin initialized")
+ *   })
+ *   .post("/action", async (ctx) => {
+ *     return ctx.json({ success: true })
+ *   })
+ *   .build()
+ * ```
  */
 interface PluginBuilder {
-  /** Add GET route */
+  /** Register a GET route */
   get(path: string, handler: PluginRouteHandler): PluginBuilder;
-  /** Add POST route */
+  /** Register a POST route */
   post(path: string, handler: PluginRouteHandler): PluginBuilder;
-  /** Build the plugin */
+  /** Register initialization hook (called once during issuer setup) */
+  onInit(handler: PluginInitHook): PluginBuilder;
+  /** Register authorization hook (called before authorization request) */
+  onAuthorize(handler: PluginAuthorizeHook): PluginBuilder;
+  /** Register success hook (called after successful authentication) */
+  onSuccess(handler: PluginSuccessHook): PluginBuilder;
+  /** Register error hook (called when authentication fails) */
+  onError(handler: PluginErrorHook): PluginBuilder;
+  /** Build the final plugin */
   build(): Plugin;
 }
 //#endregion

package/dist/plugin/types.d.mts

@@ -22,13 +22,72 @@ interface PluginRoute {
   readonly handler: PluginRouteHandler;
 }
 /**
- * Main plugin interface
+ * Lifecycle hook context provided to plugin hooks.
+ * Contains information about the current operation and access to isolated storage.
+ */
+interface PluginHookContext {
+  /** Unique identifier for the plugin */
+  pluginId: string;
+  /** Raw request object */
+  request: Request;
+  /** Current time for consistency across hook execution */
+  now: Date;
+  /** Storage adapter for data persistence */
+  storage: StorageAdapter;
+}
+/**
+ * Hook called when the issuer is being initialized.
+ * Useful for plugins that need to set up initial state or validate configuration.
+ * Should complete quickly - takes place during server startup.
+ */
+type PluginInitHook = (context: PluginHookContext) => Promise<void>;
+/**
+ * Hook called before an authorization request is processed.
+ * Use for validation, rate limiting, or request enhancement.
+ */
+type PluginAuthorizeHook = (context: PluginHookContext & {
+  clientID: string;
+  provider?: string;
+  scopes?: string[];
+}) => Promise<void>;
+/**
+ * Hook called after successful authentication.
+ * Use for logging, analytics, webhooks, or side effects.
+ * Cannot modify the response - hooks run in parallel.
+ */
+type PluginSuccessHook = (context: PluginHookContext & {
+  clientID: string;
+  provider?: string;
+  subject: {
+    type: string;
+    properties: Record<string, unknown>;
+  };
+}) => Promise<void>;
+/**
+ * Hook called when an authentication error occurs.
+ * Use for error logging, custom error pages, or error transformation.
+ */
+type PluginErrorHook = (context: PluginHookContext & {
+  error: Error;
+  clientID?: string;
+  provider?: string;
+}) => Promise<void>;
+/**
+ * Main plugin interface with lifecycle hooks and storage isolation
  */
 interface Plugin {
   /** Unique plugin identifier */
   readonly id: string;
   /** Custom routes added by this plugin */
   readonly routes?: readonly PluginRoute[];
+  /** Called once when the issuer initializes */
+  readonly onInit?: PluginInitHook;
+  /** Called before authorization request is processed */
+  readonly onAuthorize?: PluginAuthorizeHook;
+  /** Called after successful authentication */
+  readonly onSuccess?: PluginSuccessHook;
+  /** Called when an error occurs during authentication */
+  readonly onError?: PluginErrorHook;
 }
 /**
  * Plugin error types
@@ -37,4 +96,4 @@ declare class PluginError extends Error {
   constructor(message: string, pluginId: string);
 }
 //#endregion
-export { Plugin, PluginContext, PluginError, PluginRoute, PluginRouteHandler };
+export { Plugin, PluginAuthorizeHook, PluginContext, PluginError, PluginErrorHook, PluginHookContext, PluginInitHook, PluginRoute, PluginRouteHandler, PluginSuccessHook };

package/dist/ui/icon.d.mts

@@ -4,18 +4,55 @@ import { ComponentChildren } from "preact";
 
 /**
  * GitHub brand icon with official logo design.
- * Used for GitHub authentication provider buttons and references.
  */
 declare const ICON_GITHUB: () => ComponentChildren;
 /**
  * Google brand icon with official multicolor logo design.
- * Used for Google authentication provider buttons and references.
  */
 declare const ICON_GOOGLE: () => ComponentChildren;
 /**
  * Email envelope icon for email-related authentication flows.
- * Used in email verification, password reset, and contact forms.
  */
 declare const ICON_EMAIL: () => ComponentChildren;
+/**
+ * Apple brand icon for Sign in with Apple.
+ */
+declare const ICON_APPLE: () => ComponentChildren;
+/**
+ * Discord brand icon.
+ */
+declare const ICON_DISCORD: () => ComponentChildren;
+/**
+ * Facebook brand icon with gradient.
+ */
+declare const ICON_FACEBOOK: () => ComponentChildren;
+/**
+ * LinkedIn brand icon.
+ */
+declare const ICON_LINKEDIN: () => ComponentChildren;
+/**
+ * Microsoft brand icon with four color squares.
+ */
+declare const ICON_MICROSOFT: () => ComponentChildren;
+/**
+ * Slack brand icon.
+ */
+declare const ICON_SLACK: () => ComponentChildren;
+/**
+ * GitLab brand icon.
+ */
+declare const ICON_GITLAB: () => ComponentChildren;
+/**
+ * Reddit brand icon.
+ */
+declare const ICON_REDDIT: () => ComponentChildren;
+/**
+ * Spotify brand icon.
+ */
+declare const ICON_SPOTIFY: () => ComponentChildren;
+/**
+ * Twitch brand icon.
+ */
+declare const ICON_TWITCH: () => ComponentChildren;
 //#endregion
-export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE };
+export { ICON_APPLE, ICON_DISCORD, ICON_EMAIL, ICON_FACEBOOK, ICON_GITHUB, ICON_GITLAB, ICON_GOOGLE, ICON_LINKEDIN, ICON_MICROSOFT, ICON_REDDIT, ICON_SLACK, ICON_SPOTIFY, ICON_TWITCH };

package/dist/ui/icon.mjs

@@ -3,31 +3,29 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 //#region src/ui/icon.tsx
 /**
 * GitHub brand icon with official logo design.
-* Used for GitHub authentication provider buttons and references.
 */
 const ICON_GITHUB = () => /* @__PURE__ */ jsx("svg", {
-	"aria-label": "GitHub",
-	fill: "currentColor",
-	height: "250",
-	preserveAspectRatio: "xMidYMid",
 	role: "img",
 	viewBox: "0 0 256 250",
 	width: "256",
+	height: "250",
+	fill: "currentColor",
 	xmlns: "http://www.w3.org/2000/svg",
+	preserveAspectRatio: "xMidYMid",
+	"aria-label": "GitHub",
 	children: /* @__PURE__ */ jsx("path", { d: "M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" })
 });
 /**
 * Google brand icon with official multicolor logo design.
-* Used for Google authentication provider buttons and references.
 */
 const ICON_GOOGLE = () => /* @__PURE__ */ jsxs("svg", {
-	"aria-label": "Google",
-	height: "262",
-	preserveAspectRatio: "xMidYMid",
 	role: "img",
-	viewBox: "0 0 256 262",
 	width: "256",
+	height: "262",
+	viewBox: "0 0 256 262",
 	xmlns: "http://www.w3.org/2000/svg",
+	preserveAspectRatio: "xMidYMid",
+	"aria-label": "Google",
 	children: [
 		/* @__PURE__ */ jsx("path", {
 			d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027",
@@ -49,22 +47,201 @@ const ICON_GOOGLE = () => /* @__PURE__ */ jsxs("svg", {
 });
 /**
 * Email envelope icon for email-related authentication flows.
-* Used in email verification, password reset, and contact forms.
 */
 const ICON_EMAIL = () => /* @__PURE__ */ jsx("svg", {
-	"aria-label": "Email",
-	fill: "none",
 	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	"stroke-width": "1.5",
 	stroke: "currentColor",
-	strokeWidth: "1.5",
+	"aria-label": "Email",
+	children: /* @__PURE__ */ jsx("path", {
+		"stroke-linecap": "round",
+		"stroke-linejoin": "round",
+		d: "M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+	})
+});
+/**
+* Apple brand icon for Sign in with Apple.
+*/
+const ICON_APPLE = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 814 1000",
+	fill: "currentColor",
+	"aria-label": "Apple",
+	children: /* @__PURE__ */ jsx("path", { d: "M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" })
+});
+/**
+* Discord brand icon.
+*/
+const ICON_DISCORD = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
 	viewBox: "0 0 24 24",
 	xmlns: "http://www.w3.org/2000/svg",
-	children: /* @__PURE__ */ jsx("path", {
-		d: "M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75",
-		strokeLinecap: "round",
-		strokeLinejoin: "round"
+	fill: "currentColor",
+	"aria-label": "Discord",
+	children: /* @__PURE__ */ jsx("path", { d: "M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" })
+});
+/**
+* Facebook brand icon with gradient.
+*/
+const ICON_FACEBOOK = () => /* @__PURE__ */ jsxs("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 36 36",
+	fill: "url(#facebook_gradient)",
+	"aria-label": "Facebook",
+	children: [
+		/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+			x1: "50%",
+			x2: "50%",
+			y1: "97.078%",
+			y2: "0%",
+			id: "facebook_gradient",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0%",
+				"stop-color": "#0062E0"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "100%",
+				"stop-color": "#19AFFF"
+			})]
+		}) }),
+		/* @__PURE__ */ jsx("path", { d: "M15 35.8C6.5 34.3 0 26.9 0 18 0 8.1 8.1 0 18 0s18 8.1 18 18c0 8.9-6.5 16.3-15 17.8l-1-.8h-4l-1 .8z" }),
+		/* @__PURE__ */ jsx("path", {
+			fill: "#FFF",
+			d: "m25 23 .8-5H21v-3.5c0-1.4.5-2.5 2.7-2.5H26V7.4c-1.3-.2-2.7-.4-4-.4-4.1 0-7 2.5-7 7v4h-4.5v5H15v12.7c1 .2 2 .3 3 .3s2-.1 3-.3V23h4z"
+		})
+	]
+});
+/**
+* LinkedIn brand icon.
+*/
+const ICON_LINKEDIN = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-label": "LinkedIn",
+	children: /* @__PURE__ */ jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" })
+});
+/**
+* Microsoft brand icon with four color squares.
+*/
+const ICON_MICROSOFT = () => /* @__PURE__ */ jsxs("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 23 23",
+	fill: "currentColor",
+	"aria-label": "Microsoft",
+	children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: "0",
+			y: "0",
+			width: "10.58",
+			height: "10.58",
+			fill: "#F1511B"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "12.42",
+			y: "0",
+			width: "10.58",
+			height: "10.58",
+			fill: "#80CC28"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "0",
+			y: "12.42",
+			width: "10.58",
+			height: "10.58",
+			fill: "#00ADEF"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "12.42",
+			y: "12.42",
+			width: "10.58",
+			height: "10.58",
+			fill: "#FFB900"
+		})
+	]
+});
+/**
+* Slack brand icon.
+*/
+const ICON_SLACK = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2447.6 2452.5",
+	fill: "currentColor",
+	"aria-label": "Slack",
+	children: /* @__PURE__ */ jsxs("g", {
+		"clip-rule": "evenodd",
+		"fill-rule": "evenodd",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z",
+				fill: "#36c5f0"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z",
+				fill: "#2eb67d"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z",
+				fill: "#ecb22e"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0",
+				fill: "#e01e5a"
+			})
+		]
 	})
 });
+/**
+* GitLab brand icon.
+*/
+const ICON_GITLAB = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-label": "GitLab",
+	children: /* @__PURE__ */ jsx("path", { d: "m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z" })
+});
+/**
+* Reddit brand icon.
+*/
+const ICON_REDDIT = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-label": "Reddit",
+	children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z" })
+});
+/**
+* Spotify brand icon.
+*/
+const ICON_SPOTIFY = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-label": "Spotify",
+	children: /* @__PURE__ */ jsx("path", { d: "M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" })
+});
+/**
+* Twitch brand icon.
+*/
+const ICON_TWITCH = () => /* @__PURE__ */ jsx("svg", {
+	role: "img",
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "currentColor",
+	"aria-label": "Twitch",
+	children: /* @__PURE__ */ jsx("path", { d: "M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z" })
+});
 
 //#endregion
-export { ICON_EMAIL, ICON_GITHUB, ICON_GOOGLE };
+export { ICON_APPLE, ICON_DISCORD, ICON_EMAIL, ICON_FACEBOOK, ICON_GITHUB, ICON_GITLAB, ICON_GOOGLE, ICON_LINKEDIN, ICON_MICROSOFT, ICON_REDDIT, ICON_SLACK, ICON_SPOTIFY, ICON_TWITCH };

package/dist/ui/select.mjs

@@ -1,5 +1,5 @@
 import { Layout, renderToHTML } from "./base.mjs";
-import { ICON_GITHUB, ICON_GOOGLE } from "./icon.mjs";
+import { ICON_APPLE, ICON_DISCORD, ICON_EMAIL, ICON_FACEBOOK, ICON_GITHUB, ICON_GITLAB, ICON_GOOGLE, ICON_LINKEDIN, ICON_MICROSOFT, ICON_REDDIT, ICON_SLACK, ICON_SPOTIFY, ICON_TWITCH } from "./icon.mjs";
 import { jsx, jsxs } from "preact/jsx-runtime";
 
 //#region src/ui/select.tsx
@@ -7,18 +7,41 @@ import { jsx, jsxs } from "preact/jsx-runtime";
 * Icon components for providers
 */
 const PROVIDER_ICONS = {
+	apple: ICON_APPLE,
+	discord: ICON_DISCORD,
+	email: ICON_EMAIL,
+	facebook: ICON_FACEBOOK,
 	github: ICON_GITHUB,
-	google: ICON_GOOGLE
+	gitlab: ICON_GITLAB,
+	google: ICON_GOOGLE,
+	linkedin: ICON_LINKEDIN,
+	magiclink: ICON_EMAIL,
+	microsoft: ICON_MICROSOFT,
+	password: ICON_EMAIL,
+	reddit: ICON_REDDIT,
+	slack: ICON_SLACK,
+	spotify: ICON_SPOTIFY,
+	twitch: ICON_TWITCH
 };
 /**
 * Default display names for provider types
 */
 const DEFAULT_DISPLAYS = {
+	apple: "Apple",
+	code: "Code",
+	discord: "Discord",
+	facebook: "Facebook",
 	github: "GitHub",
+	gitlab: "GitLab",
 	google: "Google",
-	code: "Code",
+	linkedin: "LinkedIn",
+	microsoft: "Microsoft",
 	passkey: "Passkey",
-	password: "Password"
+	password: "Password",
+	reddit: "Reddit",
+	slack: "Slack",
+	spotify: "Spotify",
+	twitch: "Twitch"
 };
 /**
 * Main provider selection component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftlab/auth",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "description": "Core implementation for @draftlab/auth",
   "author": "Matheus Pergoli",