@drmhse/authos-react 0.2.0 → 0.2.2

package/README.md

@@ -146,10 +146,14 @@ Registration form for new users.
 <SignUp
   onSuccess={() => console.log('Check your email!')}
   onError={(error) => console.error(error)}
-  orgSlug="my-org"  // Optional: pre-fill organization
+  orgSlug="my-org"      // Optional: override provider config
+  serviceSlug="my-app"  // Optional: override provider config
 />
 ```
 
+> [!NOTE]
+> The `orgSlug` and `serviceSlug` props are optional and will fallback to the values configured in `AuthOSProvider`. Only use these props if you need to override the provider configuration for a specific use case.
+
 ### MagicLinkSignIn
 
 Sign-in component for Magic Links (passwordless).
@@ -407,6 +411,8 @@ If you prefer to completely style the components yourself, you can target the da
 [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

@@ -199,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
@@ -501,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

@@ -199,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
@@ -501,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.js

@@ -87,26 +87,37 @@ var AUTHOS_STYLES = `
 }
 
 /* ==========================================================================
-   Base Form Styles
+   Base Form Styles (Card Layout)
    ========================================================================== */
 
 [data-authos-signin],
 [data-authos-signup],
-[data-authos-magiclink],
+[data-authos-magic-link],
 [data-authos-passkey] {
   font-family: var(--authos-font-family);
   font-size: var(--authos-font-size-sm);
   color: var(--authos-color-foreground);
+  
+  /* Card Styling */
+  background-color: var(--authos-color-surface);
+  border: 1px solid var(--authos-color-border);
+  border-radius: var(--authos-border-radius-lg);
+  box-shadow: var(--authos-shadow);
+  padding: 2rem;
   width: 100%;
+  max-width: 25rem; /* 400px */
+  margin: 0 auto;   /* Center horizontally */
 }
 
+/* Ensure forms inside take full width */
 [data-authos-signin] form,
 [data-authos-signup] form,
-[data-authos-magiclink] form,
+[data-authos-magic-link] form,
 [data-authos-passkey] form {
   display: flex;
   flex-direction: column;
   gap: var(--authos-spacing-md);
+  width: 100%;
 }
 
 /* ==========================================================================
@@ -430,39 +441,95 @@ var AUTHOS_STYLES = `
    ========================================================================== */
 
 [data-authos-orgswitcher] {
+  position: relative;
   font-family: var(--authos-font-family);
   font-size: var(--authos-font-size-sm);
+  color: var(--authos-color-foreground);
 }
 
-[data-authos-orgswitcher] select {
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
+[data-authos-org-trigger] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--authos-spacing-sm);
+  width: 100%;
+  padding: 0.5rem 0.75rem;
   font-size: var(--authos-font-size-sm);
   font-family: inherit;
   color: var(--authos-color-foreground);
-  background-color: var(--authos-color-input);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5rem center;
+  background-color: var(--authos-color-surface);
   border: 1px solid var(--authos-color-input-border);
   border-radius: var(--authos-border-radius);
   cursor: pointer;
   outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   transition: border-color var(--authos-transition), box-shadow var(--authos-transition);
 }
 
-[data-authos-orgswitcher] select:focus {
+[data-authos-org-trigger]:focus-visible {
   border-color: var(--authos-color-input-focus);
   box-shadow: 0 0 0 3px var(--authos-color-ring);
 }
 
-[data-authos-orgswitcher] select:disabled {
+[data-authos-org-trigger][disabled] {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
+[data-authos-org-chevron] {
+  font-size: 0.625rem;
+  color: var(--authos-color-muted);
+}
+
+[data-authos-org-list] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--authos-spacing-xs);
+  padding: var(--authos-spacing-xs);
+  background-color: var(--authos-color-surface);
+  border: 1px solid var(--authos-color-border);
+  border-radius: var(--authos-border-radius);
+  box-shadow: var(--authos-shadow-lg);
+  list-style: none;
+  z-index: 50;
+  max-height: 240px;
+  overflow-y: auto;
+  animation: authos-fade-in 150ms ease-out;
+}
+
+[data-authos-org-item] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--authos-font-size-sm);
+  color: var(--authos-color-foreground);
+  background: transparent;
+  border: none;
+  border-radius: var(--authos-border-radius-sm);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--authos-transition);
+}
+
+[data-authos-org-item]:hover,
+[data-authos-org-item]:focus-visible {
+  background-color: var(--authos-color-background);
+  outline: none;
+}
+
+[data-authos-org-item][data-active="true"] {
+  background-color: rgba(99, 102, 241, 0.05);
+  color: var(--authos-color-primary);
+  font-weight: 500;
+}
+
+[data-authos-org-item-check] {
+  color: var(--authos-color-primary);
+}
+
 /* ==========================================================================
    Loading State
    ========================================================================== */
