@drmhse/authos-react 0.1.5 → 0.2.1

package/README.md

@@ -363,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 */ }
@@ -374,6 +407,8 @@ All components use data attributes for styling hooks. Use CSS selectors:
 [data-authos-oauth] { /* OAuth button */ }
 [data-authos-oauth][data-provider="github"] { /* GitHub button */ }
 [data-authos-divider] { /* "or" divider */ }
+[data-authos-magic-link] { /* Magic Link container */ }
+[data-authos-passkey] { /* Passkey container */ }
 ```
 
 ## Security Considerations

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
@@ -135,6 +199,19 @@ interface SignUpProps {
     showSignIn?: boolean;
     /** Custom class name for the form container */
     className?: string;
+    /**
+     * OAuth providers to display as buttons.
+     * Set to false to hide all OAuth buttons, or provide an array of providers.
+     * @default false (no OAuth buttons shown by default)
+     * @example ['github', 'google', 'microsoft']
+     */
+    providers?: ('github' | 'google' | 'microsoft')[] | false;
+    /**
+     * Show a divider between OAuth and email/password forms.
+     * Only visible when providers are enabled.
+     * @default true
+     */
+    showDivider?: boolean;
 }
 /**
  * Props for the OrganizationSwitcher component
@@ -437,12 +514,13 @@ declare function SignIn({ onSuccess, onError, showForgotPassword, showSignUp, cl
  *     <SignUp
  *       onSuccess={() => console.log('Registration successful!')}
  *       onError={(error) => console.error('Registration failed:', error)}
+ *       providers={['github', 'google']}
  *     />
  *   );
  * }
  * ```
  */
-declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
+declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className, providers, showDivider, }: 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
@@ -135,6 +199,19 @@ interface SignUpProps {
     showSignIn?: boolean;
     /** Custom class name for the form container */
     className?: string;
+    /**
+     * OAuth providers to display as buttons.
+     * Set to false to hide all OAuth buttons, or provide an array of providers.
+     * @default false (no OAuth buttons shown by default)
+     * @example ['github', 'google', 'microsoft']
+     */
+    providers?: ('github' | 'google' | 'microsoft')[] | false;
+    /**
+     * Show a divider between OAuth and email/password forms.
+     * Only visible when providers are enabled.
+     * @default true
+     */
+    showDivider?: boolean;
 }
 /**
  * Props for the OrganizationSwitcher component
@@ -437,12 +514,13 @@ declare function SignIn({ onSuccess, onError, showForgotPassword, showSignUp, cl
  *     <SignUp
  *       onSuccess={() => console.log('Registration successful!')}
  *       onError={(error) => console.error('Registration failed:', error)}
+ *       providers={['github', 'google']}
  *     />
  *   );
  * }
  * ```
  */
-declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className }: SignUpProps): react_jsx_runtime.JSX.Element;
+declare function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn, className, providers, showDivider, }: SignUpProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Component for switching between organizations.