@mdxui/auth 1.1.0

package/dist/schemas/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schemas/auth-user.ts","../../src/schemas/auth-session.ts","../../src/schemas/auth-organization.ts","../../src/schemas/provider-props.ts","../../src/schemas/widget-props.ts"],"sourcesContent":["/**\n * AuthUser Schema\n *\n * Extends mdxui's UserIdentitySchema with WorkOS-specific fields.\n * AuthUser is fully compatible with UserIdentity - it can be used\n * anywhere a UserIdentity is expected.\n */\n\nimport { z } from 'zod'\nimport { UserIdentitySchema } from 'mdxui/zod'\n\n/**\n * AuthUserSchema - Extended user identity for WorkOS AuthKit\n *\n * Extends UserIdentitySchema with WorkOS-specific fields like\n * verification status and timestamps.\n *\n * @example\n * ```tsx\n * import { AuthUserSchema } from '@mdxui/auth/schemas'\n *\n * const result = AuthUserSchema.safeParse(user)\n * if (result.success) {\n *   console.log(result.data.emailVerified)\n * }\n * ```\n */\nexport const AuthUserSchema = UserIdentitySchema.extend({\n  // Override to be more specific (WorkOS guarantees string ID)\n  id: z.string().describe('User ID from WorkOS'),\n\n  // WorkOS requires email (not optional like UserIdentity)\n  email: z.string().email().describe('Email address'),\n\n  // WorkOS-specific fields not in UserIdentity\n  emailVerified: z.boolean().describe('Email verification status'),\n\n  // Timestamps\n  createdAt: z.string().datetime().describe('Account creation timestamp'),\n  updatedAt: z.string().datetime().describe('Last update timestamp'),\n  lastSignInAt: z\n    .string()\n    .datetime()\n    .nullable()\n    .optional()\n    .describe('Last sign-in timestamp'),\n})\n\n/**\n * AuthUser type inferred from schema\n *\n * This type is compatible with UserIdentity - an AuthUser can be\n * assigned to a variable of type UserIdentity.\n */\nexport type AuthUser = z.infer<typeof AuthUserSchema>\n","/**\n * AuthSession Schema\n *\n * Extends mdxui's SessionSchema with WorkOS-specific fields.\n */\n\nimport { z } from 'zod'\nimport { SessionSchema } from 'mdxui/zod'\n\n/**\n * ImpersonatorSchema - Info about admin impersonating a user\n */\nexport const ImpersonatorSchema = z.object({\n  /** Impersonator's email address */\n  email: z.string().email().describe(\"Impersonator's email address\"),\n  /** Reason for impersonation */\n  reason: z.string().optional().describe('Reason for impersonation'),\n})\n\nexport type Impersonator = z.infer<typeof ImpersonatorSchema>\n\n/**\n * AuthSessionSchema - Extended session for WorkOS AuthKit\n *\n * Extends SessionSchema with WorkOS-specific fields like\n * impersonation support.\n *\n * @example\n * ```tsx\n * import { AuthSessionSchema } from '@mdxui/auth/schemas'\n *\n * const result = AuthSessionSchema.safeParse(session)\n * if (result.success && result.data.impersonator) {\n *   console.log('Being impersonated by:', result.data.impersonator.email)\n * }\n * ```\n */\nexport const AuthSessionSchema = SessionSchema.extend({\n  // Override userId to be string (WorkOS uses string IDs)\n  userId: z.string().describe('User ID'),\n\n  // WorkOS-specific: impersonation support\n  impersonator: ImpersonatorSchema.optional().describe(\n    'Impersonator info (if being impersonated)',\n  ),\n})\n\n/**\n * AuthSession type inferred from schema\n */\nexport type AuthSession = z.infer<typeof AuthSessionSchema>\n","/**\n * AuthOrganization Schema\n *\n * Organization type for WorkOS AuthKit.\n */\n\nimport { z } from 'zod'\n\n/**\n * AuthOrganizationSchema - WorkOS organization\n *\n * Represents an organization/workspace in WorkOS.\n *\n * @example\n * ```tsx\n * import { AuthOrganizationSchema } from '@mdxui/auth/schemas'\n *\n * const result = AuthOrganizationSchema.safeParse(org)\n * if (result.success) {\n *   console.log('Organization:', result.data.name)\n * }\n * ```\n */\nexport const AuthOrganizationSchema = z.object({\n  /** Organization ID */\n  id: z.string().describe('Organization ID'),\n  /** Organization display name */\n  name: z.string().describe('Organization name'),\n  /** Organization slug (URL-friendly identifier) */\n  slug: z.string().optional().describe('Organization slug'),\n  /** Organization logo URL */\n  logoUrl: z.string().url().optional().describe('Organization logo URL'),\n  /** Whether the organization is active */\n  active: z.boolean().optional().describe('Whether organization is active'),\n  /** Custom domains for the organization */\n  domains: z\n    .array(z.string())\n    .optional()\n    .describe('Custom domains for the organization'),\n  /** Additional metadata */\n  metadata: z\n    .record(z.string(), z.unknown())\n    .optional()\n    .describe('Additional metadata'),\n})\n\n/**\n * AuthOrganization type inferred from schema\n */\nexport type AuthOrganization = z.infer<typeof AuthOrganizationSchema>\n","/**\n * Provider Props Schemas\n *\n * Zod schemas for authentication provider component props.\n */\n\nimport { z } from 'zod'\n\n/**\n * IdentityProviderPropsSchema - Props for IdentityProvider component\n */\nexport const IdentityProviderPropsSchema = z.object({\n  /** WorkOS client ID */\n  clientId: z.string().describe('WorkOS client ID'),\n  /** Optional API hostname override */\n  apiHostname: z.string().optional().describe('Optional API hostname override'),\n  /** Enable dev mode for local development */\n  devMode: z.boolean().optional().describe('Enable dev mode for local development'),\n  /** Redirect URI after authentication */\n  redirectUri: z.string().url().optional().describe('Redirect URI after authentication'),\n  /** Note: onRedirectCallback and children are React-specific, not in schema */\n})\n\nexport type IdentityProviderPropsSchemaType = z.infer<typeof IdentityProviderPropsSchema>\n\n/**\n * UnauthenticatedActionSchema - What to do when unauthenticated\n */\nexport const UnauthenticatedActionSchema = z.enum(['landing', 'redirect', 'allow'])\n\nexport type UnauthenticatedAction = z.infer<typeof UnauthenticatedActionSchema>\n\n/**\n * AuthGatePropsSchema - Props for AuthGate component\n */\nexport const AuthGatePropsSchema = z.object({\n  /** Whether authentication is required (default: true) */\n  required: z.boolean().optional().describe('Whether authentication is required'),\n  /** What to do when unauthenticated */\n  onUnauthenticated: UnauthenticatedActionSchema.optional().describe(\n    'What to do when unauthenticated',\n  ),\n  /** URL to redirect to when unauthenticated (if onUnauthenticated is \"redirect\") */\n  redirectUrl: z\n    .string()\n    .url()\n    .optional()\n    .describe('URL to redirect to when unauthenticated'),\n  /** Note: children, loadingComponent, landingComponent are React-specific */\n})\n\nexport type AuthGatePropsSchemaType = z.infer<typeof AuthGatePropsSchema>\n\n/**\n * AppearanceSchema - Theme appearance mode\n */\nexport const AppearanceSchema = z.enum(['light', 'dark', 'inherit'])\n\nexport type Appearance = z.infer<typeof AppearanceSchema>\n\n/**\n * RadiusSchema - Border radius style\n */\nexport const RadiusSchema = z.enum(['none', 'small', 'medium', 'large', 'full'])\n\nexport type Radius = z.infer<typeof RadiusSchema>\n\n/**\n * ScalingSchema - Scaling factor\n */\nexport const ScalingSchema = z.enum(['90%', '95%', '100%', '105%', '110%'])\n\nexport type Scaling = z.infer<typeof ScalingSchema>\n\n/**\n * WidgetsProviderPropsSchema - Props for WidgetsProvider component\n */\nexport const WidgetsProviderPropsSchema = z.object({\n  /** Theme appearance mode */\n  appearance: AppearanceSchema.optional().describe('Theme appearance mode'),\n  /** Border radius style */\n  radius: RadiusSchema.optional().describe('Border radius style'),\n  /** Scaling factor */\n  scaling: ScalingSchema.optional().describe('Scaling factor'),\n  /** Note: children is React-specific, not in schema */\n})\n\nexport type WidgetsProviderPropsSchemaType = z.infer<typeof WidgetsProviderPropsSchema>\n","/**\n * Widget Props Schemas\n *\n * Zod schemas for WorkOS widget component props.\n */\n\nimport { z } from 'zod'\n\n/**\n * AuthTokenSchema - Auth token type\n *\n * Can be a string or a function that returns a Promise<string>.\n * Functions are represented as 'function' string in schema validation\n * since Zod can't validate function signatures.\n */\nexport const AuthTokenSchema = z.union([\n  z.string().describe('Static auth token'),\n  z.literal('function').describe('Token getter function'),\n])\n\n// Note: The actual TypeScript type is more specific\nexport type AuthTokenSchemaType = z.infer<typeof AuthTokenSchema>\n\n/**\n * BaseWidgetPropsSchema - Common props for all widget wrappers\n */\nexport const BaseWidgetPropsSchema = z.object({\n  /** Auth token for the widget (string or getter function) */\n  authToken: z.string().describe('Auth token for the widget'),\n  /** CSS class name */\n  className: z.string().optional().describe('CSS class name'),\n})\n\nexport type BaseWidgetPropsSchemaType = z.infer<typeof BaseWidgetPropsSchema>\n\n/**\n * OrganizationWidgetPropsSchema - Props for widgets that support organization context\n */\nexport const OrganizationWidgetPropsSchema = BaseWidgetPropsSchema.extend({\n  /** Organization ID for org-scoped widgets */\n  organizationId: z\n    .string()\n    .optional()\n    .describe('Organization ID for org-scoped widgets'),\n})\n\nexport type OrganizationWidgetPropsSchemaType = z.infer<\n  typeof OrganizationWidgetPropsSchema\n>\n\n/**\n * UseWidgetTokenOptionsSchema - Props for useWidgetToken hook\n */\nexport const UseWidgetTokenOptionsSchema = z.object({\n  /** Widget type to fetch token for */\n  widget: z.string().describe('Widget type to fetch token for'),\n  /** Organization ID for org-scoped widgets */\n  organizationId: z\n    .string()\n    .optional()\n    .describe('Organization ID for org-scoped widgets'),\n  /** Custom endpoint for fetching widget token */\n  endpoint: z\n    .string()\n    .url()\n    .optional()\n    .describe('Custom endpoint for fetching widget token'),\n})\n\nexport type UseWidgetTokenOptionsSchemaType = z.infer<typeof UseWidgetTokenOptionsSchema>\n\n/**\n * UseWidgetTokenResultSchema - Result from useWidgetToken hook\n */\nexport const UseWidgetTokenResultSchema = z.object({\n  /** The fetched token */\n  token: z.string().nullable().describe('The fetched token'),\n  /** Whether token is being fetched */\n  loading: z.boolean().describe('Whether token is being fetched'),\n  /** Error message if fetch failed */\n  error: z.string().nullable().describe('Error message if fetch failed'),\n  /** Note: refetch function is React-specific, not in schema */\n})\n\nexport type UseWidgetTokenResultSchemaType = z.infer<typeof UseWidgetTokenResultSchema>\n"],"mappings":";AAQA,SAAS,SAAS;AAClB,SAAS,0BAA0B;AAkB5B,IAAM,iBAAiB,mBAAmB,OAAO;AAAA;AAAA,EAEtD,IAAI,EAAE,OAAO,EAAE,SAAS,qBAAqB;AAAA;AAAA,EAG7C,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,eAAe;AAAA;AAAA,EAGlD,eAAe,EAAE,QAAQ,EAAE,SAAS,2BAA2B;AAAA;AAAA,EAG/D,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,4BAA4B;AAAA,EACtE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,uBAAuB;AAAA,EACjE,cAAc,EACX,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,wBAAwB;AACtC,CAAC;;;ACxCD,SAAS,KAAAA,UAAS;AAClB,SAAS,qBAAqB;AAKvB,IAAM,qBAAqBA,GAAE,OAAO;AAAA;AAAA,EAEzC,OAAOA,GAAE,OAAO,EAAE,MAAM,EAAE,SAAS,8BAA8B;AAAA;AAAA,EAEjE,QAAQA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,0BAA0B;AACnE,CAAC;AAoBM,IAAM,oBAAoB,cAAc,OAAO;AAAA;AAAA,EAEpD,QAAQA,GAAE,OAAO,EAAE,SAAS,SAAS;AAAA;AAAA,EAGrC,cAAc,mBAAmB,SAAS,EAAE;AAAA,IAC1C;AAAA,EACF;AACF,CAAC;;;ACvCD,SAAS,KAAAC,UAAS;AAiBX,IAAM,yBAAyBA,GAAE,OAAO;AAAA;AAAA,EAE7C,IAAIA,GAAE,OAAO,EAAE,SAAS,iBAAiB;AAAA;AAAA,EAEzC,MAAMA,GAAE,OAAO,EAAE,SAAS,mBAAmB;AAAA;AAAA,EAE7C,MAAMA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,mBAAmB;AAAA;AAAA,EAExD,SAASA,GAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,uBAAuB;AAAA;AAAA,EAErE,QAAQA,GAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,gCAAgC;AAAA;AAAA,EAExE,SAASA,GACN,MAAMA,GAAE,OAAO,CAAC,EAChB,SAAS,EACT,SAAS,qCAAqC;AAAA;AAAA,EAEjD,UAAUA,GACP,OAAOA,GAAE,OAAO,GAAGA,GAAE,QAAQ,CAAC,EAC9B,SAAS,EACT,SAAS,qBAAqB;AACnC,CAAC;;;ACtCD,SAAS,KAAAC,UAAS;AAKX,IAAM,8BAA8BA,GAAE,OAAO;AAAA;AAAA,EAElD,UAAUA,GAAE,OAAO,EAAE,SAAS,kBAAkB;AAAA;AAAA,EAEhD,aAAaA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,gCAAgC;AAAA;AAAA,EAE5E,SAASA,GAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,uCAAuC;AAAA;AAAA,EAEhF,aAAaA,GAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,mCAAmC;AAAA;AAEvF,CAAC;AAOM,IAAM,8BAA8BA,GAAE,KAAK,CAAC,WAAW,YAAY,OAAO,CAAC;AAO3E,IAAM,sBAAsBA,GAAE,OAAO;AAAA;AAAA,EAE1C,UAAUA,GAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,oCAAoC;AAAA;AAAA,EAE9E,mBAAmB,4BAA4B,SAAS,EAAE;AAAA,IACxD;AAAA,EACF;AAAA;AAAA,EAEA,aAAaA,GACV,OAAO,EACP,IAAI,EACJ,SAAS,EACT,SAAS,yCAAyC;AAAA;AAEvD,CAAC;AAOM,IAAM,mBAAmBA,GAAE,KAAK,CAAC,SAAS,QAAQ,SAAS,CAAC;AAO5D,IAAM,eAAeA,GAAE,KAAK,CAAC,QAAQ,SAAS,UAAU,SAAS,MAAM,CAAC;AAOxE,IAAM,gBAAgBA,GAAE,KAAK,CAAC,OAAO,OAAO,QAAQ,QAAQ,MAAM,CAAC;AAOnE,IAAM,6BAA6BA,GAAE,OAAO;AAAA;AAAA,EAEjD,YAAY,iBAAiB,SAAS,EAAE,SAAS,uBAAuB;AAAA;AAAA,EAExE,QAAQ,aAAa,SAAS,EAAE,SAAS,qBAAqB;AAAA;AAAA,EAE9D,SAAS,cAAc,SAAS,EAAE,SAAS,gBAAgB;AAAA;AAE7D,CAAC;;;AC/ED,SAAS,KAAAC,UAAS;AASX,IAAM,kBAAkBA,GAAE,MAAM;AAAA,EACrCA,GAAE,OAAO,EAAE,SAAS,mBAAmB;AAAA,EACvCA,GAAE,QAAQ,UAAU,EAAE,SAAS,uBAAuB;AACxD,CAAC;AAQM,IAAM,wBAAwBA,GAAE,OAAO;AAAA;AAAA,EAE5C,WAAWA,GAAE,OAAO,EAAE,SAAS,2BAA2B;AAAA;AAAA,EAE1D,WAAWA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,gBAAgB;AAC5D,CAAC;AAOM,IAAM,gCAAgC,sBAAsB,OAAO;AAAA;AAAA,EAExE,gBAAgBA,GACb,OAAO,EACP,SAAS,EACT,SAAS,wCAAwC;AACtD,CAAC;AASM,IAAM,8BAA8BA,GAAE,OAAO;AAAA;AAAA,EAElD,QAAQA,GAAE,OAAO,EAAE,SAAS,gCAAgC;AAAA;AAAA,EAE5D,gBAAgBA,GACb,OAAO,EACP,SAAS,EACT,SAAS,wCAAwC;AAAA;AAAA,EAEpD,UAAUA,GACP,OAAO,EACP,IAAI,EACJ,SAAS,EACT,SAAS,2CAA2C;AACzD,CAAC;AAOM,IAAM,6BAA6BA,GAAE,OAAO;AAAA;AAAA,EAEjD,OAAOA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,mBAAmB;AAAA;AAAA,EAEzD,SAASA,GAAE,QAAQ,EAAE,SAAS,gCAAgC;AAAA;AAAA,EAE9D,OAAOA,GAAE,OAAO,EAAE,SAAS,EAAE,SAAS,+BAA+B;AAAA;AAEvE,CAAC;","names":["z","z","z","z"]}

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export { A as AuthGateProps, a as AuthToken, B as BaseWidgetProps, I as IdentityProviderProps, O as OrganizationWidgetProps, U as UseWidgetTokenOptions, b as UseWidgetTokenResult, W as WidgetsProviderProps } from '../auth-Ba2f778e.js';
+export { a as AuthOrganization, b as AuthSession, A as AuthUser, I as Impersonator } from '../auth-organization-CN1WpGnL.js';
+import 'react';
+import 'zod/v4/core';
+import 'zod';

package/dist/types/index.js

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/widgets/index.d.ts

@@ -0,0 +1,250 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { B as BaseWidgetProps } from '../auth-Ba2f778e.js';
+import 'react';
+
+/**
+ * User Profile Widget
+ *
+ * Displays and allows editing of user profile information:
+ * - Profile picture
+ * - Name and email
+ * - Connected accounts (OAuth providers)
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended)
+ * import { useAuth } from '@mdxui/auth'
+ * import { UserProfile } from '@mdxui/auth/widgets'
+ *
+ * function ProfilePage() {
+ *   const { getAccessToken } = useAuth()
+ *   return <UserProfile authToken={getAccessToken} />
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With string token
+ * <UserProfile authToken={myToken} />
+ * ```
+ */
+declare function UserProfile({ authToken, className }: BaseWidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * User Security Widget
+ *
+ * Allows users to manage their security settings:
+ * - Password management
+ * - Multi-factor authentication (MFA)
+ * - Connected authentication methods
+ * - Security keys
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended)
+ * import { useAuth } from '@mdxui/auth'
+ * import { UserSecurity } from '@mdxui/auth/widgets'
+ *
+ * function SecurityPage() {
+ *   const { getAccessToken } = useAuth()
+ *   return <UserSecurity authToken={getAccessToken} />
+ * }
+ * ```
+ */
+declare function UserSecurity({ authToken, className }: BaseWidgetProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for UserSessions with function token (no currentSessionId needed)
+ */
+interface UserSessionsWithFunctionTokenProps {
+    /** Auth token getter function */
+    authToken: () => Promise<string>;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Props for UserSessions with string token (currentSessionId required)
+ */
+interface UserSessionsWithStringTokenProps {
+    /** Auth token string */
+    authToken: string;
+    /** Current session ID (required when using string token) */
+    currentSessionId: string;
+    /** CSS class name */
+    className?: string;
+}
+type UserSessionsProps = UserSessionsWithFunctionTokenProps | UserSessionsWithStringTokenProps;
+/**
+ * User Sessions Widget
+ *
+ * Displays and manages active user sessions:
+ * - View all active sessions
+ * - See session details (device, location, last active)
+ * - Revoke sessions
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended) - no currentSessionId needed
+ * import { useAuth } from '@mdxui/auth'
+ * import { UserSessions } from '@mdxui/auth/widgets'
+ *
+ * function SessionsPage() {
+ *   const { getAccessToken } = useAuth()
+ *   return <UserSessions authToken={getAccessToken} />
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With string token - currentSessionId required
+ * <UserSessions authToken={token} currentSessionId={sessionId} />
+ * ```
+ */
+declare function UserSessions(props: UserSessionsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * API Keys Widget
+ *
+ * Displays and manages API keys:
+ * - Create new API keys with specific permissions
+ * - View existing API keys
+ * - Revoke API keys
+ *
+ * Requires the `widgets:api-keys:manage` permission.
+ * Organization context is derived from the auth token.
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended)
+ * import { useAuth } from '@mdxui/auth'
+ * import { ApiKeys } from '@mdxui/auth/widgets'
+ *
+ * function ApiKeysPage() {
+ *   const { getAccessToken } = useAuth()
+ *   return <ApiKeys authToken={getAccessToken} />
+ * }
+ * ```
+ */
+declare function ApiKeys({ authToken, className }: BaseWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface UsersManagementProps extends BaseWidgetProps {
+    /**
+     * Organization ID for scoping the user management.
+     *
+     * This is typically used to verify organization context in the parent component.
+     * The actual organization scope comes from the auth token.
+     */
+    organizationId?: string;
+}
+/**
+ * Users Management Widget (Team Page)
+ *
+ * Allows organization admins to manage team members:
+ * - View organization members
+ * - Invite new members
+ * - Update member roles
+ * - Remove members
+ *
+ * Requires the `widgets:users-table:manage` permission and organization context.
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended)
+ * import { useAuth } from '@mdxui/auth'
+ * import { UsersManagement } from '@mdxui/auth/widgets'
+ *
+ * function TeamPage() {
+ *   const { getAccessToken, organizationId, permissions } = useAuth()
+ *
+ *   if (!organizationId) {
+ *     return <p>You need to be in an organization.</p>
+ *   }
+ *
+ *   if (!permissions?.includes('widgets:users-table:manage')) {
+ *     return <p>You need admin permissions.</p>
+ *   }
+ *
+ *   return (
+ *     <UsersManagement
+ *       authToken={getAccessToken}
+ *       organizationId={organizationId}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function UsersManagement({ authToken, organizationId: _organizationId, className, }: UsersManagementProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Pipes Widget (Integrations)
+ *
+ * Allows users to manage third-party integrations:
+ * - Connect external services
+ * - View connected integrations
+ * - Manage integration settings
+ * - Disconnect integrations
+ *
+ * @example
+ * ```tsx
+ * // With AuthKit (recommended)
+ * import { useAuth } from '@mdxui/auth'
+ * import { Pipes } from '@mdxui/auth/widgets'
+ *
+ * function IntegrationsPage() {
+ *   const { getAccessToken } = useAuth()
+ *   return <Pipes authToken={getAccessToken} />
+ * }
+ * ```
+ */
+declare function Pipes({ authToken, className }: BaseWidgetProps): react_jsx_runtime.JSX.Element;
+
+type OrganizationSwitcherVariant = 'ghost' | 'outline';
+interface OrganizationSwitcherProps {
+    /** Auth token getter function */
+    authToken: () => Promise<string>;
+    /**
+     * Function to switch to a different organization.
+     * Receives an object with organizationId.
+     */
+    switchToOrganization: (args: {
+        organizationId: string;
+    }) => void | Promise<void>;
+    /** Visual variant of the switcher */
+    variant?: OrganizationSwitcherVariant;
+    /** Custom organization label */
+    organizationLabel?: string | null;
+    /** Where to truncate long organization names */
+    truncateBehavior?: 'right' | 'middle';
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Organization Switcher Widget
+ *
+ * Allows users to switch between organizations they belong to.
+ *
+ * @example
+ * ```tsx
+ * import { useAuth } from '@mdxui/auth'
+ * import { OrganizationSwitcher } from '@mdxui/auth/widgets'
+ *
+ * function OrgSwitcher() {
+ *   const { getAccessToken, switchToOrganization } = useAuth()
+ *
+ *   // Adapt the function signature
+ *   const handleSwitch = ({ organizationId }: { organizationId: string }) => {
+ *     return switchToOrganization(organizationId)
+ *   }
+ *
+ *   return (
+ *     <OrganizationSwitcher
+ *       authToken={getAccessToken}
+ *       switchToOrganization={handleSwitch}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+declare function OrganizationSwitcher({ authToken, switchToOrganization, variant, organizationLabel, truncateBehavior, className, }: OrganizationSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { ApiKeys, OrganizationSwitcher, Pipes, UserProfile, UserSecurity, UserSessions, UsersManagement };

package/dist/widgets/index.js

@@ -0,0 +1,79 @@
+// src/widgets/user-profile.tsx
+import { UserProfile as WorkOSUserProfile } from "@workos-inc/widgets";
+import { jsx } from "react/jsx-runtime";
+function UserProfile({ authToken, className }) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(WorkOSUserProfile, { authToken }) });
+}
+
+// src/widgets/user-security.tsx
+import { UserSecurity as WorkOSUserSecurity } from "@workos-inc/widgets";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function UserSecurity({ authToken, className }) {
+  return /* @__PURE__ */ jsx2("div", { className, children: /* @__PURE__ */ jsx2(WorkOSUserSecurity, { authToken }) });
+}
+
+// src/widgets/user-sessions.tsx
+import { UserSessions as WorkOSUserSessions } from "@workos-inc/widgets";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function UserSessions(props) {
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3(WorkOSUserSessions, { ...rest }) });
+}
+
+// src/widgets/api-keys.tsx
+import { ApiKeys as WorkOSApiKeys } from "@workos-inc/widgets";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ApiKeys({ authToken, className }) {
+  return /* @__PURE__ */ jsx4("div", { className, children: /* @__PURE__ */ jsx4(WorkOSApiKeys, { authToken }) });
+}
+
+// src/widgets/users-management.tsx
+import { UsersManagement as WorkOSUsersManagement } from "@workos-inc/widgets";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function UsersManagement({
+  authToken,
+  organizationId: _organizationId,
+  className
+}) {
+  return /* @__PURE__ */ jsx5("div", { className, children: /* @__PURE__ */ jsx5(WorkOSUsersManagement, { authToken }) });
+}
+
+// src/widgets/pipes.tsx
+import { Pipes as WorkOSPipes } from "@workos-inc/widgets";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Pipes({ authToken, className }) {
+  return /* @__PURE__ */ jsx6("div", { className, children: /* @__PURE__ */ jsx6(WorkOSPipes, { authToken }) });
+}
+
+// src/widgets/organization-switcher.tsx
+import { OrganizationSwitcher as WorkOSOrganizationSwitcher } from "@workos-inc/widgets";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function OrganizationSwitcher({
+  authToken,
+  switchToOrganization,
+  variant,
+  organizationLabel,
+  truncateBehavior,
+  className
+}) {
+  return /* @__PURE__ */ jsx7("div", { className, children: /* @__PURE__ */ jsx7(
+    WorkOSOrganizationSwitcher,
+    {
+      authToken,
+      switchToOrganization,
+      variant,
+      organizationLabel,
+      truncateBehavior
+    }
+  ) });
+}
+export {
+  ApiKeys,
+  OrganizationSwitcher,
+  Pipes,
+  UserProfile,
+  UserSecurity,
+  UserSessions,
+  UsersManagement
+};
+//# sourceMappingURL=index.js.map

