@draftlab/auth 0.0.1

package/dist/theme-C9by7VXf.d.ts

@@ -0,0 +1,209 @@
+//#region src/themes/theme.d.ts
+/**
+ * Use one of the built-in themes.
+ *
+ * @example
+ *
+ * ```ts
+ * import { THEME_SST } from "@draftauth/core/themes/theme"
+ *
+ * export default issuer({
+ *   theme: THEME_SST,
+ *   // ...
+ * })
+ * ```
+ *
+ * Or define your own.
+ *
+ * ```ts
+ * import type { Theme } from "@draftauth/core/themes/theme"
+ *
+ * const MY_THEME: Theme = {
+ *   title: "Acne",
+ *   radius: "none",
+ *   favicon: "https://www.example.com/favicon.svg",
+ *   // ...
+ * }
+ *
+ * export default issuer({
+ *   theme: MY_THEME,
+ *   // ...
+ * })
+ * ```
+ *
+ * @packageDocumentation
+ */
+/**
+ * A type to define values for light and dark mode.
+ *
+ * @example
+ * ```ts
+ * {
+ *   light: "#FFF",
+ *   dark: "#000"
+ * }
+ * ```
+ */
+interface ColorScheme {
+  /**
+   * The value for dark mode.
+   */
+  dark: string;
+  /**
+   * The value for light mode.
+   */
+  light: string;
+}
+/**
+ * A type to define your custom theme.
+ */
+interface Theme {
+  /**
+   * The name of your app. Also used as the title of the page.
+   *
+   * @example
+   * ```ts
+   * {
+   *   title: "Acne"
+   * }
+   * ```
+   */
+  title?: string;
+  /**
+   * A URL to the favicon of your app.
+   *
+   * @example
+   * ```ts
+   * {
+   *   favicon: "https://www.example.com/favicon.svg"
+   * }
+   * ```
+   */
+  favicon?: string;
+  /**
+   * The border radius of the UI elements.
+   *
+   * @example
+   * ```ts
+   * {
+   *   radius: "none"
+   * }
+   * ```
+   */
+  radius?: "none" | "sm" | "md" | "lg" | "full";
+  /**
+   * The primary color of the theme.
+   *
+   * Takes a color or both light and dark colors.
+   *
+   * @example
+   * ```ts
+   * {
+   *   primary: "#FF5E00"
+   * }
+   * ```
+   */
+  primary: string | ColorScheme;
+  /**
+   * The background color of the theme.
+   *
+   * Takes a color or both light and dark colors.
+   *
+   * @example
+   * ```ts
+   * {
+   *   background: "#FFF"
+   * }
+   * ```
+   */
+  background?: string | ColorScheme;
+  /**
+   * A URL to the logo of your app.
+   *
+   * Takes a single image or both light and dark mode versions.
+   *
+   * @example
+   * ```ts
+   * {
+   *   logo: "https://www.example.com/logo.svg"
+   * }
+   * ```
+   */
+  logo?: string | ColorScheme;
+  /**
+   * The font family and scale of the theme.
+   */
+  font?: {
+    /**
+     * The font family of the theme.
+     *
+     * @example
+     * ```ts
+     * {
+     *   font: {
+     *     family: "Geist Mono, monospace"
+     *   }
+     * }
+     * ```
+     */
+    family?: string;
+    /**
+     * The font scale of the theme. Can be used to increase or decrease the font sizes across
+     * the UI.
+     *
+     * @default "1"
+     * @example
+     * ```ts
+     * {
+     *   font: {
+     *     scale: "1.25"
+     *   }
+     * }
+     * ```
+     */
+    scale?: string;
+  };
+  /**
+   * Custom CSS that's added to the page in a `<style>` tag.
+   *
+   * This can be used to import custom fonts.
+   *
+   * @example
+   * ```ts
+   * {
+   *   css: `@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');`
+   * }
+   * ```
+   */
+  css?: string;
+}
+/**
+ * Built-in default Draft Auth theme.
+ */
+declare const THEME_DRAFTAUTH: Theme;
+/**
+ * Built-in theme based on [Terminal](https://terminal.shop).
+ */
+declare const THEME_TERMINAL: Theme;
+/**
+ * Built-in theme based on [SST](https://sst.dev).
+ */
+declare const THEME_SST: Theme;
+/**
+ * Built-in theme based on [Supabase](https://supabase.com).
+ */
+declare const THEME_SUPABASE: Theme;
+/**
+ * Built-in theme based on [Vercel](https://vercel.com).
+ */
+declare const THEME_VERCEL: Theme;
+/**
+ * @internal
+ */
+declare const setTheme: (value: Theme) => void;
+/**
+ * @internal
+ */
+declare const getTheme: () => any;
+//#endregion
+export { ColorScheme, THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, Theme, getTheme, setTheme };

