Merge branch 'main' into update-xo-response

cartridge-gg · Aug 6, 2024 · d5b1828 · d5b1828
2 parents 537cb8b + 0d6dd00
commit d5b1828
Show file tree

Hide file tree

Showing 4 changed files with 16,469 additions and 12,839 deletions.
diff --git a/packages/controller/src/modal.ts b/packages/controller/src/modal.ts
@@ -7,7 +7,8 @@ export const createModal = (src: string, onClose?: () => void) => {
   iframe.sandbox.add("allow-popups");
   iframe.sandbox.add("allow-scripts");
   iframe.sandbox.add("allow-same-origin");
-  iframe.allow = "publickey-credentials-get *; clipboard-write";
+  iframe.allow =
+    "publickey-credentials-create *; publickey-credentials-get *; clipboard-write";
   if (!!document.hasStorageAccess) {
     iframe.sandbox.add("allow-storage-access-by-user-activation");
   }

diff --git a/packages/keychain/src/components/connect/Login.tsx b/packages/keychain/src/components/connect/Login.tsx
@@ -54,6 +54,8 @@ function Form({
     const error = await validateUsernameFor("login")(usernameField.value);
     if (error) {
       setUsernameField((u) => ({ ...u, error }));
+      setIsValidating(false);
+      return;
     }
 
     setIsValidating(false);
@@ -145,6 +147,7 @@ function Form({
             setUsernameField((u) => ({
               ...u,
               value: e.target.value.toLowerCase(),
+              error: undefined,
             }));
           }}
           placeholder="Username"
@@ -162,7 +165,14 @@ function Form({
         {error && (
           <ErrorAlert title="Login failed" description={error.message} />
         )}
-        <Button onClick={onSubmit} colorScheme="colorful" isLoading={isLoading}>
+        <Button
+          onClick={onSubmit}
+          colorScheme="colorful"
+          isLoading={isLoading}
+          isDisabled={
+            isValidating || !usernameField.value || !!usernameField.error
+          }
+        >
           Log in
         </Button>
         <RegistrationLink

diff --git a/packages/keychain/src/components/connect/Signup.tsx b/packages/keychain/src/components/connect/Signup.tsx
@@ -6,7 +6,7 @@ import { useAccountQuery } from "generated/graphql";
 import Controller from "utils/controller";
 import { PopupCenter } from "utils/url";
 import { SignupProps } from "./types";
-import { isIframe, validateUsernameFor } from "./utils";
+import { validateUsernameFor } from "./utils";
 import { RegistrationLink } from "./RegistrationLink";
 import { doSignup } from "hooks/account";
 import { useControllerTheme } from "hooks/theme";
@@ -50,6 +50,8 @@ export function Signup({
         const error = await validateUsernameFor("signup")(username);
         if (error) {
           setUsernameField((u) => ({ ...u, error }));
+        } else {
+          setUsernameField((u) => ({ ...u, error: undefined }));
         }
 
         setIsValidating(false);
@@ -58,35 +60,42 @@ export function Signup({
     }
   }, [username]);
 
-  const onSubmit = useCallback(() => {
-    setError(undefined);
-    setIsRegistering(true);
-
+  const doPopup = useCallback(() => {
     const searchParams = new URLSearchParams(window.location.search);
     searchParams.set("name", encodeURIComponent(usernameField.value));
     searchParams.set("action", "signup");
 
-    // due to same origin restriction, if we're in iframe, pop up a
-    // window to continue webauthn registration. otherwise,
-    // display modal overlay. in either case, account is created in
-    // authenticate component, so we poll and then deploy
-    if (isIframe()) {
-      PopupCenter(
-        `/authenticate?${searchParams.toString()}`,
-        "Cartridge Signup",
-        480,
-        640,
-      );
+    PopupCenter(
+      `/authenticate?${searchParams.toString()}`,
+      "Cartridge Signup",
+      480,
+      640,
+    );
+  }, [usernameField]);
 
+  const onSubmit = useCallback(() => {
+    setError(undefined);
+    setIsRegistering(true);
+
+    // Safari does not allow cross origin iframe to create credentials
+    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+    if (isSafari) {
+      doPopup();
       return;
     }
 
-    doSignup(decodeURIComponent(usernameField.value))
-      .catch((e) => {
-        setUsernameField((u) => ({ ...u, error: e.message }));
-      })
-      .finally(() => setIsRegistering(false));
-  }, [usernameField]);
+    doSignup(decodeURIComponent(usernameField.value)).catch((e) => {
+      // Backward compat with iframes without this permission-policy
+      if (e.message.includes("publickey-credentials-create")) {
+        doPopup();
+        return;
+      }
+
+      setIsRegistering(false);
+      setUsernameField((u) => ({ ...u, error: e.message }));
+    });
+  }, [usernameField, doPopup]);
 
   // for polling approach when iframe
   useAccountQuery(
@@ -184,7 +193,9 @@ export function Signup({
           <Button
             colorScheme="colorful"
             isLoading={isRegistering}
-            isDisabled={debouncing || !username || isValidating}
+            isDisabled={
+              debouncing || !username || isValidating || !!usernameField.error
+            }
             onClick={onSubmit}
           >
             sign up