package/dist/widgets/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/widgets/user-profile.tsx","../../src/widgets/user-security.tsx","../../src/widgets/user-sessions.tsx","../../src/widgets/api-keys.tsx","../../src/widgets/users-management.tsx","../../src/widgets/pipes.tsx","../../src/widgets/organization-switcher.tsx"],"sourcesContent":["'use client'\n\nimport { UserProfile as WorkOSUserProfile } from '@workos-inc/widgets'\nimport type { BaseWidgetProps } from '../types/auth'\n\n/**\n * User Profile Widget\n *\n * Displays and allows editing of user profile information:\n * - Profile picture\n * - Name and email\n * - Connected accounts (OAuth providers)\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended)\n * import { useAuth } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * function ProfilePage() {\n *   const { getAccessToken } = useAuth()\n *   return <UserProfile authToken={getAccessToken} />\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With string token\n * <UserProfile authToken={myToken} />\n * ```\n */\nexport function UserProfile({ authToken, className }: BaseWidgetProps) {\n  return (\n    <div className={className}>\n      <WorkOSUserProfile authToken={authToken} />\n    </div>\n  )\n}\n","'use client'\n\nimport { UserSecurity as WorkOSUserSecurity } from '@workos-inc/widgets'\nimport type { BaseWidgetProps } from '../types/auth'\n\n/**\n * User Security Widget\n *\n * Allows users to manage their security settings:\n * - Password management\n * - Multi-factor authentication (MFA)\n * - Connected authentication methods\n * - Security keys\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended)\n * import { useAuth } from '@mdxui/auth'\n * import { UserSecurity } from '@mdxui/auth/widgets'\n *\n * function SecurityPage() {\n *   const { getAccessToken } = useAuth()\n *   return <UserSecurity authToken={getAccessToken} />\n * }\n * ```\n */\nexport function UserSecurity({ authToken, className }: BaseWidgetProps) {\n  return (\n    <div className={className}>\n      <WorkOSUserSecurity authToken={authToken} />\n    </div>\n  )\n}\n","'use client'\n\nimport { UserSessions as WorkOSUserSessions } from '@workos-inc/widgets'\n\n/**\n * Props for UserSessions with function token (no currentSessionId needed)\n */\nexport interface UserSessionsWithFunctionTokenProps {\n  /** Auth token getter function */\n  authToken: () => Promise<string>\n  /** CSS class name */\n  className?: string\n}\n\n/**\n * Props for UserSessions with string token (currentSessionId required)\n */\nexport interface UserSessionsWithStringTokenProps {\n  /** Auth token string */\n  authToken: string\n  /** Current session ID (required when using string token) */\n  currentSessionId: string\n  /** CSS class name */\n  className?: string\n}\n\nexport type UserSessionsProps =\n  | UserSessionsWithFunctionTokenProps\n  | UserSessionsWithStringTokenProps\n\n/**\n * User Sessions Widget\n *\n * Displays and manages active user sessions:\n * - View all active sessions\n * - See session details (device, location, last active)\n * - Revoke sessions\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended) - no currentSessionId needed\n * import { useAuth } from '@mdxui/auth'\n * import { UserSessions } from '@mdxui/auth/widgets'\n *\n * function SessionsPage() {\n *   const { getAccessToken } = useAuth()\n *   return <UserSessions authToken={getAccessToken} />\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With string token - currentSessionId required\n * <UserSessions authToken={token} currentSessionId={sessionId} />\n * ```\n */\nexport function UserSessions(props: UserSessionsProps) {\n  const { className, ...rest } = props\n\n  return (\n    <div className={className}>\n      <WorkOSUserSessions {...rest} />\n    </div>\n  )\n}\n","'use client'\n\nimport { ApiKeys as WorkOSApiKeys } from '@workos-inc/widgets'\nimport type { BaseWidgetProps } from '../types/auth'\n\n/**\n * API Keys Widget\n *\n * Displays and manages API keys:\n * - Create new API keys with specific permissions\n * - View existing API keys\n * - Revoke API keys\n *\n * Requires the `widgets:api-keys:manage` permission.\n * Organization context is derived from the auth token.\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended)\n * import { useAuth } from '@mdxui/auth'\n * import { ApiKeys } from '@mdxui/auth/widgets'\n *\n * function ApiKeysPage() {\n *   const { getAccessToken } = useAuth()\n *   return <ApiKeys authToken={getAccessToken} />\n * }\n * ```\n */\nexport function ApiKeys({ authToken, className }: BaseWidgetProps) {\n  return (\n    <div className={className}>\n      <WorkOSApiKeys authToken={authToken} />\n    </div>\n  )\n}\n","'use client'\n\nimport { UsersManagement as WorkOSUsersManagement } from '@workos-inc/widgets'\nimport type { BaseWidgetProps } from '../types/auth'\n\nexport interface UsersManagementProps extends BaseWidgetProps {\n  /**\n   * Organization ID for scoping the user management.\n   *\n   * This is typically used to verify organization context in the parent component.\n   * The actual organization scope comes from the auth token.\n   */\n  organizationId?: string\n}\n\n/**\n * Users Management Widget (Team Page)\n *\n * Allows organization admins to manage team members:\n * - View organization members\n * - Invite new members\n * - Update member roles\n * - Remove members\n *\n * Requires the `widgets:users-table:manage` permission and organization context.\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended)\n * import { useAuth } from '@mdxui/auth'\n * import { UsersManagement } from '@mdxui/auth/widgets'\n *\n * function TeamPage() {\n *   const { getAccessToken, organizationId, permissions } = useAuth()\n *\n *   if (!organizationId) {\n *     return <p>You need to be in an organization.</p>\n *   }\n *\n *   if (!permissions?.includes('widgets:users-table:manage')) {\n *     return <p>You need admin permissions.</p>\n *   }\n *\n *   return (\n *     <UsersManagement\n *       authToken={getAccessToken}\n *       organizationId={organizationId}\n *     />\n *   )\n * }\n * ```\n */\nexport function UsersManagement({\n  authToken,\n  organizationId: _organizationId,\n  className,\n}: UsersManagementProps) {\n  return (\n    <div className={className}>\n      <WorkOSUsersManagement authToken={authToken} />\n    </div>\n  )\n}\n","'use client'\n\nimport { Pipes as WorkOSPipes } from '@workos-inc/widgets'\nimport type { BaseWidgetProps } from '../types/auth'\n\n/**\n * Pipes Widget (Integrations)\n *\n * Allows users to manage third-party integrations:\n * - Connect external services\n * - View connected integrations\n * - Manage integration settings\n * - Disconnect integrations\n *\n * @example\n * ```tsx\n * // With AuthKit (recommended)\n * import { useAuth } from '@mdxui/auth'\n * import { Pipes } from '@mdxui/auth/widgets'\n *\n * function IntegrationsPage() {\n *   const { getAccessToken } = useAuth()\n *   return <Pipes authToken={getAccessToken} />\n * }\n * ```\n */\nexport function Pipes({ authToken, className }: BaseWidgetProps) {\n  return (\n    <div className={className}>\n      <WorkOSPipes authToken={authToken} />\n    </div>\n  )\n}\n","'use client'\n\nimport { OrganizationSwitcher as WorkOSOrganizationSwitcher } from '@workos-inc/widgets'\n\nexport type OrganizationSwitcherVariant = 'ghost' | 'outline'\n\nexport interface OrganizationSwitcherProps {\n  /** Auth token getter function */\n  authToken: () => Promise<string>\n  /**\n   * Function to switch to a different organization.\n   * Receives an object with organizationId.\n   */\n  switchToOrganization: (args: { organizationId: string }) => void | Promise<void>\n  /** Visual variant of the switcher */\n  variant?: OrganizationSwitcherVariant\n  /** Custom organization label */\n  organizationLabel?: string | null\n  /** Where to truncate long organization names */\n  truncateBehavior?: 'right' | 'middle'\n  /** CSS class name */\n  className?: string\n}\n\n/**\n * Organization Switcher Widget\n *\n * Allows users to switch between organizations they belong to.\n *\n * @example\n * ```tsx\n * import { useAuth } from '@mdxui/auth'\n * import { OrganizationSwitcher } from '@mdxui/auth/widgets'\n *\n * function OrgSwitcher() {\n *   const { getAccessToken, switchToOrganization } = useAuth()\n *\n *   // Adapt the function signature\n *   const handleSwitch = ({ organizationId }: { organizationId: string }) => {\n *     return switchToOrganization(organizationId)\n *   }\n *\n *   return (\n *     <OrganizationSwitcher\n *       authToken={getAccessToken}\n *       switchToOrganization={handleSwitch}\n *     />\n *   )\n * }\n * ```\n */\nexport function OrganizationSwitcher({\n  authToken,\n  switchToOrganization,\n  variant,\n  organizationLabel,\n  truncateBehavior,\n  className,\n}: OrganizationSwitcherProps) {\n  return (\n    <div className={className}>\n      <WorkOSOrganizationSwitcher\n        authToken={authToken}\n        switchToOrganization={switchToOrganization}\n        variant={variant}\n        organizationLabel={organizationLabel}\n        truncateBehavior={truncateBehavior}\n      />\n    </div>\n  )\n}\n"],"mappings":";AAEA,SAAS,eAAe,yBAAyB;AAgC3C;AAHC,SAAS,YAAY,EAAE,WAAW,UAAU,GAAoB;AACrE,SACE,oBAAC,SAAI,WACH,8BAAC,qBAAkB,WAAsB,GAC3C;AAEJ;;;ACnCA,SAAS,gBAAgB,0BAA0B;AA2B7C,gBAAAA,YAAA;AAHC,SAAS,aAAa,EAAE,WAAW,UAAU,GAAoB;AACtE,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA,KAAC,sBAAmB,WAAsB,GAC5C;AAEJ;;;AC9BA,SAAS,gBAAgB,0BAA0B;AA2D7C,gBAAAC,YAAA;AALC,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI;AAE/B,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA,KAAC,sBAAoB,GAAG,MAAM,GAChC;AAEJ;;;AC9DA,SAAS,WAAW,qBAAqB;AA6BnC,gBAAAC,YAAA;AAHC,SAAS,QAAQ,EAAE,WAAW,UAAU,GAAoB;AACjE,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA,KAAC,iBAAc,WAAsB,GACvC;AAEJ;;;AChCA,SAAS,mBAAmB,6BAA6B;AAyDnD,gBAAAC,YAAA;AAPC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,gBAAgB;AAAA,EAChB;AACF,GAAyB;AACvB,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA,KAAC,yBAAsB,WAAsB,GAC/C;AAEJ;;;AC5DA,SAAS,SAAS,mBAAmB;AA2B/B,gBAAAC,YAAA;AAHC,SAAS,MAAM,EAAE,WAAW,UAAU,GAAoB;AAC/D,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA,KAAC,eAAY,WAAsB,GACrC;AAEJ;;;AC9BA,SAAS,wBAAwB,kCAAkC;AA2D7D,gBAAAC,YAAA;AAVC,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,SACE,gBAAAA,KAAC,SAAI,WACH,0BAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;","names":["jsx","jsx","jsx","jsx","jsx","jsx"]}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@mdxui/auth",
+  "version": "1.1.0",
+  "description": "Authentication components and WorkOS AuthKit wrappers for mdxui",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "author": "dot.do",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dot-do/ui.git",
+    "directory": "packages/auth"
+  },
+  "homepage": "https://mdxui.dev",
+  "bugs": {
+    "url": "https://github.com/dot-do/ui/issues"
+  },
+  "keywords": [
+    "mdxui",
+    "react",
+    "auth",
+    "authentication",
+    "workos",
+    "authkit",
+    "identity"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "import": "./dist/providers/index.js"
+    },
+    "./widgets": {
+      "types": "./dist/widgets/index.d.ts",
+      "import": "./dist/widgets/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "import": "./dist/hooks/index.js"
+    },
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.js"
+    },
+    "./schemas": {
+      "types": "./dist/schemas/index.d.ts",
+      "import": "./dist/schemas/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "jsdom": "^26.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "5.9.3",
+    "vitest": "^3.2.4",
+    "@mdxui/typescript-config": "6.0.0"
+  },
+  "dependencies": {
+    "@workos-inc/authkit-react": "^0.16.0",
+    "@workos-inc/widgets": "^1.7.2",
+    "zod": "^4.3.5",
+    "mdxui": "6.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo node_modules"
+  }
+}