package/dist/theme-CswaLtbW.js

@@ -0,0 +1,120 @@
+//#region src/themes/theme.ts
+/**
+* Built-in default Draft Auth theme.
+*/
+const THEME_DRAFTAUTH = {
+	title: "Draft Auth",
+	radius: "none",
+	background: {
+		dark: "black",
+		light: "white"
+	},
+	primary: {
+		dark: "white",
+		light: "black"
+	},
+	font: { family: "IBM Plex Sans, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
+  `
+};
+/**
+* Built-in theme based on [Terminal](https://terminal.shop).
+*/
+const THEME_TERMINAL = {
+	title: "terminal",
+	radius: "none",
+	favicon: "https://www.terminal.shop/favicon.svg",
+	logo: {
+		dark: "https://www.terminal.shop/images/logo-white.svg",
+		light: "https://www.terminal.shop/images/logo-black.svg"
+	},
+	primary: "#ff5e00",
+	background: {
+		dark: "rgb(0, 0, 0)",
+		light: "rgb(255, 255, 255)"
+	},
+	font: { family: "Geist Mono, monospace" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [SST](https://sst.dev).
+*/
+const THEME_SST = {
+	title: "SST",
+	favicon: "https://sst.dev/favicon.svg",
+	logo: {
+		dark: "https://sst.dev/favicon.svg",
+		light: "https://sst.dev/favicon.svg"
+	},
+	background: {
+		dark: "#1a1a2d",
+		light: "rgb(255, 255, 255)"
+	},
+	primary: "#f3663f",
+	font: { family: "Rubik, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [Supabase](https://supabase.com).
+*/
+const THEME_SUPABASE = {
+	title: "Supabase",
+	logo: {
+		dark: "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-dark.svg&w=128&q=75",
+		light: "https://supabase.com/dashboard/_next/image?url=%2Fdashboard%2Fimg%2Fsupabase-light.svg&w=128&q=75"
+	},
+	background: {
+		dark: "#171717",
+		light: "#f8f8f8"
+	},
+	primary: {
+		dark: "#006239",
+		light: "#72e3ad"
+	},
+	font: { family: "Varela Round, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Varela+Round:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* Built-in theme based on [Vercel](https://vercel.com).
+*/
+const THEME_VERCEL = {
+	title: "Vercel",
+	logo: {
+		dark: "https://vercel.com/mktng/_next/static/media/vercel-logotype-dark.e8c0a742.svg",
+		light: "https://vercel.com/mktng/_next/static/media/vercel-logotype-light.700a8d26.svg"
+	},
+	background: {
+		dark: "black",
+		light: "white"
+	},
+	primary: {
+		dark: "white",
+		light: "black"
+	},
+	font: { family: "Geist, sans-serif" },
+	css: `
+    @import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
+  `
+};
+/**
+* @internal
+*/
+const setTheme = (value) => {
+	globalThis.DRAFTAUTH_THEME = value;
+};
+/**
+* @internal
+*/
+const getTheme = () => {
+	return globalThis.DRAFTAUTH_THEME || THEME_DRAFTAUTH;
+};
+
+//#endregion
+export { THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, getTheme, setTheme };

package/dist/themes/theme.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme, THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, Theme, getTheme, setTheme } from "../theme-C9by7VXf.js";
+export { ColorScheme, THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, Theme, getTheme, setTheme };

package/dist/themes/theme.js

@@ -0,0 +1,3 @@
+import { THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, getTheme, setTheme } from "../theme-CswaLtbW.js";
+
+export { THEME_DRAFTAUTH, THEME_SST, THEME_SUPABASE, THEME_TERMINAL, THEME_VERCEL, getTheme, setTheme };

package/dist/types.d.ts

@@ -0,0 +1,94 @@
+//#region src/types.d.ts
+/**
+ * Shared type definitions for Draft Auth core.
+ */
+/**
+ * Authorization state for OAuth 2.0 flows.
+ */
+interface AuthorizationState {
+  /** OAuth redirect URI */
+  redirect_uri?: string;
+  /** OAuth response type (code, token) */
+  response_type?: string;
+  /** OAuth state parameter for CSRF protection */
+  state?: string;
+  /** OAuth client identifier */
+  client_id?: string;
+  /** OAuth audience parameter */
+  audience?: string;
+  /** Raw scope string from request */
+  scope?: string;
+  /** Parsed OAuth scopes array */
+  scopes?: string[];
+  /** PKCE challenge data for code verification */
+  pkce?: PKCEChallenge;
+}
+/**
+ * Token generation result for OAuth 2.0.
+ */
+interface TokenGenerationResult {
+  /** OAuth access token */
+  access: string;
+  /** Token expiration time in seconds */
+  expiresIn: number;
+  /** OAuth refresh token */
+  refresh: string;
+}
+/**
+ * PKCE challenge data for OAuth flows.
+ */
+interface PKCEChallenge {
+  challenge: string;
+  method: "S256";
+}
+/**
+ * TTL configuration for tokens and sessions.
+ */
+interface TtlConfiguration {
+  /** Access token TTL in seconds */
+  access: number;
+  /** Refresh token TTL in seconds */
+  refresh: number;
+}
+/**
+ * Refresh token storage payload structure.
+ * Contains metadata about issued refresh tokens.
+ */
+interface RefreshTokenStoragePayload {
+  /** Subject type identifier */
+  type: string;
+  /** Subject properties/claims */
+  properties: unknown;
+  /** Resolved subject identifier for JWT */
+  subject: string;
+  /** Client identifier that owns this refresh token */
+  clientID: string;
+  /** OAuth scopes associated with this token */
+  scopes?: string[];
+  /** Timestamp when the refresh token was first used */
+  timeUsed?: number;
+}
+/**
+ * Code storage payload for authorization code grant.
+ * Used for storing authorization code data during OAuth flows.
+ */
+interface CodeStoragePayload {
+  /** Subject type identifier */
+  type: string;
+  /** Subject properties/claims */
+  properties: unknown;
+  /** Resolved subject identifier for JWT */
+  subject: string;
+  /** Redirect URI used in authorization request */
+  redirectURI: string;
+  /** Client identifier */
+  clientID: string;
+  /** OAuth scopes */
+  scopes?: string[];
+  /** Token TTL configuration */
+  ttl: TtlConfiguration;
+  /** PKCE challenge data */
+  pkce?: PKCEChallenge;
+}
+//#endregion
+export { AuthorizationState, CodeStoragePayload, PKCEChallenge, RefreshTokenStoragePayload, TokenGenerationResult, TtlConfiguration };

package/dist/ui/base.d.ts

@@ -0,0 +1,43 @@
+//#region src/ui/base.d.ts
+type PropsWithChildren<P = {}> = P & {
+  children?: string;
+};
+/**
+ * Base layout component for Draft Auth UI.
+ * Provides theming, responsive design, and consistent styling across all auth screens.
+ *
+ * ## Features
+ *
+ * - **Theme Support**: Light/dark mode with custom colors and fonts
+ * - **Responsive Design**: Adapts to different screen sizes
+ * - **Custom Branding**: Support for custom logos and styling
+ * - **CSS Variables**: Uses CSS custom properties for theming
+ *
+ * @example
+ * ```tsx
+ * <Layout size="small">
+ *   <div>Your auth form content</div>
+ * </Layout>
+ * ```
+ */
+/**
+ * Props for the Layout component.
+ */
+interface LayoutProps {
+  /**
+   * Optional size variant for the layout container.
+   *
+   * @default undefined (normal size)
+   */
+  readonly size?: "small";
+}
+/**
+ * Main layout component that wraps all authentication UI screens.
+ * Handles theming, logo display, and provides consistent styling.
+ *
+ * @param props - Layout props including children and optional size
+ * @returns Complete HTML document as a string with theming and branding applied
+ */
+declare const Layout: (props: PropsWithChildren<LayoutProps>) => string;
+//#endregion
+export { Layout, LayoutProps };

package/dist/ui/base.js

@@ -0,0 +1,4 @@
+import "../theme-CswaLtbW.js";
+import { Layout } from "../base-DRutbxgL.js";
+
+export { Layout };

package/dist/ui/code.d.ts

@@ -0,0 +1,158 @@
+import "../storage-CxKerLlc.js";
+import "../provider-CwWMG-1l.js";
+import { CodeProviderError, CodeProviderOptions } from "../code-l_uvMR1j.js";
+
+//#region src/ui/code.d.ts
+
+/**
+ * Default text copy for the PIN code authentication UI.
+ * All text can be customized via the copy prop.
+ */
+declare const DEFAULT_COPY: {
+  /** Placeholder text for the email/contact input field */
+  email_placeholder: string;
+  /** Error message displayed when the entered email/contact is invalid */
+  email_invalid: string;
+  /** Text for the primary action button */
+  button_continue: string;
+  /** Informational text explaining that a PIN code will be sent */
+  code_info: string;
+  /** Placeholder text for the PIN code input field */
+  code_placeholder: string;
+  /** Error message displayed when the entered PIN code is incorrect */
+  code_invalid: string;
+  /** Success message prefix when code is initially sent */
+  code_sent: string;
+  /** Success message prefix when code is resent */
+  code_resent: string;
+  /** Text asking if user didn't receive the code */
+  code_didnt_get: string;
+  /** Text for the resend code button */
+  code_resend: string;
+};
+/**
+ * Type for customizable UI copy text.
+ * All properties are optional to allow partial customization.
+ */
+type CodeUICopy = typeof DEFAULT_COPY;
+/**
+ * Input mode for the contact field.
+ * Determines the input type and validation behavior.
+ */
+type CodeUIMode = "email" | "phone";
+/**
+ * Configuration options for the CodeUI component.
+ */
+interface CodeUIOptions {
+  /**
+   * Callback function for sending PIN codes to users.
+   * Should handle delivery via email, SMS, or other channels based on the claims.
+   *
+   * @param claims - User contact information (email, phone, etc.)
+   * @param code - The generated PIN code to send
+   * @returns Promise resolving to undefined on success, or error object on failure
+   *
+   * @example
+   * ```ts
+   * sendCode: async (claims, code) => {
+   *   if (claims.email) {
+   *     await emailService.send({
+   *       to: claims.email,
+   *       subject: 'Your verification code',
+   *       text: `Your PIN code is: ${code}`
+   *     })
+   *   } else if (claims.phone) {
+   *     await smsService.send(claims.phone, `PIN: ${code}`)
+   *   } else {
+   *     return {
+   *       type: "invalid_claim",
+   *       key: "contact",
+   *       value: "Email or phone required"
+   *     }
+   *   }
+   * }
+   * ```
+   */
+  sendCode: (claims: Record<string, string>, code: string) => Promise<CodeProviderError | undefined>;
+  /**
+   * Custom text copy for UI labels and messages.
+   * Allows full customization of all displayed text.
+   *
+   * @example
+   * ```ts
+   * copy: {
+   *   email_placeholder: "Enter your email address",
+   *   code_info: "Check your email for a 6-digit verification code",
+   *   button_continue: "Verify",
+   *   code_invalid: "The code you entered is incorrect"
+   * }
+   * ```
+   */
+  readonly copy?: Partial<CodeUICopy>;
+  /**
+   * Input mode determining the type of contact information to collect.
+   *
+   * @default "email"
+   *
+   * @example
+   * ```ts
+   * mode: "phone" // Collect phone numbers instead of emails
+   * ```
+   */
+  readonly mode?: CodeUIMode;
+}
+/**
+ * Creates a complete UI configuration for PIN code authentication.
+ * Provides pre-built forms for collecting user contact info and verifying PIN codes.
+ *
+ * @param options - Configuration options for the UI
+ * @returns Complete CodeProvider configuration with UI handlers
+ *
+ * @example
+ * ```ts
+ * // Basic email-based PIN authentication
+ * const emailCodeUI = CodeUI({
+ *   sendCode: async (claims, code) => {
+ *     await emailService.send(claims.email, `Code: ${code}`)
+ *   }
+ * })
+ *
+ * // Phone-based PIN authentication with custom copy
+ * const phoneCodeUI = CodeUI({
+ *   mode: "phone",
+ *   copy: {
+ *     email_placeholder: "Phone number",
+ *     code_info: "We'll send a verification code via SMS",
+ *     email_invalid: "Please enter a valid phone number"
+ *   },
+ *   sendCode: async (claims, code) => {
+ *     await smsService.send(claims.phone, `Verification: ${code}`)
+ *   }
+ * })
+ *
+ * // Multi-mode authentication
+ * const flexibleCodeUI = CodeUI({
+ *   copy: {
+ *     email_placeholder: "Email or phone number",
+ *     code_info: "We'll send a code to your email or phone"
+ *   },
+ *   sendCode: async (claims, code) => {
+ *     if (claims.email && claims.email.includes('@')) {
+ *       await emailService.send(claims.email, `Code: ${code}`)
+ *     } else if (claims.email) {
+ *       // Treat as phone number if no @ symbol
+ *       await smsService.send(claims.email, `Code: ${code}`)
+ *     } else {
+ *       return {
+ *         type: "invalid_claim",
+ *         key: "contact",
+ *         value: "Email or phone required"
+ *       }
+ *     }
+ *   }
+ * })
+ * ```
+ */
+declare const CodeUI: (options: CodeUIOptions) => CodeProviderOptions;
+//#endregion
+export { CodeUI, CodeUICopy, CodeUIMode, CodeUIOptions };