@iqauth/sdk 2.5.0 → 2.6.0

package/dist/react.js

@@ -2374,7 +2374,19 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
     let cancelled = false;
     setLoading(true);
     const url2 = `${iqAuthBaseUrl.replace(/\/$/, "")}/api/public/apps/${encodeURIComponent(appKey)}/sign-in-context?return_to=${encodeURIComponent(returnTo)}`;
-    fetch(url2, { credentials: "include" }).then((r) => r.json()).then((payload) => {
+    fetch(url2, { credentials: "include" }).then(async (r) => {
+      const contentType = r.headers.get("content-type") || "";
+      if (!r.ok || !contentType.includes("json")) {
+        const bodyPreview = await r.text().then((t2) => t2.slice(0, 160)).catch(() => "");
+        console.error(
+          `[IQAuth] sign-in-context request failed: ${r.status} ${r.statusText} (content-type: ${contentType || "\u2014"}). URL: ${url2}. Common causes: (1) iqAuthBaseUrl points at the wrong host (it should be your IQAuth issuer, e.g. https://auth.dispositioniq.com \u2014 NOT your own app's domain); (2) the app key "${appKey}" is wrong or revoked; (3) CORS preflight is blocked because this origin isn't in the app's allowed-origins list. Response body preview: ${bodyPreview}`
+        );
+        throw new Error(
+          r.status >= 500 ? "Failed to load sign-in context (server error)" : `Failed to load sign-in context (HTTP ${r.status})`
+        );
+      }
+      return r.json();
+    }).then((payload) => {
       if (cancelled) return;
       if (payload?.success === false) throw new Error(payload?.error?.message || "Failed to load sign-in context");
       setCtx(payload.data);
@@ -2397,6 +2409,14 @@ var SHELL_CSS = `
   grid-template-columns: 1fr;
   background: var(--brand-bg, #f7f7f6);
   color: var(--brand-text, #0f172a);
+  /* Container queries so the two-pane layout responds to the SDK's
+     RENDERED width, not the viewport. This keeps the form usable when
+     a host app embeds <SignIn/> inside a narrower card or sidebar
+     instead of full-screen \u2014 the previous viewport @media query would
+     happily render the side-by-side hero+form into a 200px container
+     and wrap text one character per line. */
+  container-type: inline-size;
+  container-name: iqauth-sdk;
 }
 .iqauth-sdk-hero { display: none; }
 .iqauth-sdk-pane {
@@ -2446,7 +2466,7 @@ var SHELL_CSS = `
 .iqauth-sdk-google-btn:hover { background: #f8fafc; border-color: rgba(15,23,42,0.28); }
 .iqauth-sdk-google-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
 
-@media (min-width: 768px) {
+@container iqauth-sdk (min-width: 768px) {
   .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
   .iqauth-sdk-hero {
     display: flex; flex-direction: column; justify-content: space-between;
@@ -2467,7 +2487,7 @@ var SHELL_CSS = `
   .iqauth-sdk-hero-foot { font-size: 12px; opacity: 0.7; }
   .iqauth-sdk-mobile-brand { display: none; }
 }
-@media (min-width: 1280px) {
+@container iqauth-sdk (min-width: 1280px) {
   .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
 }
 `;

package/dist/react.mjs

@@ -629,7 +629,19 @@ function useIQAuthSignInContext(iqAuthBaseUrl, appKey, returnTo) {
     let cancelled = false;
     setLoading(true);
     const url = `${iqAuthBaseUrl.replace(/\/$/, "")}/api/public/apps/${encodeURIComponent(appKey)}/sign-in-context?return_to=${encodeURIComponent(returnTo)}`;
-    fetch(url, { credentials: "include" }).then((r) => r.json()).then((payload) => {
+    fetch(url, { credentials: "include" }).then(async (r) => {
+      const contentType = r.headers.get("content-type") || "";
+      if (!r.ok || !contentType.includes("json")) {
+        const bodyPreview = await r.text().then((t2) => t2.slice(0, 160)).catch(() => "");
+        console.error(
+          `[IQAuth] sign-in-context request failed: ${r.status} ${r.statusText} (content-type: ${contentType || "\u2014"}). URL: ${url}. Common causes: (1) iqAuthBaseUrl points at the wrong host (it should be your IQAuth issuer, e.g. https://auth.dispositioniq.com \u2014 NOT your own app's domain); (2) the app key "${appKey}" is wrong or revoked; (3) CORS preflight is blocked because this origin isn't in the app's allowed-origins list. Response body preview: ${bodyPreview}`
+        );
+        throw new Error(
+          r.status >= 500 ? "Failed to load sign-in context (server error)" : `Failed to load sign-in context (HTTP ${r.status})`
+        );
+      }
+      return r.json();
+    }).then((payload) => {
       if (cancelled) return;
       if (payload?.success === false) throw new Error(payload?.error?.message || "Failed to load sign-in context");
       setCtx(payload.data);
@@ -652,6 +664,14 @@ var SHELL_CSS = `
   grid-template-columns: 1fr;
   background: var(--brand-bg, #f7f7f6);
   color: var(--brand-text, #0f172a);
+  /* Container queries so the two-pane layout responds to the SDK's
+     RENDERED width, not the viewport. This keeps the form usable when
+     a host app embeds <SignIn/> inside a narrower card or sidebar
+     instead of full-screen \u2014 the previous viewport @media query would
+     happily render the side-by-side hero+form into a 200px container
+     and wrap text one character per line. */
+  container-type: inline-size;
+  container-name: iqauth-sdk;
 }
 .iqauth-sdk-hero { display: none; }
 .iqauth-sdk-pane {
@@ -701,7 +721,7 @@ var SHELL_CSS = `
 .iqauth-sdk-google-btn:hover { background: #f8fafc; border-color: rgba(15,23,42,0.28); }
 .iqauth-sdk-google-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
 
-@media (min-width: 768px) {
+@container iqauth-sdk (min-width: 768px) {
   .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
   .iqauth-sdk-hero {
     display: flex; flex-direction: column; justify-content: space-between;
@@ -722,7 +742,7 @@ var SHELL_CSS = `
   .iqauth-sdk-hero-foot { font-size: 12px; opacity: 0.7; }
   .iqauth-sdk-mobile-brand { display: none; }
 }
-@media (min-width: 1280px) {
+@container iqauth-sdk (min-width: 1280px) {
   .iqauth-sdk-shell:not([data-layout="centered_card"]):not([data-layout="full_bleed"]) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
 }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqauth/sdk",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "TypeScript SDK for IQAuth — the canonical way for all IQ projects to integrate with IQAuthService",
   "main": "dist/index.js",
   "module": "dist/index.mjs",