@@ -501,6 +568,16 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
     if (config.appearance?.variables) {
       applyVariables(config.appearance.variables);
     }
+    if (config.org && !config.service) {
+      console.warn(
+        '[AuthOS] You provided "org" but not "service". OAuth flows may not work correctly.'
+      );
+    }
+    if (!config.org && config.service) {
+      console.warn(
+        '[AuthOS] You provided "service" but not "org". OAuth flows may not work correctly.'
+      );
+    }
   }, [config.appearance]);
   const hasInitialToken = react.useRef(!!initialSessionToken);
   react.useEffect(() => {
@@ -843,14 +920,25 @@ function SignIn({
     ] })
   ] });
 }
-function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn = true, className }) {
-  const { client } = useAuthOSContext();
+function SignUp({
+  onSuccess,
+  onError,
+  orgSlug,
+  serviceSlug,
+  showSignIn = true,
+  className,
+  providers = false,
+  showDivider = true
+}) {
+  const { client, config } = useAuthOSContext();
   const [email, setEmail] = react.useState("");
   const [password, setPassword] = react.useState("");
   const [confirmPassword, setConfirmPassword] = react.useState("");
   const [error, setError] = react.useState(null);
   const [isLoading, setIsLoading] = react.useState(false);
   const [isSuccess, setIsSuccess] = react.useState(false);
+  const hasOAuthConfig = !!(config.org && config.service);
+  const oauthProviders = providers && Array.isArray(providers) ? providers : [];
   const handleSubmit = react.useCallback(
     async (e) => {
       e.preventDefault();
@@ -868,8 +956,8 @@ function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn = true, c
         await client.auth.register({
           email,
           password,
-          org_slug: orgSlug,
-          service_slug: serviceSlug
+          org_slug: orgSlug ?? config.org,
+          service_slug: serviceSlug ?? config.service
         });
         setIsSuccess(true);
         onSuccess?.();
@@ -893,63 +981,77 @@ function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn = true, c
       ] })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signup": true, "data-state": "form", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-email", children: "Email" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "authos-signup-email",
-          type: "email",
-          autoComplete: "email",
-          value: email,
-          onChange: (e) => setEmail(e.target.value),
-          placeholder: "Enter your email",
-          required: true,
-          disabled: isLoading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-password", children: "Password" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "authos-signup-password",
-          type: "password",
-          autoComplete: "new-password",
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          placeholder: "Create a password",
-          required: true,
-          minLength: 8,
-          disabled: isLoading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "confirm-password", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-confirm", children: "Confirm Password" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-signup": true, "data-state": "form", children: [
+    oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-oauth-section": "", children: [
+      oauthProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
+        OAuthButton,
         {
-          id: "authos-signup-confirm",
-          type: "password",
-          autoComplete: "new-password",
-          value: confirmPassword,
-          onChange: (e) => setConfirmPassword(e.target.value),
-          placeholder: "Confirm your password",
-          required: true,
-          disabled: isLoading
-        }
-      )
+          provider,
+          disabled: isLoading || !hasOAuthConfig
+        },
+        provider
+      )),
+      !hasOAuthConfig && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-authos-oauth-warning": "", style: { color: "orange", fontSize: "0.875rem" }, children: "OAuth requires org and service in AuthOSProvider config" })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": true, children: isLoading ? "Creating account..." : "Create Account" }),
-    showSignIn && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signin-prompt": true, children: [
-      "Already have an account? ",
-      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in" })
+    oauthProviders.length > 0 && showDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-divider": "", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "or" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-email", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-signup-email",
+            type: "email",
+            autoComplete: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "Enter your email",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-password", children: "Password" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-signup-password",
+            type: "password",
+            autoComplete: "new-password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            placeholder: "Create a password",
+            required: true,
+            minLength: 8,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "confirm-password", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-signup-confirm", children: "Confirm Password" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-signup-confirm",
+            type: "password",
+            autoComplete: "new-password",
+            value: confirmPassword,
+            onChange: (e) => setConfirmPassword(e.target.value),
+            placeholder: "Confirm your password",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": true, children: isLoading ? "Creating account..." : "Create Account" }),
+      showSignIn && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signin-prompt": true, children: [
+        "Already have an account? ",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in" })
+      ] })
     ] })
-  ] }) });
+  ] });
 }
 function OrganizationSwitcher({ onSwitch, className, renderItem }) {
   const { client, isAuthenticated } = useAuthOSContext();