@vaultix.ai/react 0.2.3 → 0.3.0

package/dist/index.js

@@ -170,21 +170,22 @@ function VaultixProvider({
         }
         jwtRef.current = jwt;
       }
+      if (!jwt) {
+        if (!cancelled) setIsLoaded(true);
+        return;
+      }
       try {
         const headers = {
+          "Authorization": `Bearer ${jwt}`,
           "X-Vaultix-Publishable-Key": publishableKey
         };
-        if (jwt) headers["Authorization"] = `Bearer ${jwt}`;
         const res = await fetch(`${apiOrigin}/api/v1/me`, {
-          // Use Bearer token for cross-domain; fall back to cookie for same-domain
-          credentials: jwt ? "omit" : "include",
+          credentials: "omit",
           headers
         });
         if (!res.ok) {
-          if (jwt) {
-            clearJwt();
-            jwtRef.current = null;
-          }
+          clearJwt();
+          jwtRef.current = null;
           if (!cancelled) setIsLoaded(true);
           return;
         }
@@ -236,6 +237,7 @@ function VaultixProvider({
       "data-vaultix-after-sign-in": afterSignInUrl ?? "",
       "data-vaultix-after-sign-up": afterSignUpUrl ?? "",
       "data-vaultix-api": apiOrigin,
+      "data-vaultix-pk": publishableKey,
       style: { display: "contents" },
       children
     }
@@ -295,6 +297,13 @@ function resolveApiOrigin2(prop) {
   }
   return "";
 }
+function resolvePk() {
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-pk]");
+    if (el) return el.getAttribute("data-vaultix-pk") ?? "";
+  }
+  return "";
+}
 function resolveAfterSignInUrl(redirectUrlProp) {
   if (redirectUrlProp) return redirectUrlProp;
   if (typeof document !== "undefined") {
@@ -336,20 +345,18 @@ function SignIn({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  async function handleGoogleSignIn() {
+  function oauthRedirect(provider) {
     const target = resolveAfterSignInUrl(redirectUrl);
+    const pk = resolvePk();
     const params = new URLSearchParams({ redirect_url: target });
-    const url = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
-    try {
-      const res = await fetch(url, { method: "HEAD", redirect: "manual" });
-      if (res.status === 503 || res.status === 0) {
-        setErr("Google login is not configured. Please sign in with email.");
-        return;
-      }
-    } catch {
-    }
-    window.location.href = url;
+    if (pk) params.set("pk", pk);
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/${provider}?${params}`;
   }
+  const handleGoogleSignIn = () => oauthRedirect("google");
+  const handleMetaSignIn = () => oauthRedirect("meta");
+  const handleLinkedInSignIn = () => oauthRedirect("linkedin");
+  const handleXSignIn = () => oauthRedirect("x");
+  const handleGitHubSignIn = () => oauthRedirect("github");
   async function handleEmailSubmit(e) {
     e.preventDefault();
     setError(null);
@@ -378,10 +385,14 @@ function SignIn({
     setError(null);
     setLoading(true);
     try {
+      const pk = resolvePk();
       const res = await fetch(`${apiOrigin}/api/v1/auth/sign-in`, {
         method: "POST",
         credentials: "include",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          ...pk ? { "x-vaultix-pk": pk } : {}
+        },
         body: JSON.stringify({ email, password })
       });
       const data = await res.json();
@@ -570,6 +581,10 @@ function SignIn({
           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, {}),
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -735,7 +750,11 @@ function GhostButton({ children, onClick }) {
     }
   );
 }
-function GoogleButton({ onClick }) {
+function OAuthButton({
+  icon,
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "button",
     {
@@ -749,12 +768,27 @@ function GoogleButton({ onClick }) {
         "transition-all duration-150"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleIcon, {}),
-        "Continue with Google"
+        icon,
+        label
       ]
     }
   );
 }
+function GoogleButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GoogleIcon, {}), label: "Continue with Google", onClick });
+}
+function MetaButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MetaIcon, {}), label: "Continue with Facebook", onClick });
+}
+function LinkedInButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LinkedInIcon, {}), label: "Continue with LinkedIn", onClick });
+}
+function GitHubButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GitHubIcon, {}), label: "Continue with GitHub", onClick });
+}
+function XButton({ onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(OAuthButton, { icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(XIcon, {}), label: "Continue with X", onClick });
+}
 function Divider() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1 h-px bg-white/8" }),
@@ -816,6 +850,18 @@ function GoogleIcon() {
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
   ] });
 }
+function MetaIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+}
+function LinkedInIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#0A66C2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+}
+function GitHubIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) });
+}
+function XIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+}
 
 // src/components/SignUp.tsx
 var import_clsx2 = require("clsx");
@@ -867,19 +913,10 @@ function SignUp({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  async function handleGoogleSignUp() {
+  function handleGoogleSignUp() {
     const target = resolveAfterSignUpUrl(redirectUrl);
     const params = new URLSearchParams({ redirect_url: target });
-    const url = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
-    try {
-      const res = await fetch(url, { method: "HEAD", redirect: "manual" });
-      if (res.status === 503 || res.status === 0) {
-        setErr("Google login is not configured. Please sign in with email.");
-        return;
-      }
-    } catch {
-    }
-    window.location.href = url;
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
   }
   async function handleEmailPassword(e) {
     e.preventDefault();

package/dist/index.mjs

@@ -138,21 +138,22 @@ function VaultixProvider({
         }
         jwtRef.current = jwt;
       }
+      if (!jwt) {
+        if (!cancelled) setIsLoaded(true);
+        return;
+      }
       try {
         const headers = {
+          "Authorization": `Bearer ${jwt}`,
           "X-Vaultix-Publishable-Key": publishableKey
         };
-        if (jwt) headers["Authorization"] = `Bearer ${jwt}`;
         const res = await fetch(`${apiOrigin}/api/v1/me`, {
-          // Use Bearer token for cross-domain; fall back to cookie for same-domain
-          credentials: jwt ? "omit" : "include",
+          credentials: "omit",
           headers
         });
         if (!res.ok) {
-          if (jwt) {
-            clearJwt();
-            jwtRef.current = null;
-          }
+          clearJwt();
+          jwtRef.current = null;
           if (!cancelled) setIsLoaded(true);
           return;
         }
@@ -204,6 +205,7 @@ function VaultixProvider({
       "data-vaultix-after-sign-in": afterSignInUrl ?? "",
       "data-vaultix-after-sign-up": afterSignUpUrl ?? "",
       "data-vaultix-api": apiOrigin,
+      "data-vaultix-pk": publishableKey,
       style: { display: "contents" },
       children
     }
@@ -263,6 +265,13 @@ function resolveApiOrigin2(prop) {
   }
   return "";
 }
+function resolvePk() {
+  if (typeof document !== "undefined") {
+    const el = document.querySelector("[data-vaultix-pk]");
+    if (el) return el.getAttribute("data-vaultix-pk") ?? "";
+  }
+  return "";
+}
 function resolveAfterSignInUrl(redirectUrlProp) {
   if (redirectUrlProp) return redirectUrlProp;
   if (typeof document !== "undefined") {
@@ -304,20 +313,18 @@ function SignIn({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  async function handleGoogleSignIn() {
+  function oauthRedirect(provider) {
     const target = resolveAfterSignInUrl(redirectUrl);
+    const pk = resolvePk();
     const params = new URLSearchParams({ redirect_url: target });
-    const url = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
-    try {
-      const res = await fetch(url, { method: "HEAD", redirect: "manual" });
-      if (res.status === 503 || res.status === 0) {
-        setErr("Google login is not configured. Please sign in with email.");
-        return;
-      }
-    } catch {
-    }
-    window.location.href = url;
+    if (pk) params.set("pk", pk);
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/${provider}?${params}`;
   }
+  const handleGoogleSignIn = () => oauthRedirect("google");
+  const handleMetaSignIn = () => oauthRedirect("meta");
+  const handleLinkedInSignIn = () => oauthRedirect("linkedin");
+  const handleXSignIn = () => oauthRedirect("x");
+  const handleGitHubSignIn = () => oauthRedirect("github");
   async function handleEmailSubmit(e) {
     e.preventDefault();
     setError(null);
@@ -346,10 +353,14 @@ function SignIn({
     setError(null);
     setLoading(true);
     try {
+      const pk = resolvePk();
       const res = await fetch(`${apiOrigin}/api/v1/auth/sign-in`, {
         method: "POST",
         credentials: "include",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          ...pk ? { "x-vaultix-pk": pk } : {}
+        },
         body: JSON.stringify({ email, password })
       });
       const data = await res.json();
@@ -538,6 +549,10 @@ function SignIn({
           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, {}),
             /* @__PURE__ */ jsxs("form", { onSubmit: handleEmailSubmit, className: "space-y-3", children: [
               /* @__PURE__ */ jsx2(
@@ -703,7 +718,11 @@ function GhostButton({ children, onClick }) {
     }
   );
 }
-function GoogleButton({ onClick }) {
+function OAuthButton({
+  icon,
+  label,
+  onClick
+}) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
@@ -717,12 +736,27 @@ function GoogleButton({ onClick }) {
         "transition-all duration-150"
       ),
       children: [
-        /* @__PURE__ */ jsx2(GoogleIcon, {}),
-        "Continue with Google"
+        icon,
+        label
       ]
     }
   );
 }
+function GoogleButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(GoogleIcon, {}), label: "Continue with Google", onClick });
+}
+function MetaButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(MetaIcon, {}), label: "Continue with Facebook", onClick });
+}
+function LinkedInButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(LinkedInIcon, {}), label: "Continue with LinkedIn", onClick });
+}
+function GitHubButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(GitHubIcon, {}), label: "Continue with GitHub", onClick });
+}
+function XButton({ onClick }) {
+  return /* @__PURE__ */ jsx2(OAuthButton, { icon: /* @__PURE__ */ jsx2(XIcon, {}), label: "Continue with X", onClick });
+}
 function Divider() {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     /* @__PURE__ */ jsx2("div", { className: "flex-1 h-px bg-white/8" }),
@@ -784,6 +818,18 @@ function GoogleIcon() {
     /* @__PURE__ */ jsx2("path", { d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z", fill: "#EA4335" })
   ] });
 }
+function MetaIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#1877F2", children: /* @__PURE__ */ jsx2("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
+}
+function LinkedInIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "#0A66C2", children: /* @__PURE__ */ jsx2("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }) });
+}
+function GitHubIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z" }) });
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "white", children: /* @__PURE__ */ jsx2("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622 5.911-5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) });
+}
 
 // src/components/SignUp.tsx
 import { clsx as clsx2 } from "clsx";
@@ -835,19 +881,10 @@ function SignUp({
     url.searchParams.set("__vaultix_handshake", handshakeToken);
     window.location.href = url.toString();
   }
-  async function handleGoogleSignUp() {
+  function handleGoogleSignUp() {
     const target = resolveAfterSignUpUrl(redirectUrl);
     const params = new URLSearchParams({ redirect_url: target });
-    const url = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
-    try {
-      const res = await fetch(url, { method: "HEAD", redirect: "manual" });
-      if (res.status === 503 || res.status === 0) {
-        setErr("Google login is not configured. Please sign in with email.");
-        return;
-      }
-    } catch {
-    }
-    window.location.href = url;
+    window.location.href = `${apiOrigin}/api/v1/auth/oauth/google?${params}`;
   }
   async function handleEmailPassword(e) {
     e.preventDefault();

package/package.json

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