@vaultix.ai/react 0.3.5 → 0.3.7

package/dist/index.d.mts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.d.ts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.js

@@ -113,6 +113,7 @@ function VaultixProvider({
   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 [appConfigLoaded, setAppConfigLoaded] = (0, import_react.useState)(false);
   const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
   const clearAuth = (0, import_react.useCallback)(() => {
@@ -224,6 +225,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -287,6 +290,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -332,7 +336,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;
@@ -351,9 +359,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]);
@@ -430,8 +442,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -703,6 +718,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1107,8 +1155,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1201,6 +1252,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx2.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -78,6 +78,7 @@ function VaultixProvider({
   const [session, setSession] = useState(null);
   const [organization, setOrganization] = useState(null);
   const [appConfig, setAppConfig] = useState(null);
+  const [appConfigLoaded, setAppConfigLoaded] = useState(false);
   const jwtRef = useRef(null);
   const refreshTimerRef = useRef(null);
   const clearAuth = useCallback(() => {
@@ -189,6 +190,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -252,6 +255,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -297,7 +301,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;
@@ -316,9 +324,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]);
@@ -395,8 +407,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -668,6 +683,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ jsx2(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1072,8 +1120,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1166,6 +1217,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: clsx2(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs2(
     "div",
     {

package/package.json

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