@orangecheck/auth-client 2.0.0 → 2.1.0

package/dist/index.mjs

@@ -1,5 +1,6 @@
-import * as React2 from 'react';
+import * as React4 from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
 
 // src/provider.tsx
 
@@ -20,7 +21,7 @@ function buildSignInUrl(cfg, returnTo) {
   u.searchParams.set("return_to", returnTo);
   return u.toString();
 }
-var SessionContext = React2.createContext(null);
+var SessionContext = React4.createContext(null);
 function normalizeAccount(raw) {
   if (!raw) return null;
   const didOc = raw.did_oc ?? raw.didOc;
@@ -42,11 +43,11 @@ function OcSessionProvider({
   config,
   defaultReturnTo
 }) {
-  const cfg = React2.useMemo(() => resolveConfig(config), [config]);
-  const [account, setAccount] = React2.useState(null);
-  const [status, setStatus] = React2.useState("loading");
-  const [error, setError] = React2.useState(null);
-  const refresh = React2.useCallback(async () => {
+  const cfg = React4.useMemo(() => resolveConfig(config), [config]);
+  const [account, setAccount] = React4.useState(null);
+  const [status, setStatus] = React4.useState("loading");
+  const [error, setError] = React4.useState(null);
+  const refresh = React4.useCallback(async () => {
     if (typeof window === "undefined") return;
     try {
       const res = await fetch(cfg.mePath, {
@@ -75,10 +76,10 @@ function OcSessionProvider({
       setError(err instanceof Error ? err : new Error(String(err)));
     }
   }, [cfg.mePath]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const signOut = React2.useCallback(async () => {
+  const signOut = React4.useCallback(async () => {
     try {
       await fetch(`${cfg.authOrigin}${cfg.logoutPath}`, {
         method: "POST",
@@ -89,7 +90,7 @@ function OcSessionProvider({
     setAccount(null);
     setStatus("anonymous");
   }, [cfg.authOrigin, cfg.logoutPath]);
-  const value = React2.useMemo(() => {
+  const value = React4.useMemo(() => {
     const returnTo = defaultReturnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
     return {
       status,
@@ -103,7 +104,7 @@ function OcSessionProvider({
   return /* @__PURE__ */ jsx(SessionContext.Provider, { value, children });
 }
 function useOcSession() {
-  const ctx = React2.useContext(SessionContext);
+  const ctx = React4.useContext(SessionContext);
   if (!ctx) {
     throw new Error(
       "[@orangecheck/auth-client] useOcSession() must be called inside <OcSessionProvider>"
@@ -112,7 +113,7 @@ function useOcSession() {
   return ctx;
 }
 function useOptionalOcSession() {
-  return React2.useContext(SessionContext);
+  return React4.useContext(SessionContext);
 }
 function shortenAddress(addr) {
   if (addr.length <= 12) return addr;
@@ -127,7 +128,7 @@ function isPrefixOf(value, target) {
 }
 var listboxIdCounter = 0;
 function useUniqueId(prefix) {
-  const [id] = React2.useState(() => `${prefix}-${++listboxIdCounter}`);
+  const [id] = React4.useState(() => `${prefix}-${++listboxIdCounter}`);
   return id;
 }
 function OcAccountChip({
@@ -141,9 +142,9 @@ function OcAccountChip({
 }) {
   const { status, account, signInUrl: sessionSignInUrl, signOut } = useOcSession();
   const signInUrl = signInUrlOverride ?? sessionSignInUrl;
-  const [open, setOpen] = React2.useState(false);
-  const wrapRef = React2.useRef(null);
-  React2.useEffect(() => {
+  const [open, setOpen] = React4.useState(false);
+  const wrapRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!open) return;
     function handleClickOutside(e) {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) {
@@ -466,9 +467,9 @@ function useOcAddressSuggestion(options) {
   } = options;
   const { status, account } = useOcSession();
   const sessionAddress = status === "authenticated" ? account?.primaryBtc ?? null : null;
-  const [open, setOpen] = React2.useState(false);
-  const [highlighted, setHighlighted] = React2.useState(false);
-  const blurTimer = React2.useRef(null);
+  const [open, setOpen] = React4.useState(false);
+  const [highlighted, setHighlighted] = React4.useState(false);
+  const blurTimer = React4.useRef(null);
   const listboxId = useUniqueId("oc-addr-listbox");
   const optionId = `${listboxId}-opt`;
   const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -480,7 +481,7 @@ function useOcAddressSuggestion(options) {
     setOpen(false);
     setHighlighted(false);
   }
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
     };
@@ -583,7 +584,7 @@ function useOcAddressSuggestion(options) {
   ) : null;
   return { inputProps, popover };
 }
-var OcAddressInput = React2.forwardRef(
+var OcAddressInput = React4.forwardRef(
   function OcAddressInput2({
     value,
     onValueChange,
@@ -598,15 +599,15 @@ var OcAddressInput = React2.forwardRef(
   }, forwardedRef) {
     const { status, account } = useOcSession();
     const sessionAddress = status === "authenticated" ? account?.primaryBtc ?? null : null;
-    const [open, setOpen] = React2.useState(false);
-    const [highlighted, setHighlighted] = React2.useState(false);
-    const innerRef = React2.useRef(null);
+    const [open, setOpen] = React4.useState(false);
+    const [highlighted, setHighlighted] = React4.useState(false);
+    const innerRef = React4.useRef(null);
     const setRef = (node) => {
       innerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
       else if (forwardedRef) forwardedRef.current = node;
     };
-    const blurTimer = React2.useRef(null);
+    const blurTimer = React4.useRef(null);
     const listboxId = useUniqueId("oc-addr-listbox");
     const optionId = `${listboxId}-opt`;
     const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -653,7 +654,7 @@ var OcAddressInput = React2.forwardRef(
       }
       onKeyDown?.(e);
     }
-    React2.useEffect(() => {
+    React4.useEffect(() => {
       return () => {
         if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
       };
@@ -768,8 +769,8 @@ function OcSignIn({
   const walletEnabled = paths?.wallet ?? true;
   const emailEnabled = paths?.email ?? true;
   const safeReturn = safeReturnTo(returnTo);
-  const [path, setPath] = React2.useState(initialPath);
-  const handleSuccess = React2.useCallback(
+  const [path, setPath] = React4.useState(initialPath);
+  const handleSuccess = React4.useCallback(
     (account) => {
       if (onSuccess) {
         onSuccess(account);
@@ -877,10 +878,10 @@ function SigninTab({
   );
 }
 function WalletFlow({ authOrigin, audience, onSuccess }) {
-  const [address, setAddress] = React2.useState("");
-  const [error, setError] = React2.useState(null);
-  const [submitting, setSubmitting] = React2.useState(false);
-  const [stage, setStage] = React2.useState("enter");
+  const [address, setAddress] = React4.useState("");
+  const [error, setError] = React4.useState(null);
+  const [submitting, setSubmitting] = React4.useState(false);
+  const [stage, setStage] = React4.useState("enter");
   async function signIn(e) {
     e.preventDefault();
     const addr = address.trim();
@@ -979,13 +980,13 @@ function WalletFlow({ authOrigin, audience, onSuccess }) {
   ] });
 }
 function EmailFlow({ authOrigin, onSuccess }) {
-  const [stage, setStage] = React2.useState("enter");
-  const [email, setEmail] = React2.useState("");
-  const [emailError, setEmailError] = React2.useState(null);
-  const [code, setCode] = React2.useState("");
-  const [codeError, setCodeError] = React2.useState(null);
-  const [token, setToken] = React2.useState(null);
-  const [submitting, setSubmitting] = React2.useState(false);
+  const [stage, setStage] = React4.useState("enter");
+  const [email, setEmail] = React4.useState("");
+  const [emailError, setEmailError] = React4.useState(null);
+  const [code, setCode] = React4.useState("");
+  const [codeError, setCodeError] = React4.useState(null);
+  const [token, setToken] = React4.useState(null);
+  const [submitting, setSubmitting] = React4.useState(false);
   async function start(e) {
     e.preventDefault();
     const trimmed = email.trim().toLowerCase();
@@ -1249,7 +1250,215 @@ function Hint({ children }) {
     }
   );
 }
+function resolveAuthOrigin(opts) {
+  if (!opts) return resolveConfig(void 0).authOrigin;
+  return resolveConfig(opts).authOrigin;
+}
+function isAbortError(err) {
+  if (!(err instanceof Error)) return false;
+  return /NotAllowed|aborted|cancel|user cancelled/i.test(err.message);
+}
+function useWebAuthnRegister(opts) {
+  const authOrigin = resolveAuthOrigin(opts);
+  const [status, setStatus] = React4.useState("idle");
+  const [error, setError] = React4.useState(null);
+  const reset = React4.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+  }, []);
+  const register = React4.useCallback(
+    async (args) => {
+      setError(null);
+      setStatus("requesting-options");
+      try {
+        const optsRes = await fetch(`${authOrigin}/api/auth/webauthn/register/options`, {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ label: args?.label })
+        });
+        const optsBody = await optsRes.json();
+        if (!optsRes.ok || !optsBody.ok || !optsBody.options || !optsBody.challenge_token) {
+          throw new Error(optsBody.reason ?? `options_failed_${optsRes.status}`);
+        }
+        setStatus("authenticating");
+        const attestation = await startRegistration({
+          optionsJSON: optsBody.options
+        });
+        setStatus("verifying");
+        const verifyRes = await fetch(`${authOrigin}/api/auth/webauthn/register/verify`, {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            challenge_token: optsBody.challenge_token,
+            response: attestation,
+            label: args?.label
+          })
+        });
+        const verifyBody = await verifyRes.json();
+        if (!verifyRes.ok || !verifyBody.ok || !verifyBody.credential) {
+          throw new Error(verifyBody.reason ?? `verify_failed_${verifyRes.status}`);
+        }
+        setStatus("success");
+        return verifyBody.credential;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        setStatus("error");
+        if (isAbortError(err)) {
+          setError(new Error("cancelled"));
+        }
+        return null;
+      }
+    },
+    [authOrigin]
+  );
+  return { status, error, register, reset };
+}
+function useWebAuthnList(opts) {
+  const authOrigin = resolveAuthOrigin(opts);
+  const { status: sessionStatus } = useOcSession();
+  const [credentials, setCredentials] = React4.useState([]);
+  const [status, setStatus] = React4.useState("loading");
+  const [error, setError] = React4.useState(null);
+  const refetch = React4.useCallback(async () => {
+    setError(null);
+    if (sessionStatus !== "authenticated") {
+      setCredentials([]);
+      setStatus("ready");
+      return;
+    }
+    setStatus("loading");
+    try {
+      const r = await fetch(`${authOrigin}/api/auth/webauthn/credentials`, {
+        credentials: "include"
+      });
+      if (r.status === 401) {
+        setCredentials([]);
+        setStatus("ready");
+        return;
+      }
+      const j = await r.json();
+      if (!j.ok || !j.credentials) {
+        throw new Error(j.reason ?? "list_failed");
+      }
+      setCredentials(j.credentials);
+      setStatus("ready");
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setStatus("error");
+    }
+  }, [authOrigin, sessionStatus]);
+  React4.useEffect(() => {
+    void refetch();
+  }, [refetch]);
+  const rename = React4.useCallback(
+    async (id, label) => {
+      try {
+        const r = await fetch(`${authOrigin}/api/auth/webauthn/credentials/${id}`, {
+          method: "PATCH",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ label })
+        });
+        const j = await r.json();
+        if (!j.ok || !j.credential) {
+          setError(new Error(j.reason ?? "rename_failed"));
+          return null;
+        }
+        await refetch();
+        return j.credential;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        return null;
+      }
+    },
+    [authOrigin, refetch]
+  );
+  const remove = React4.useCallback(
+    async (id) => {
+      try {
+        const r = await fetch(`${authOrigin}/api/auth/webauthn/credentials/${id}`, {
+          method: "DELETE",
+          credentials: "include"
+        });
+        const j = await r.json();
+        if (!j.ok) {
+          setError(new Error(j.reason ?? "delete_failed"));
+          return false;
+        }
+        await refetch();
+        return true;
+      } catch (e) {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        return false;
+      }
+    },
+    [authOrigin, refetch]
+  );
+  return { status, credentials, error, refetch, rename, remove };
+}
+function useStepUpAuth(opts) {
+  const authOrigin = resolveAuthOrigin(opts);
+  const { refresh } = useOcSession();
+  const [status, setStatus] = React4.useState("idle");
+  const [error, setError] = React4.useState(null);
+  const reset = React4.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+  }, []);
+  const stepUp = React4.useCallback(
+    async (args) => {
+      setError(null);
+      setStatus("requesting-options");
+      try {
+        const optsRes = await fetch(`${authOrigin}/api/auth/webauthn/assertion/options`, {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ purpose: args.purpose })
+        });
+        const optsBody = await optsRes.json();
+        if (!optsRes.ok || !optsBody.ok || !optsBody.options || !optsBody.challenge_token) {
+          throw new Error(optsBody.reason ?? `options_failed_${optsRes.status}`);
+        }
+        setStatus("authenticating");
+        const assertion = await startAuthentication({
+          optionsJSON: optsBody.options
+        });
+        setStatus("verifying");
+        const verifyRes = await fetch(
+          `${authOrigin}/api/auth/webauthn/assertion/verify`,
+          {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              challenge_token: optsBody.challenge_token,
+              response: assertion
+            })
+          }
+        );
+        const verifyBody = await verifyRes.json();
+        if (!verifyRes.ok || !verifyBody.ok || typeof verifyBody.step_up_at !== "number") {
+          throw new Error(verifyBody.reason ?? `verify_failed_${verifyRes.status}`);
+        }
+        await refresh();
+        setStatus("success");
+        return { step_up_at: verifyBody.step_up_at };
+      } catch (e) {
+        const err = isAbortError(e) ? new Error("cancelled") : e instanceof Error ? e : new Error(String(e));
+        setError(err);
+        setStatus("error");
+        return null;
+      }
+    },
+    [authOrigin, refresh]
+  );
+  return { status, error, stepUp, reset };
+}
 
-export { DEFAULT_CONFIG, OcAccountChip, OcAccountPill, OcAddressInput, OcSessionProvider, OcSignIn, OcSignInButton, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession };
+export { DEFAULT_CONFIG, OcAccountChip, OcAccountPill, OcAddressInput, OcSessionProvider, OcSignIn, OcSignInButton, buildSignInUrl, useOcAddressSuggestion, useOcSession, useOptionalOcSession, useStepUpAuth, useWebAuthnList, useWebAuthnRegister };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map