@vaultix.ai/react 0.3.4 → 0.3.6

package/dist/index.d.mts

@@ -1,6 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 
+type AuthMethod = "password" | "magic_link" | "passkey";
+type OAuthProvider = "google" | "github" | "meta" | "linkedin" | "x" | "threads";
+interface AppConfig {
+    methods: AuthMethod[];
+    providers: OAuthProvider[];
+}
 type RiskLevel = "low" | "medium" | "high" | "critical";
 type ChallengeType = "passkey" | "magic_link" | "password" | "totp" | "sms_otp" | "email_otp";
 interface SessionClaims {
@@ -76,6 +82,11 @@ interface VaultixContextValue {
     isSignedIn: boolean;
     /** Resolved API origin derived from the publishable key. */
     apiOrigin: string;
+    /**
+     * Per-app auth configuration. Null while loading, then set from /api/v1/app/config.
+     * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
+     */
+    appConfig: AppConfig | null;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;
@@ -240,4 +251,4 @@ declare function getStoredToken(): string | null;
 /** Clears the stored session JWT. Call on 401 so the user is prompted to sign in again. */
 declare function clearStoredToken(): void;
 
-export { type ChallengeType, type ConnectPlatformOptions, OrganizationSwitcher, type PlatformConnectResult, RedirectToSignIn, RedirectToSignUp, type RiskLevel, type SessionClaims, SignIn, SignUp, SignedIn, SignedOut, type UpdateUserParams, UserButton, type VaultixAppearance, type VaultixAppearanceVariables, type VaultixContextValue, type VaultixOrganization, VaultixProvider, type VaultixProviderProps, type VaultixSession, type VaultixUser, clearStoredToken, getStoredToken, useAuth, useOrganization, usePlatformConnect, useSession, useUser, useVaultix };
+export { type AppConfig, type AuthMethod, type ChallengeType, type ConnectPlatformOptions, type OAuthProvider, OrganizationSwitcher, type PlatformConnectResult, RedirectToSignIn, RedirectToSignUp, type RiskLevel, type SessionClaims, SignIn, SignUp, SignedIn, SignedOut, type UpdateUserParams, UserButton, type VaultixAppearance, type VaultixAppearanceVariables, type VaultixContextValue, type VaultixOrganization, VaultixProvider, type VaultixProviderProps, type VaultixSession, type VaultixUser, clearStoredToken, getStoredToken, useAuth, useOrganization, usePlatformConnect, useSession, useUser, useVaultix };

package/dist/index.d.ts

@@ -1,6 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 
+type AuthMethod = "password" | "magic_link" | "passkey";
+type OAuthProvider = "google" | "github" | "meta" | "linkedin" | "x" | "threads";
+interface AppConfig {
+    methods: AuthMethod[];
+    providers: OAuthProvider[];
+}
 type RiskLevel = "low" | "medium" | "high" | "critical";
 type ChallengeType = "passkey" | "magic_link" | "password" | "totp" | "sms_otp" | "email_otp";
 interface SessionClaims {
@@ -76,6 +82,11 @@ interface VaultixContextValue {
     isSignedIn: boolean;
     /** Resolved API origin derived from the publishable key. */
     apiOrigin: string;
+    /**
+     * Per-app auth configuration. Null while loading, then set from /api/v1/app/config.
+     * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
+     */
+    appConfig: AppConfig | null;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;
@@ -240,4 +251,4 @@ declare function getStoredToken(): string | null;
 /** Clears the stored session JWT. Call on 401 so the user is prompted to sign in again. */
 declare function clearStoredToken(): void;
 
-export { type ChallengeType, type ConnectPlatformOptions, OrganizationSwitcher, type PlatformConnectResult, RedirectToSignIn, RedirectToSignUp, type RiskLevel, type SessionClaims, SignIn, SignUp, SignedIn, SignedOut, type UpdateUserParams, UserButton, type VaultixAppearance, type VaultixAppearanceVariables, type VaultixContextValue, type VaultixOrganization, VaultixProvider, type VaultixProviderProps, type VaultixSession, type VaultixUser, clearStoredToken, getStoredToken, useAuth, useOrganization, usePlatformConnect, useSession, useUser, useVaultix };
+export { type AppConfig, type AuthMethod, type ChallengeType, type ConnectPlatformOptions, type OAuthProvider, OrganizationSwitcher, type PlatformConnectResult, RedirectToSignIn, RedirectToSignUp, type RiskLevel, type SessionClaims, SignIn, SignUp, SignedIn, SignedOut, type UpdateUserParams, UserButton, type VaultixAppearance, type VaultixAppearanceVariables, type VaultixContextValue, type VaultixOrganization, VaultixProvider, type VaultixProviderProps, type VaultixSession, type VaultixUser, clearStoredToken, getStoredToken, useAuth, useOrganization, usePlatformConnect, useSession, useUser, useVaultix };

package/dist/index.js

@@ -112,6 +112,7 @@ function VaultixProvider({
   const [user, setUser] = (0, import_react.useState)(null);
   const [session, setSession] = (0, import_react.useState)(null);
   const [organization, setOrganization] = (0, import_react.useState)(null);
+  const [appConfig, setAppConfig] = (0, import_react.useState)(null);
   const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
   const clearAuth = (0, import_react.useCallback)(() => {
@@ -212,7 +213,21 @@ function VaultixProvider({
         if (!cancelled) setIsLoaded(true);
       }
     }
+    async function fetchAppConfig() {
+      try {
+        const res = await fetch(
+          `${apiOrigin}/api/v1/app/config?pk=${encodeURIComponent(publishableKey)}`,
+          { credentials: "omit" }
+        );
+        if (res.ok && !cancelled) {
+          const cfg = await res.json();
+          setAppConfig(cfg);
+        }
+      } catch {
+      }
+    }
     hydrate();
+    void fetchAppConfig();
     return () => {
       cancelled = true;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
@@ -271,6 +286,7 @@ function VaultixProvider({
     isLoaded,
     isSignedIn: !!session,
     apiOrigin,
+    appConfig,
     signOut,
     updateUser,
     connectPlatform
@@ -316,7 +332,11 @@ function usePlatformConnect(provider, defaultOptions) {
   );
   (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined") return;
-    const params = new URLSearchParams(window.location.search);
+    const hashStr = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : "";
+    const hashParams = new URLSearchParams(hashStr);
+    const queryParams = new URLSearchParams(window.location.search);
+    const usingHash = hashParams.has("__vaultix_connect");
+    const params = usingHash ? hashParams : queryParams;
     const connectToken = params.get("__vaultix_connect");
     const returnedProvider = params.get("provider");
     if (!connectToken || returnedProvider !== provider) return;
@@ -335,9 +355,13 @@ function usePlatformConnect(provider, defaultOptions) {
       };
       setConnectedAccount(result);
       const clean = new URL(window.location.href);
-      clean.searchParams.delete("__vaultix_connect");
-      clean.searchParams.delete("provider");
-      window.history.replaceState({}, "", clean.toString());
+      if (usingHash) {
+        clean.hash = "";
+      } else {
+        clean.searchParams.delete("__vaultix_connect");
+        clean.searchParams.delete("provider");
+      }
+      window.history.replaceState({}, "", clean.href.replace(/#$/, ""));
     } catch {
     }
   }, [provider]);
@@ -413,6 +437,16 @@ function SignIn({
   const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
+  const hasMagicLink = enabledMethods.includes("magic_link");
+  const hasPasskey = enabledMethods.includes("passkey");
   const [step, setStep] = (0, import_react3.useState)("email");
   const [email, setEmail] = (0, import_react3.useState)("");
   const [password, setPassword] = (0, import_react3.useState)("");
@@ -462,7 +496,15 @@ function SignIn({
         setErr(data.error ?? "Could not look up account.");
         return;
       }
-      setStep(data.preferred_challenge === "passkey" ? "passkey" : "password");
+      if (data.preferred_challenge === "passkey" && hasPasskey) {
+        setStep("passkey");
+      } else if (hasPassword) {
+        setStep("password");
+      } else if (hasMagicLink) {
+        await handleMagicLinkRequest();
+      } else if (hasPasskey) {
+        setStep("passkey");
+      }
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -695,13 +737,13 @@ function SignIn({
           error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
           info && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "rounded-lg bg-blue-500/10 border border-blue-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs text-blue-400", children: info }) }),
           step === "email" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleButton, { onClick: handleGoogleSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitHubButton, { onClick: handleGitHubSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetaButton, { onClick: handleMetaSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkedInButton, { onClick: handleLinkedInSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XButton, { onClick: handleXSignIn }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, { mutedColor }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleButton, { onClick: handleGoogleSignIn }),
+            enabledProviders.includes("github") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitHubButton, { onClick: handleGitHubSignIn }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetaButton, { onClick: handleMetaSignIn }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkedInButton, { onClick: handleLinkedInSignIn }),
+            enabledProviders.includes("x") && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XButton, { onClick: handleXSignIn }),
+            (hasPassword || hasMagicLink || hasPasskey) && enabledProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Divider, { mutedColor }),
+            (hasPassword || hasMagicLink || hasPasskey) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 Input,
                 {
@@ -731,12 +773,14 @@ function SignIn({
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PrimaryButton, { loading, primaryColor, children: "Sign in" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+            hasMagicLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" }),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GhostButton, { onClick: () => {
               setStep("forgot");
               setError(null);
@@ -1070,6 +1114,14 @@ function SignUp({
   const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
   const [step, setStep] = (0, import_react4.useState)("email");
   const [email, setEmail] = (0, import_react4.useState)("");
   const [password, setPassword] = (0, import_react4.useState)("");
@@ -1181,13 +1233,13 @@ function SignUp({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-red-400", children: error }) }),
           step === "email" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider2, { mutedColor }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
+            enabledProviders.includes("github") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
+            enabledProviders.includes("x") && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(OAuthButton2, { icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
+            hasPassword && enabledProviders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Divider2, { mutedColor }),
+            hasPassword && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 Input2,
                 {

package/dist/index.mjs

@@ -77,6 +77,7 @@ function VaultixProvider({
   const [user, setUser] = useState(null);
   const [session, setSession] = useState(null);
   const [organization, setOrganization] = useState(null);
+  const [appConfig, setAppConfig] = useState(null);
   const jwtRef = useRef(null);
   const refreshTimerRef = useRef(null);
   const clearAuth = useCallback(() => {
@@ -177,7 +178,21 @@ function VaultixProvider({
         if (!cancelled) setIsLoaded(true);
       }
     }
+    async function fetchAppConfig() {
+      try {
+        const res = await fetch(
+          `${apiOrigin}/api/v1/app/config?pk=${encodeURIComponent(publishableKey)}`,
+          { credentials: "omit" }
+        );
+        if (res.ok && !cancelled) {
+          const cfg = await res.json();
+          setAppConfig(cfg);
+        }
+      } catch {
+      }
+    }
     hydrate();
+    void fetchAppConfig();
     return () => {
       cancelled = true;
       if (refreshTimerRef.current) clearTimeout(refreshTimerRef.current);
@@ -236,6 +251,7 @@ function VaultixProvider({
     isLoaded,
     isSignedIn: !!session,
     apiOrigin,
+    appConfig,
     signOut,
     updateUser,
     connectPlatform
@@ -281,7 +297,11 @@ function usePlatformConnect(provider, defaultOptions) {
   );
   useEffect2(() => {
     if (typeof window === "undefined") return;
-    const params = new URLSearchParams(window.location.search);
+    const hashStr = window.location.hash.startsWith("#") ? window.location.hash.slice(1) : "";
+    const hashParams = new URLSearchParams(hashStr);
+    const queryParams = new URLSearchParams(window.location.search);
+    const usingHash = hashParams.has("__vaultix_connect");
+    const params = usingHash ? hashParams : queryParams;
     const connectToken = params.get("__vaultix_connect");
     const returnedProvider = params.get("provider");
     if (!connectToken || returnedProvider !== provider) return;
@@ -300,9 +320,13 @@ function usePlatformConnect(provider, defaultOptions) {
       };
       setConnectedAccount(result);
       const clean = new URL(window.location.href);
-      clean.searchParams.delete("__vaultix_connect");
-      clean.searchParams.delete("provider");
-      window.history.replaceState({}, "", clean.toString());
+      if (usingHash) {
+        clean.hash = "";
+      } else {
+        clean.searchParams.delete("__vaultix_connect");
+        clean.searchParams.delete("provider");
+      }
+      window.history.replaceState({}, "", clean.href.replace(/#$/, ""));
     } catch {
     }
   }, [provider]);
@@ -333,7 +357,7 @@ function useAuth() {
 // src/components/SignIn.tsx
 import { clsx } from "clsx";
 import { useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 function toBase64url(buf) {
   return btoa(String.fromCharCode(...new Uint8Array(buf))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 }
@@ -378,6 +402,16 @@ function SignIn({
   const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
+  const hasMagicLink = enabledMethods.includes("magic_link");
+  const hasPasskey = enabledMethods.includes("passkey");
   const [step, setStep] = useState3("email");
   const [email, setEmail] = useState3("");
   const [password, setPassword] = useState3("");
@@ -427,7 +461,15 @@ function SignIn({
         setErr(data.error ?? "Could not look up account.");
         return;
       }
-      setStep(data.preferred_challenge === "passkey" ? "passkey" : "password");
+      if (data.preferred_challenge === "passkey" && hasPasskey) {
+        setStep("passkey");
+      } else if (hasPassword) {
+        setStep("password");
+      } else if (hasMagicLink) {
+        await handleMagicLinkRequest();
+      } else if (hasPasskey) {
+        setStep("passkey");
+      }
     } catch {
       setErr("Network error. Please try again.");
     } finally {
@@ -660,13 +702,13 @@ function SignIn({
           error && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-red-400", children: error }) }),
           info && /* @__PURE__ */ jsx2("div", { className: "rounded-lg bg-blue-500/10 border border-blue-500/30 px-3 py-2", children: /* @__PURE__ */ jsx2("p", { className: "text-xs text-blue-400", children: info }) }),
           step === "email" && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx2(GoogleButton, { onClick: handleGoogleSignIn }),
-            /* @__PURE__ */ jsx2(GitHubButton, { onClick: handleGitHubSignIn }),
-            /* @__PURE__ */ jsx2(MetaButton, { onClick: handleMetaSignIn }),
-            /* @__PURE__ */ jsx2(LinkedInButton, { onClick: handleLinkedInSignIn }),
-            /* @__PURE__ */ jsx2(XButton, { onClick: handleXSignIn }),
-            /* @__PURE__ */ jsx2(Divider, { mutedColor }),
-            /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ jsx2(GoogleButton, { onClick: handleGoogleSignIn }),
+            enabledProviders.includes("github") && /* @__PURE__ */ jsx2(GitHubButton, { onClick: handleGitHubSignIn }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ jsx2(MetaButton, { onClick: handleMetaSignIn }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ jsx2(LinkedInButton, { onClick: handleLinkedInSignIn }),
+            enabledProviders.includes("x") && /* @__PURE__ */ jsx2(XButton, { onClick: handleXSignIn }),
+            (hasPassword || hasMagicLink || hasPasskey) && enabledProviders.length > 0 && /* @__PURE__ */ jsx2(Divider, { mutedColor }),
+            (hasPassword || hasMagicLink || hasPasskey) && /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ jsx2(
                 Input,
                 {
@@ -696,12 +738,14 @@ function SignIn({
               }
             ),
             /* @__PURE__ */ jsx2(PrimaryButton, { loading, primaryColor, children: "Sign in" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
-              /* @__PURE__ */ jsx2("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
-              /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
+            hasMagicLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
+                /* @__PURE__ */ jsx2("span", { className: "text-[10px]", style: { color: mutedColor }, children: "or" }),
+                /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" })
+              ] }),
+              /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" })
             ] }),
-            /* @__PURE__ */ jsx2(GhostButton, { onClick: handleMagicLinkRequest, mutedColor, children: "\u2709 Email me a sign-in link" }),
             /* @__PURE__ */ jsx2(GhostButton, { onClick: () => {
               setStep("forgot");
               setError(null);
@@ -1035,6 +1079,14 @@ function SignUp({
   const cardBg = vars.colorBackground ?? "rgba(22,27,45,0.92)";
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
+  let appConfig = null;
+  try {
+    appConfig = useVaultixContext().appConfig;
+  } catch {
+  }
+  const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
+  const enabledMethods = appConfig?.methods ?? ["password", "magic_link", "passkey"];
+  const hasPassword = enabledMethods.includes("password");
   const [step, setStep] = useState4("email");
   const [email, setEmail] = useState4("");
   const [password, setPassword] = useState4("");
@@ -1146,13 +1198,13 @@ function SignUp({
         /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-4", children: [
           error && /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-red-500/10 border border-red-500/30 px-3 py-2", children: /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-400", children: error }) }),
           step === "email" && /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
-            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
-            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
-            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
-            /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
-            /* @__PURE__ */ jsx3(Divider2, { mutedColor }),
-            /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
+            enabledProviders.includes("google") && /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GoogleIcon2, {}), label: "Continue with Google", onClick: () => oauthRedirect("google") }),
+            enabledProviders.includes("github") && /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(GitHubIcon2, {}), label: "Continue with GitHub", onClick: () => oauthRedirect("github") }),
+            enabledProviders.includes("meta") && /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(MetaIcon2, {}), label: "Continue with Facebook", onClick: () => oauthRedirect("meta") }),
+            enabledProviders.includes("linkedin") && /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(LinkedInIcon2, {}), label: "Continue with LinkedIn", onClick: () => oauthRedirect("linkedin") }),
+            enabledProviders.includes("x") && /* @__PURE__ */ jsx3(OAuthButton2, { icon: /* @__PURE__ */ jsx3(XIcon2, {}), label: "Continue with X", onClick: () => oauthRedirect("x") }),
+            hasPassword && enabledProviders.length > 0 && /* @__PURE__ */ jsx3(Divider2, { mutedColor }),
+            hasPassword && /* @__PURE__ */ jsxs2("form", { onSubmit: handleEmailPassword, className: "space-y-3", children: [
               /* @__PURE__ */ jsx3(
                 Input2,
                 {
@@ -1351,16 +1403,16 @@ function XIcon2() {
 }
 
 // src/components/SignedIn.tsx
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
 function SignedIn({ children }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
   if (!isLoaded || !isSignedIn) return null;
-  return /* @__PURE__ */ jsx4(Fragment, { children });
+  return /* @__PURE__ */ jsx4(Fragment2, { children });
 }
 function SignedOut({ children }) {
   const { isLoaded, isSignedIn } = useVaultixContext();
   if (!isLoaded || isSignedIn) return null;
-  return /* @__PURE__ */ jsx4(Fragment, { children });
+  return /* @__PURE__ */ jsx4(Fragment2, { children });
 }
 
 // src/components/RedirectComponents.tsx
@@ -1387,7 +1439,7 @@ function RedirectToSignUp({ redirectUrl = "/sign-up" }) {
 // src/components/UserButton.tsx
 import { clsx as clsx3 } from "clsx";
 import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function UserButton({ showName = false, afterSignOutUrl, className }) {
   const { user, session, isLoaded, isSignedIn, signOut } = useVaultixContext();
   const [open, setOpen] = useState5(false);
@@ -1409,7 +1461,7 @@ function UserButton({ showName = false, afterSignOutUrl, className }) {
     await signOut();
     if (afterSignOutUrl) window.location.href = afterSignOutUrl;
   }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
     /* @__PURE__ */ jsxs3("div", { ref: containerRef, className: clsx3("relative", className), children: [
       /* @__PURE__ */ jsxs3(
         "button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaultix.ai/react",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Vaultix-ID React SDK — drop-in auth components for any React app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",