feat: add display for masked text, copy unmasked text

Author: darrickyong

main/snippets/AuthCodeBlock.jsx

@@ -5,14 +5,22 @@ export const AuthCodeBlock = ({
   highlight,
   children,
 }) => {
-  const [processedChildren, setProcessedChildren] = useState(children);
+  const [displayText, setDisplayText] = useState(children);
+  const [copyText, setCopyText] = useState(children);
+  const wrapperRef = React.useRef(null);
 
   useEffect(() => {
     let unsubscribe = null;
 
     function init() {
+      if (!window.autorun || !window.rootStore) {
+        return;
+      }
+
       unsubscribe = window.autorun(() => {
-        let processedChildren = children;
+        let processedChildrenForDisplay = children;
+        let processedChildrenForCopy = children;
+
         for (const [
           key,
           value,
@@ -21,12 +29,27 @@ export const AuthCodeBlock = ({
             /[.*+?^${}()|[\]\\]/g,
             String.raw`\$&`
           );
-          processedChildren = processedChildren.replaceAll(
+
+          // For display: mask client secret if it's not the placeholder
+          let displayValue = value;
+          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
+            displayValue = value.substring(0, 3) + "*****MASKED*****";
+          }
+
+          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(
+            new RegExp(escapedKey, "g"),
+            displayValue
+          );
+
+          // For copy: use the actual value (unmasked)
+          processedChildrenForCopy = processedChildrenForCopy.replaceAll(
             new RegExp(escapedKey, "g"),
             value
           );
         }
-        setProcessedChildren(processedChildren);
+
+        setDisplayText(processedChildrenForDisplay);
+        setCopyText(processedChildrenForCopy);
       });
     }
 
@@ -42,15 +65,65 @@ export const AuthCodeBlock = ({
     };
   }, [children]);
 
+  // Override clipboard write to copy unmasked text
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
+    let isOverriding = false;
+
+    const handleClick = (e) => {
+      const button = e.target.closest('[data-testid="copy-code-button"]');
+      if (!button || !wrapperRef.current.contains(button)) return;
+
+      // Set flag to override next clipboard write
+      isOverriding = true;
+
+      // Override writeText temporarily
+      navigator.clipboard.writeText = (text) => {
+        
+        if (isOverriding) {
+          isOverriding = false;
+          // Restore original immediately
+          navigator.clipboard.writeText = originalWriteText;
+          // Write our copyText instead
+          return originalWriteText(copyText);
+        }
+        return originalWriteText(text);
+      };
+
+      // Reset after a short delay in case the write doesn't happen
+      setTimeout(() => {
+        if (isOverriding) {
+          isOverriding = false;
+          navigator.clipboard.writeText = originalWriteText;
+        }
+      }, 100);
+    };
+
+    const wrapper = wrapperRef.current;
+    wrapper.addEventListener('click', handleClick, true);
+
+    return () => {
+      wrapper.removeEventListener('click', handleClick, true);
+      // Restore original if still overridden
+      if (navigator.clipboard.writeText !== originalWriteText) {
+        navigator.clipboard.writeText = originalWriteText;
+      }
+    };
+  }, [copyText]);
+
   return (
-    <CodeBlock
-      filename={filename}
-      icon={icon}
-      language={language}
-      lines
-      highlight={highlight}
-    >
-      {processedChildren}
-    </CodeBlock>
+    <div ref={wrapperRef}>
+      <CodeBlock
+        filename={filename}
+        icon={icon}
+        language={language}
+        lines
+        highlight={highlight}
+      >
+        {displayText}
+      </CodeBlock>
+    </div>
   );
 };

main/snippets/recipe.jsx

@@ -684,8 +684,9 @@ export const CreateInteractiveApp = ({
     const init = () => setStoreReady(true);
 
     if (window.rootStore) {
-      // If this create component is re-mounted, clear any selected client
+      // If this create component is re-mounted, clear any selected client information
       window.rootStore.clientStore.setSelectedClient(null);
+      window.rootStore.clientStore.setSelectedClientSecret(undefined);
       init();
     } else {
       window.addEventListener('adu:storeReady', init);

ui/src/stores/client-store.ts

@@ -59,6 +59,7 @@ export class ClientStore {
   reset() {
     this.clients = [];
     this.selectedClientId = null;
+    this.selectedClientSecret = undefined;
   }
 
   setSelectedClient(clientId: string | null) {