@luminaryworks/auth-react 0.3.1 → 0.4.1

package/dist/index.js

@@ -39,6 +39,193 @@ function readIdpConfigFromEnv(env) {
     experienceApiBase: resolveExperienceApiBase(env)
   };
 }
+
+// src/login-experience-adapter.ts
+var LOGIN_EXPERIENCE_CAPABILITIES = {
+  passwordSignIn: "password-sign-in",
+  socialConnectors: "social-connectors",
+  socialDirectSignIn: "social-direct-sign-in"
+};
+function createLoginExperienceAdapter(provider = "logto") {
+  switch (provider) {
+    case "logto":
+      return new LogtoExperienceAdapter();
+  }
+}
+var defaultAdapter;
+function resolveLoginExperienceAdapter(adapter) {
+  if (adapter) return adapter;
+  defaultAdapter ??= createLoginExperienceAdapter();
+  return defaultAdapter;
+}
+
+// src/logto-experience-adapter.ts
+function experienceUrl(apiBase, path) {
+  return `${apiBase.replace(/\/$/, "")}/api/experience${path}`;
+}
+async function experienceFetch(apiBase, path, init) {
+  const res = await fetch(experienceUrl(apiBase, path), {
+    credentials: "include",
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      ...init.headers ?? {}
+    }
+  });
+  const text = await res.text();
+  let data = null;
+  if (text) {
+    try {
+      data = JSON.parse(text);
+    } catch {
+      data = text;
+    }
+  }
+  if (!res.ok) {
+    const msg = data && typeof data === "object" && data !== null && "message" in data ? String(data.message) : `Experience API ${res.status}`;
+    throw new Error(msg);
+  }
+  return data;
+}
+function guessIdentifierType(identifier) {
+  if (identifier.includes("@")) return "email";
+  if (/^\+?\d{6,}$/.test(identifier.trim())) return "phone";
+  return "username";
+}
+function sameOriginAuthorizeUrl(authorizeUrl, apiBase) {
+  const u = new URL(authorizeUrl);
+  const base = new URL(apiBase);
+  if (u.origin === base.origin) return authorizeUrl;
+  return `${base.origin}${u.pathname}${u.search}${u.hash}`;
+}
+async function bootstrapOidcInteraction(input) {
+  if (!input.issuer || !input.clientId || !input.redirectUri) return;
+  if (typeof document === "undefined") return;
+  const config = {
+    issuer: input.issuer,
+    clientId: input.clientId,
+    redirectUri: input.redirectUri,
+    audience: input.audience,
+    scopes: input.scopes,
+    experienceApiBase: input.apiBase
+  };
+  const signinUrl = await prepareSignInRequestUrl(config, {
+    returnUrl: input.returnUrl
+  });
+  const authorizeUrl = sameOriginAuthorizeUrl(signinUrl, input.apiBase);
+  await new Promise((resolve) => {
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.tabIndex = -1;
+    iframe.style.cssText = "position:absolute;width:0;height:0;border:0;visibility:hidden";
+    let settled = false;
+    const finish = () => {
+      if (settled) return;
+      settled = true;
+      iframe.remove();
+      resolve();
+    };
+    iframe.addEventListener("load", () => {
+      window.setTimeout(finish, 400);
+    });
+    iframe.src = authorizeUrl;
+    document.body.appendChild(iframe);
+    window.setTimeout(finish, 2500);
+  });
+}
+function createLogtoDirectSignInRequest(directSignIn) {
+  return { extraQueryParams: { direct_sign_in: directSignIn } };
+}
+var LogtoExperienceAdapter = class {
+  provider = "logto";
+  capabilities = [
+    LOGIN_EXPERIENCE_CAPABILITIES.passwordSignIn,
+    LOGIN_EXPERIENCE_CAPABILITIES.socialConnectors,
+    LOGIN_EXPERIENCE_CAPABILITIES.socialDirectSignIn
+  ];
+  async experiencePasswordSignIn(input) {
+    const { apiBase, identifier, password } = input;
+    await bootstrapOidcInteraction(input);
+    const primary = input.identifierType ?? guessIdentifierType(identifier);
+    const alternates = primary === "phone" ? [primary] : primary === "email" ? ["email", "username"] : ["username", "email"];
+    let lastError;
+    for (const identifierType of alternates) {
+      try {
+        await experienceFetch(apiBase, "", {
+          method: "PUT",
+          body: JSON.stringify({ interactionEvent: "SignIn" })
+        });
+        const verified = await experienceFetch(
+          apiBase,
+          "/verification/password",
+          {
+            method: "POST",
+            body: JSON.stringify({
+              identifier: { type: identifierType, value: identifier },
+              password
+            })
+          }
+        );
+        const verificationId = verified?.verificationId;
+        if (!verificationId) {
+          throw new Error("Experience API did not return verificationId");
+        }
+        await experienceFetch(apiBase, "/identification", {
+          method: "POST",
+          body: JSON.stringify({ verificationId })
+        });
+        const submitted = await experienceFetch(
+          apiBase,
+          "/submit",
+          {
+            method: "POST",
+            body: JSON.stringify({})
+          }
+        );
+        return { redirectTo: submitted?.redirectTo, raw: submitted };
+      } catch (error) {
+        lastError = error instanceof Error ? error : new Error(String(error));
+      }
+    }
+    throw lastError ?? new Error("Experience password sign-in failed");
+  }
+  async fetchSocialConnectors(input) {
+    const url = new URL(`${input.apiBase.replace(/\/$/, "")}/api/.well-known/sign-in-exp`);
+    if (input.appId?.trim()) url.searchParams.set("appId", input.appId.trim());
+    const res = await fetch(url.toString(), {
+      // Public metadata — omit cookies so browsers do not require credentialed CORS.
+      credentials: "omit",
+      headers: { Accept: "application/json" }
+    });
+    if (!res.ok) {
+      throw new Error(`sign-in-exp ${res.status}`);
+    }
+    const data = await res.json();
+    return (data.socialConnectors ?? []).filter(
+      (connector) => Boolean(connector?.id && connector?.target)
+    ).map((connector) => ({
+      id: connector.id,
+      target: connector.target,
+      name: localizeName(connector.name) || titleCase(connector.target),
+      logo: connector.logo
+    }));
+  }
+  createSocialSignInRequest(target) {
+    return createLogtoDirectSignInRequest(`social:${target}`);
+  }
+};
+function localizeName(name) {
+  if (!name) return "";
+  if (typeof name === "string") return name;
+  return name["zh-CN"] || name.en || Object.values(name)[0] || "";
+}
+function titleCase(target) {
+  if (!target) return "";
+  return target.charAt(0).toUpperCase() + target.slice(1);
+}
+
+// src/oidc-client.ts
 var manager = null;
 function storageKey(config) {
   return config.tokenStorageKey ?? "luminary_access_token";
@@ -95,9 +282,14 @@ function resetUserManager() {
 function signInArgs(config, options) {
   const normalized = typeof options === "string" ? { returnUrl: options } : options ?? {};
   const resource = config.audience?.trim();
-  const extraQueryParams = {};
+  const extraQueryParams = { ...normalized.extraQueryParams };
   if (resource) extraQueryParams.resource = resource;
-  if (normalized.directSignIn) extraQueryParams.direct_sign_in = normalized.directSignIn;
+  if (normalized.directSignIn) {
+    Object.assign(
+      extraQueryParams,
+      createLogtoDirectSignInRequest(normalized.directSignIn).extraQueryParams
+    );
+  }
   return {
     state: normalized.returnUrl ? { returnUrl: normalized.returnUrl } : void 0,
     extraQueryParams: Object.keys(extraQueryParams).length ? extraQueryParams : void 0
@@ -189,151 +381,19 @@ async function getCurrentUser(config) {
 }
 
 // src/experience-client.ts
-function experienceUrl(apiBase, path) {
-  return `${apiBase.replace(/\/$/, "")}/api/experience${path}`;
-}
-async function experienceFetch(apiBase, path, init) {
-  const res = await fetch(experienceUrl(apiBase, path), {
-    credentials: "include",
-    ...init,
-    headers: {
-      "Content-Type": "application/json",
-      Accept: "application/json",
-      ...init.headers ?? {}
-    }
-  });
-  const text = await res.text();
-  let data = null;
-  if (text) {
-    try {
-      data = JSON.parse(text);
-    } catch {
-      data = text;
-    }
-  }
-  if (!res.ok) {
-    const msg = data && typeof data === "object" && data !== null && "message" in data ? String(data.message) : `Experience API ${res.status}`;
-    throw new Error(msg);
+function experiencePasswordSignIn(input) {
+  const adapter = resolveLoginExperienceAdapter();
+  if (!adapter.capabilities.includes(LOGIN_EXPERIENCE_CAPABILITIES.passwordSignIn) || !adapter.experiencePasswordSignIn) {
+    return Promise.reject(new Error("Login experience does not support password sign-in"));
   }
-  return data;
-}
-function guessIdentifierType(identifier) {
-  if (identifier.includes("@")) return "email";
-  if (/^\+?\d{6,}$/.test(identifier.trim())) return "phone";
-  return "username";
+  return adapter.experiencePasswordSignIn(input);
 }
-function sameOriginAuthorizeUrl(authorizeUrl, apiBase) {
-  const u = new URL(authorizeUrl);
-  const base = new URL(apiBase);
-  if (u.origin === base.origin) return authorizeUrl;
-  return `${base.origin}${u.pathname}${u.search}${u.hash}`;
-}
-async function bootstrapOidcInteraction(input) {
-  if (!input.issuer || !input.clientId || !input.redirectUri) return;
-  if (typeof document === "undefined") return;
-  const config = {
-    issuer: input.issuer,
-    clientId: input.clientId,
-    redirectUri: input.redirectUri,
-    audience: input.audience,
-    scopes: input.scopes,
-    experienceApiBase: input.apiBase
-  };
-  const signinUrl = await prepareSignInRequestUrl(config, {
-    returnUrl: input.returnUrl
-  });
-  const authorizeUrl = sameOriginAuthorizeUrl(signinUrl, input.apiBase);
-  await new Promise((resolve) => {
-    const iframe = document.createElement("iframe");
-    iframe.setAttribute("aria-hidden", "true");
-    iframe.tabIndex = -1;
-    iframe.style.cssText = "position:absolute;width:0;height:0;border:0;visibility:hidden";
-    let settled = false;
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      iframe.remove();
-      resolve();
-    };
-    iframe.addEventListener("load", () => {
-      window.setTimeout(finish, 400);
-    });
-    iframe.src = authorizeUrl;
-    document.body.appendChild(iframe);
-    window.setTimeout(finish, 2500);
-  });
-}
-async function experiencePasswordSignIn(input) {
-  const { apiBase, identifier, password } = input;
-  await bootstrapOidcInteraction(input);
-  const primary = input.identifierType ?? guessIdentifierType(identifier);
-  const alternates = primary === "phone" ? [primary] : primary === "email" ? ["email", "username"] : ["username", "email"];
-  let lastError;
-  for (const identifierType of alternates) {
-    try {
-      await experienceFetch(apiBase, "", {
-        method: "PUT",
-        body: JSON.stringify({ interactionEvent: "SignIn" })
-      });
-      const verified = await experienceFetch(
-        apiBase,
-        "/verification/password",
-        {
-          method: "POST",
-          body: JSON.stringify({
-            identifier: { type: identifierType, value: identifier },
-            password
-          })
-        }
-      );
-      const verificationId = verified?.verificationId;
-      if (!verificationId) {
-        throw new Error("Experience API did not return verificationId");
-      }
-      await experienceFetch(apiBase, "/identification", {
-        method: "POST",
-        body: JSON.stringify({ verificationId })
-      });
-      const submitted = await experienceFetch(apiBase, "/submit", {
-        method: "POST",
-        body: JSON.stringify({})
-      });
-      return { redirectTo: submitted?.redirectTo, raw: submitted };
-    } catch (e) {
-      lastError = e instanceof Error ? e : new Error(String(e));
-    }
-  }
-  throw lastError ?? new Error("Experience password sign-in failed");
-}
-async function fetchSocialConnectors(input) {
-  const url = new URL(`${input.apiBase.replace(/\/$/, "")}/api/.well-known/sign-in-exp`);
-  if (input.appId?.trim()) url.searchParams.set("appId", input.appId.trim());
-  const res = await fetch(url.toString(), {
-    // Public metadata — omit cookies so browsers do not require credentialed CORS.
-    credentials: "omit",
-    headers: { Accept: "application/json" }
-  });
-  if (!res.ok) {
-    throw new Error(`sign-in-exp ${res.status}`);
+function fetchSocialConnectors(input) {
+  const adapter = resolveLoginExperienceAdapter();
+  if (!adapter.capabilities.includes(LOGIN_EXPERIENCE_CAPABILITIES.socialConnectors) || !adapter.fetchSocialConnectors) {
+    return Promise.reject(new Error("Login experience does not support social connectors"));
   }
-  const data = await res.json();
-  return (data.socialConnectors ?? []).filter(
-    (c) => Boolean(c?.id && c?.target)
-  ).map((c) => ({
-    id: c.id,
-    target: c.target,
-    name: localizeName(c.name) || titleCase(c.target),
-    logo: c.logo
-  }));
-}
-function localizeName(name) {
-  if (!name) return "";
-  if (typeof name === "string") return name;
-  return name["zh-CN"] || name.en || Object.values(name)[0] || "";
-}
-function titleCase(target) {
-  if (!target) return "";
-  return target.charAt(0).toUpperCase() + target.slice(1);
+  return adapter.fetchSocialConnectors(input);
 }
 
 // src/auth-gate.ts
@@ -575,10 +635,6 @@ var defaults = {
   showPassword: "Show password",
   hidePassword: "Hide password"
 };
-var FALLBACK_SOCIAL = [
-  { id: "google", target: "google", name: "Google" },
-  { id: "github", target: "github", name: "GitHub" }
-];
 function resolveSieBase(config) {
   const explicit = config.experienceApiBase?.trim();
   if (explicit) return explicit.replace(/\/$/, "");
@@ -600,6 +656,7 @@ function cx(...parts) {
 }
 function HeadlessLoginPanel({
   config,
+  experienceAdapter: experienceAdapterProp,
   productName,
   logoSrc,
   labels: labelsProp,
@@ -616,6 +673,7 @@ function HeadlessLoginPanel({
   style,
   themeColor = DEFAULT_LOGIN_THEME_COLOR
 }) {
+  const experienceAdapter = resolveLoginExperienceAdapter(experienceAdapterProp);
   const labels = { ...defaults, ...labelsProp };
   const configured = isIdpConfigured(config);
   const [identifier, setIdentifier] = react.useState("");
@@ -628,7 +686,8 @@ function HeadlessLoginPanel({
   const [loading, setLoading] = react.useState(null);
   const [error, setError] = react.useState("");
   const [connectors, setConnectors] = react.useState([]);
-  const socialEnabled = showSocialConnectors !== false && !(Array.isArray(socialProviders) && socialProviders.length === 0);
+  const socialEnabled = showSocialConnectors !== false && !(Array.isArray(socialProviders) && socialProviders.length === 0) && experienceAdapter.capabilities.includes(LOGIN_EXPERIENCE_CAPABILITIES.socialConnectors) && experienceAdapter.capabilities.includes(LOGIN_EXPERIENCE_CAPABILITIES.socialDirectSignIn) && typeof experienceAdapter.fetchSocialConnectors === "function" && typeof experienceAdapter.createSocialSignInRequest === "function";
+  const passwordEnabled = experienceAdapter.capabilities.includes(LOGIN_EXPERIENCE_CAPABILITIES.passwordSignIn) && typeof experienceAdapter.experiencePasswordSignIn === "function";
   react.useEffect(() => {
     const resetBusy = () => setLoading(null);
     window.addEventListener("pageshow", resetBusy);
@@ -639,7 +698,8 @@ function HeadlessLoginPanel({
     };
   }, []);
   react.useEffect(() => {
-    if (!socialEnabled) {
+    const fetchConnectors = experienceAdapter.fetchSocialConnectors;
+    if (!socialEnabled || !fetchConnectors) {
       setConnectors([]);
       return;
     }
@@ -651,42 +711,57 @@ function HeadlessLoginPanel({
       if (!cancelled) setConnectors(filtered);
     };
     if (!sieBase) {
-      apply(
-        allowlist ? FALLBACK_SOCIAL.filter((c) => allowlist.has(c.target)) : FALLBACK_SOCIAL
-      );
+      if (!cancelled) setConnectors([]);
       return;
     }
-    void fetchSocialConnectors({ apiBase: sieBase, appId: config.clientId }).then((list) => {
-      if (list.length) {
-        apply(list);
-        return;
-      }
-      apply(
-        allowlist ? FALLBACK_SOCIAL.filter((c) => allowlist.has(c.target)) : FALLBACK_SOCIAL
-      );
+    void fetchConnectors.call(experienceAdapter, { apiBase: sieBase, appId: config.clientId }).then((list) => {
+      apply(list);
     }).catch(() => {
-      apply(
-        allowlist ? FALLBACK_SOCIAL.filter((c) => allowlist.has(c.target)) : FALLBACK_SOCIAL
-      );
+      if (!cancelled) setConnectors([]);
     });
     return () => {
       cancelled = true;
     };
-  }, [config.clientId, config.experienceApiBase, config.issuer, socialEnabled, socialProviders]);
-  const runOidc = async (directSignIn) => {
+  }, [
+    config.clientId,
+    config.experienceApiBase,
+    config.issuer,
+    experienceAdapter,
+    socialEnabled,
+    socialProviders
+  ]);
+  const runOidc = async (experienceRequest) => {
     if (!configured) throw new Error("IdP not configured");
     if (mode === "redirect") {
-      await signInRedirect(config, { returnUrl, directSignIn });
+      await signInRedirect(config, { returnUrl, ...experienceRequest });
       return;
     }
-    const { session, returnUrl: next } = await signInPopup(config, { returnUrl, directSignIn });
+    const { session, returnUrl: next } = await signInPopup(config, {
+      returnUrl,
+      ...experienceRequest
+    });
     await onOidcSession?.(session, next);
   };
   const runSocial = async (target) => {
     setError("");
     setLoading(target);
     try {
-      await runOidc(`social:${target}`);
+      if (!socialEnabled || !experienceAdapter.capabilities.includes(
+        LOGIN_EXPERIENCE_CAPABILITIES.socialDirectSignIn
+      ) || !experienceAdapter.createSocialSignInRequest) {
+        throw new Error("Login experience does not support direct social sign-in");
+      }
+      await runOidc(experienceAdapter.createSocialSignInRequest(target));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      setLoading(null);
+    }
+  };
+  const runHostedOidc = async () => {
+    setError("");
+    setLoading("sso");
+    try {
+      await runOidc();
     } catch (e) {
       setError(e instanceof Error ? e.message : String(e));
       setLoading(null);
@@ -709,7 +784,12 @@ function HeadlessLoginPanel({
       if (!apiBase) {
         throw new Error(labels.experienceUnavailable);
       }
-      const result = await experiencePasswordSignIn({
+      if (!passwordEnabled || !experienceAdapter.capabilities.includes(
+        LOGIN_EXPERIENCE_CAPABILITIES.passwordSignIn
+      ) || !experienceAdapter.experiencePasswordSignIn) {
+        throw new Error(labels.experienceUnavailable);
+      }
+      const result = await experienceAdapter.experiencePasswordSignIn({
         apiBase,
         identifier: identifier.trim(),
         password,
@@ -743,7 +823,7 @@ function HeadlessLoginPanel({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: HeadlessLoginPanel_module_default.subtitle, children: labels.subtitle }),
     configured ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => void runPassword(e), className: HeadlessLoginPanel_module_default.form, children: [
+      passwordEnabled ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => void runPassword(e), className: HeadlessLoginPanel_module_default.form, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -785,7 +865,16 @@ function HeadlessLoginPanel({
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: HeadlessLoginPanel_module_default.primaryBtn, disabled: busy || !identifier || !password, children: loading === "password" ? "\u2026" : labels.submitPassword })
-      ] }),
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: HeadlessLoginPanel_module_default.form, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: HeadlessLoginPanel_module_default.primaryBtn,
+          disabled: busy,
+          onClick: () => void runHostedOidc(),
+          children: loading === "sso" ? "\u2026" : labels.submitSso
+        }
+      ) }),
       showHint ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: HeadlessLoginPanel_module_default.hint, children: labels.hint }) : null,
       showSocial ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: HeadlessLoginPanel_module_default.divider, "aria-hidden": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: HeadlessLoginPanel_module_default.dividerLine }),
@@ -1012,10 +1101,14 @@ function createPostLoginPathHelpers(options) {
 exports.AuthGateProvider = AuthGateProvider;
 exports.DEFAULT_LOGIN_THEME_COLOR = DEFAULT_LOGIN_THEME_COLOR;
 exports.HeadlessLoginPanel = HeadlessLoginPanel;
+exports.LOGIN_EXPERIENCE_CAPABILITIES = LOGIN_EXPERIENCE_CAPABILITIES;
+exports.LogtoExperienceAdapter = LogtoExperienceAdapter;
 exports.LuminaryAuthProvider = LuminaryAuthProvider;
 exports.ReauthOverlay = ReauthOverlay;
 exports.authGate = authGate;
 exports.clearStoredSession = clearStoredSession;
+exports.createLoginExperienceAdapter = createLoginExperienceAdapter;
+exports.createLogtoDirectSignInRequest = createLogtoDirectSignInRequest;
 exports.createPostLoginPathHelpers = createPostLoginPathHelpers;
 exports.createUserManager = createUserManager;
 exports.experiencePasswordSignIn = experiencePasswordSignIn;
@@ -1031,6 +1124,7 @@ exports.readIdpConfigFromEnv = readIdpConfigFromEnv;
 exports.resetUserManager = resetUserManager;
 exports.resolveExperienceApiBase = resolveExperienceApiBase;
 exports.resolveIssuer = resolveIssuer;
+exports.resolveLoginExperienceAdapter = resolveLoginExperienceAdapter;
 exports.sameOriginAuthorizeUrl = sameOriginAuthorizeUrl;
 exports.signInPopup = signInPopup;
 exports.signInRedirect = signInRedirect;