@authowl/react 0.18.2 → 0.18.4

package/dist/index.cjs

@@ -625,14 +625,18 @@ var KNOWN_METHODS = [
 function emailAutocomplete(isPasskeyHost) {
   return isPasskeyHost ? "email webauthn" : "email";
 }
-function passkeyReachableFrom(authBaseUrl, pageHost) {
-  if (pageHost === void 0 || !authBaseUrl) return true;
-  let rpId;
-  try {
-    rpId = new URL(authBaseUrl).hostname;
-  } catch {
-    return true;
+function passkeyReachableFrom(authBaseUrl, pageHost, relyingPartyId) {
+  if (pageHost === void 0) return true;
+  let rpId = relyingPartyId ?? void 0;
+  if (!rpId) {
+    if (!authBaseUrl) return true;
+    try {
+      rpId = new URL(authBaseUrl).hostname;
+    } catch {
+      return true;
+    }
   }
+  if (rpId !== "localhost" && !rpId.includes(".")) return false;
   return pageHost === rpId || pageHost.endsWith(`.${rpId}`);
 }
 function resolveSignInMethods(config, pageHost) {
@@ -645,7 +649,11 @@ function resolveSignInMethods(config, pageHost) {
   const magicLink = capabilities.magicLinkSignIn;
   const emailOtp = capabilities.emailOtpSignIn && !capabilities.totp && !capabilities.mfaRequired;
   const phoneOtp = capabilities.phoneSignIn;
-  const passkey = capabilities.passkeySignIn && passkeyReachableFrom(config?.authBaseUrl, pageHost);
+  const passkey = capabilities.passkeySignIn && passkeyReachableFrom(
+    config?.authBaseUrl,
+    pageHost,
+    config?.authentication?.passkey?.relyingPartyId
+  );
   const sso = has("sso");
   const renderable = password || username || magicLink || emailOtp || phoneOtp || passkey || sso || social.length > 0;
   const emptyReason = renderable ? null : methods.length > 0 ? "unsupported" : "none";

package/dist/index.js

@@ -544,14 +544,18 @@ var KNOWN_METHODS = [
 function emailAutocomplete(isPasskeyHost) {
   return isPasskeyHost ? "email webauthn" : "email";
 }
-function passkeyReachableFrom(authBaseUrl, pageHost) {
-  if (pageHost === void 0 || !authBaseUrl) return true;
-  let rpId;
-  try {
-    rpId = new URL(authBaseUrl).hostname;
-  } catch {
-    return true;
+function passkeyReachableFrom(authBaseUrl, pageHost, relyingPartyId) {
+  if (pageHost === void 0) return true;
+  let rpId = relyingPartyId ?? void 0;
+  if (!rpId) {
+    if (!authBaseUrl) return true;
+    try {
+      rpId = new URL(authBaseUrl).hostname;
+    } catch {
+      return true;
+    }
   }
+  if (rpId !== "localhost" && !rpId.includes(".")) return false;
   return pageHost === rpId || pageHost.endsWith(`.${rpId}`);
 }
 function resolveSignInMethods(config, pageHost) {
@@ -564,7 +568,11 @@ function resolveSignInMethods(config, pageHost) {
   const magicLink = capabilities.magicLinkSignIn;
   const emailOtp = capabilities.emailOtpSignIn && !capabilities.totp && !capabilities.mfaRequired;
   const phoneOtp = capabilities.phoneSignIn;
-  const passkey = capabilities.passkeySignIn && passkeyReachableFrom(config?.authBaseUrl, pageHost);
+  const passkey = capabilities.passkeySignIn && passkeyReachableFrom(
+    config?.authBaseUrl,
+    pageHost,
+    config?.authentication?.passkey?.relyingPartyId
+  );
   const sso = has("sso");
   const renderable = password || username || magicLink || emailOtp || phoneOtp || passkey || sso || social.length > 0;
   const emptyReason = renderable ? null : methods.length > 0 ? "unsupported" : "none";

package/dist/styles.css

@@ -200,7 +200,13 @@
 .ba-profile-heading, .ba-profile-modal-header { padding: 24px 28px; border-bottom: 1px solid var(--ba-divider); }
 .ba-profile-heading h1, .ba-profile-modal-header h1 { margin: 0; font-size: 22px; line-height: 1.25; }
 .ba-profile-heading p, .ba-profile-modal-header p { margin: 6px 0 0; color: var(--ba-muted); }
-.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 460px; }
+/* No min-height. A grid row already sizes to its tallest column, which here is
+   the nav, so the panel is exactly as tall as it needs to be. The 460px floor it
+   replaces was there to stop the modal resizing between tabs, but the shortest
+   tab - Profile, an avatar field and a button - is the one most people open
+   first, and it left roughly 200px of empty white below the content, reading as
+   a broken panel rather than a stable one. */
+.ba-profile-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
 .ba-profile-nav { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-inline-end: 1px solid var(--ba-divider); background: color-mix(in srgb, var(--ba-hover) 55%, var(--ba-surface)); }
 .ba-profile-nav-item { width: 100%; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: var(--ba-muted); cursor: pointer; font: inherit; font-weight: 500; text-align: start; }
 .ba-profile-nav-item:hover { color: var(--ba-fg); background: var(--ba-hover); }
@@ -312,7 +318,8 @@
 .ba-organization-profile-heading { display: flex; align-items: center; gap: 13px; padding: 22px 26px; border-bottom: 1px solid var(--ba-divider); }
 .ba-organization-profile-heading h2, .ba-organization-profile-heading p { margin: 0; }
 .ba-organization-profile-heading p { margin-top: 4px; }
-.ba-organization-profile-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 480px; }
+/* Same reasoning as .ba-profile-layout: the nav column sets the height. */
+.ba-organization-profile-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
 .ba-organization-profile-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; border-inline-end: 1px solid var(--ba-divider); background: color-mix(in srgb, var(--ba-hover) 55%, var(--ba-surface)); }
 .ba-organization-profile-content { min-width: 0; padding: 26px; }
 .ba-organization-section { max-width: 610px; }
@@ -331,7 +338,7 @@
   .ba-profile-overlay { align-items: end; padding: 0; }
   .ba-profile-modal { width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; border-bottom: 0; }
   .ba-profile-heading, .ba-profile-modal-header { padding: 20px; }
-  .ba-profile-layout { display: block; min-height: 0; }
+  .ba-profile-layout { display: block; }
   .ba-profile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px; border-inline-end: 0; border-bottom: 1px solid var(--ba-divider); }
   .ba-profile-nav-item { width: 100%; min-width: 0; }
   .ba-profile-content { padding: 22px 20px 28px; }
@@ -344,7 +351,7 @@
   .ba-organization-directory { border-radius: 0; }
   .ba-organization-directory-header { flex-direction: column; }
   .ba-organization-card-grid { grid-template-columns: 1fr; }
-  .ba-organization-profile-layout { display: block; min-height: 0; }
+  .ba-organization-profile-layout { display: block; }
   .ba-organization-profile-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 14px; border-inline-end: 0; border-bottom: 1px solid var(--ba-divider); }
   .ba-organization-profile-content { padding: 20px; }
   .ba-organization-member { align-items: flex-start; flex-wrap: wrap; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authowl/react",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "React provider, hooks, and drop-in components for AuthOwl, the multi-tenant auth SaaS.",
   "license": "MIT",
   "publishConfig": {
@@ -47,7 +47,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@authowl/core": "0.15.0"
+    "@authowl/core": "0.15.2"
   },
   "peerDependencies": {
     "react": ">=18",