@drmhse/authos-react 0.1.4 → 0.2.0

package/README.md

@@ -32,10 +32,10 @@ function App() {
 ```
 
 That's it. You now have:
-- ✅ Email/password authentication with MFA support
-- ✅ Automatic session management
-- ✅ User dropdown with logout
-- ✅ Conditional rendering based on auth state
+- Email/password authentication with MFA support
+- Automatic session management
+- User dropdown with logout
+- Conditional rendering based on auth state
 
 ## Usage Modes
 
@@ -150,6 +150,22 @@ Registration form for new users.
 />
 ```
 
+### MagicLinkSignIn
+
+Sign-in component for Magic Links (passwordless).
+
+```tsx
+<MagicLinkSignIn onSuccess={() => console.log('Magic link sent!')} />
+```
+
+### PasskeySignIn
+
+Sign-in component for Passkeys (WebAuthn).
+
+```tsx
+<PasskeySignIn onSuccess={() => console.log('Authenticated!')} />
+```
+
 ### SignedIn / SignedOut
 
 Conditional rendering based on authentication state. Inspired by Clerk's API.
@@ -347,7 +363,40 @@ export default async function Dashboard() {
 
 ## Styling
 
-All components use data attributes for styling hooks. Use CSS selectors:
+AuthOS components come with **polished default styling** out of the box, similar to best-in-class auth providers. The styling is fully customizable via the `appearance` option or by overriding CSS variables.
+
+### Customization
+
+You can customize the theme colors, fonts, and more by passing an `appearance` object to `AuthOSProvider`.
+
+```tsx
+<AuthOSProvider config={{
+  baseURL: '...',
+  appearance: {
+    variables: {
+      colorPrimary: '#0066cc',
+      colorBackground: '#f5f5f5',
+      borderRadius: '0.25rem',
+      fontFamily: 'Inter, sans-serif',
+    },
+  },
+}}>
+```
+
+### CSS Variables
+
+You can also override these CSS variables in your own stylesheet:
+
+```css
+:root {
+  --authos-color-primary: #0066cc;
+  --authos-border-radius: 4px;
+}
+```
+
+### Headless Styling
+
+If you prefer to completely style the components yourself, you can target the data attributes. The default styles have low specificity, so your CSS classes will easily override them.
 
 ```css
 [data-authos-signin] { /* Container */ }

package/dist/index.d.mts

@@ -37,12 +37,76 @@ interface AuthOSConfig extends SsoClientOptions {
      * @example '/dashboard'
      */
     afterSignInUrl?: string;
+    /**
+     * URL to redirect to after successful sign-up.
+     * If not set, user stays on current page.
     /**
      * URL to redirect to after successful sign-up.
      * If not set, user stays on current page.
      * @example '/onboarding'
      */
     afterSignUpUrl?: string;
+    /**
+     * Appearance customization options.
+     * Use to override default theme colors, fonts, and styling.
+     * @example
+     * ```ts
+     * appearance: {
+     *   variables: {
+     *     colorPrimary: '#0066cc',
+     *     borderRadius: '0.25rem',
+     *   }
+     * }
+     * ```
+     */
+    appearance?: AppearanceOptions;
+}
+/**
+ * Appearance variables for customizing the visual theme.
+ * All properties are optional and use CSS color/size values.
+ */
+interface AppearanceVariables {
+    /** Primary brand color (e.g., '#6366f1') */
+    colorPrimary?: string;
+    /** Primary color on hover */
+    colorPrimaryHover?: string;
+    /** Text color on primary background */
+    colorPrimaryForeground?: string;
+    /** Error/danger color */
+    colorDanger?: string;
+    /** Success color */
+    colorSuccess?: string;
+    /** Warning color */
+    colorWarning?: string;
+    /** Main background color */
+    colorBackground?: string;
+    /** Surface/card background color */
+    colorSurface?: string;
+    /** Main text color */
+    colorForeground?: string;
+    /** Muted/secondary text color */
+    colorMuted?: string;
+    /** Border color */
+    colorBorder?: string;
+    /** Input background color */
+    colorInput?: string;
+    /** Input border color */
+    colorInputBorder?: string;
+    /** Focus ring color */
+    colorRing?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Border radius */
+    borderRadius?: string;
+}
+/**
+ * Appearance configuration for customizing component styling.
+ */
+interface AppearanceOptions {
+    /** CSS variable overrides */
+    variables?: AppearanceVariables;
 }
 /**
  * Configuration options for the AuthOS React provider
@@ -129,6 +193,8 @@ interface SignUpProps {
     onError?: (error: Error) => void;
     /** Organization slug for registration context */
     orgSlug?: string;
+    /** Service slug for registration context (used with orgSlug for tenant attribution) */
+    serviceSlug?: string;
     /** Whether to show the "sign in" link */
     showSignIn?: boolean;
     /** Custom class name for the form container */
@@ -440,7 +506,7 @@ declare function SignIn({ onSuccess, onError, showForgotPassword, showSignUp, cl
  * }
  * ```
  */
-declare function SignUp({ onSuccess, onError, orgSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
+declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Component for switching between organizations.

package/dist/index.d.ts

@@ -37,12 +37,76 @@ interface AuthOSConfig extends SsoClientOptions {
      * @example '/dashboard'
      */
     afterSignInUrl?: string;
+    /**
+     * URL to redirect to after successful sign-up.
+     * If not set, user stays on current page.
     /**
      * URL to redirect to after successful sign-up.
      * If not set, user stays on current page.
      * @example '/onboarding'
      */
     afterSignUpUrl?: string;
+    /**
+     * Appearance customization options.
+     * Use to override default theme colors, fonts, and styling.
+     * @example
+     * ```ts
+     * appearance: {
+     *   variables: {
+     *     colorPrimary: '#0066cc',
+     *     borderRadius: '0.25rem',
+     *   }
+     * }
+     * ```
+     */
+    appearance?: AppearanceOptions;
+}
+/**
+ * Appearance variables for customizing the visual theme.
+ * All properties are optional and use CSS color/size values.
+ */
+interface AppearanceVariables {
+    /** Primary brand color (e.g., '#6366f1') */
+    colorPrimary?: string;
+    /** Primary color on hover */
+    colorPrimaryHover?: string;
+    /** Text color on primary background */
+    colorPrimaryForeground?: string;
+    /** Error/danger color */
+    colorDanger?: string;
+    /** Success color */
+    colorSuccess?: string;
+    /** Warning color */
+    colorWarning?: string;
+    /** Main background color */
+    colorBackground?: string;
+    /** Surface/card background color */
+    colorSurface?: string;
+    /** Main text color */
+    colorForeground?: string;
+    /** Muted/secondary text color */
+    colorMuted?: string;
+    /** Border color */
+    colorBorder?: string;
+    /** Input background color */
+    colorInput?: string;
+    /** Input border color */
+    colorInputBorder?: string;
+    /** Focus ring color */
+    colorRing?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Border radius */
+    borderRadius?: string;
+}
+/**
+ * Appearance configuration for customizing component styling.
+ */
+interface AppearanceOptions {
+    /** CSS variable overrides */
+    variables?: AppearanceVariables;
 }
 /**
  * Configuration options for the AuthOS React provider
@@ -129,6 +193,8 @@ interface SignUpProps {
     onError?: (error: Error) => void;
     /** Organization slug for registration context */
     orgSlug?: string;
+    /** Service slug for registration context (used with orgSlug for tenant attribution) */
+    serviceSlug?: string;
     /** Whether to show the "sign in" link */
     showSignIn?: boolean;
     /** Custom class name for the form container */
@@ -440,7 +506,7 @@ declare function SignIn({ onSuccess, onError, showForgotPassword, showSignUp, cl
  * }
  * ```
  */
-declare function SignUp({ onSuccess, onError, orgSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
+declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Component for switching between organizations.