refactor: enhance authentication flow and UI components, update analytics

Author: atyrode

src/frontend/src/App.tsx

@@ -8,7 +8,6 @@ import { useSaveCanvas } from "./api/hooks";
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 import type { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
 import type { ExcalidrawImperativeAPI, AppState } from "@excalidraw/excalidraw/types";
-import AuthModal from "./auth/AuthModal";
 import { useAuthCheck } from "./api/hooks";
 
 export interface AppProps {
@@ -26,10 +25,7 @@ export default function App({
 }: AppProps) {
   const { useHandleLibrary, MainMenu } = excalidrawLib;
 
-  // Get authentication state from React Query
   const { data: isAuthenticated, isLoading: isAuthLoading } = useAuthCheck();
-
-  // Get user profile for analytics identification
   const { data: userProfile } = useUserProfile();
 
   // Only enable canvas queries if authenticated and not loading
@@ -44,12 +40,10 @@ export default function App({
   useCustom(excalidrawAPI, customArgs);
   useHandleLibrary({ excalidrawAPI });
 
-  // On login and canvas data load, update the scene
-  // Helper to ensure collaborators is a Map
   function normalizeCanvasData(data: any) {
     if (!data) return data;
     const appState = { ...data.appState };
-    // Remove width and height so they get recomputed when loading from DB
+    appState.width = undefined;
     if ("width" in appState) {
       delete appState.width;
     }
@@ -68,40 +62,30 @@ export default function App({
     }
   }, [excalidrawAPI, canvasData]);
 
-  // Use React Query mutation for saving canvas
   const { mutate: saveCanvas } = useSaveCanvas({
     onSuccess: () => {
-      console.debug("Canvas saved to database successfully");
-      // Track canvas save event with PostHog
-      capture('canvas_saved');
+      console.debug("[pad.ws] Canvas saved to database successfully");
     },
     onError: (error) => {
-      console.error("Failed to save canvas to database:", error);
-      // Track canvas save failure
-      capture('canvas_save_failed', {
-        error: error instanceof Error ? error.message : 'Unknown error'
-      });
+      console.error("[pad.ws] Failed to save canvas to database:", error);
     }
   });
 
   useEffect(() => {
     if (excalidrawAPI) {
       (window as any).excalidrawAPI = excalidrawAPI;
-      // Track application loaded event
       capture('app_loaded');
     }
     return () => {
       (window as any).excalidrawAPI = null;
     };
   }, [excalidrawAPI]);
 
-  // Ref to store the last sent canvas data for change detection
   const lastSentCanvasDataRef = useRef<string>("");
 
   const debouncedLogChange = useCallback(
     debounce(
       (elements: NonDeletedExcalidrawElement[], state: AppState, files: any) => {
-        // Only save if authenticated
         if (!isAuthenticated) return;
 
         const canvasData = {
@@ -110,11 +94,9 @@ export default function App({
           files
         };
 
-        // Compare with last sent data (deep equality via JSON.stringify)
         const serialized = JSON.stringify(canvasData);
         if (serialized !== lastSentCanvasDataRef.current) {
           lastSentCanvasDataRef.current = serialized;
-          // Use React Query mutation to save canvas
           saveCanvas(canvasData);
         }
       },
@@ -123,12 +105,18 @@ export default function App({
     [saveCanvas, isAuthenticated]
   );
 
-  // Identify user in PostHog when username is available
   useEffect(() => {
-    if (userProfile?.username) {
-      posthog.identify(userProfile.username);
+    if (userProfile?.id) {
+      posthog.identify(userProfile.id);
+      if (posthog.people && typeof posthog.people.set === "function") {
+        const {
+          id, // do not include in properties
+          ...personProps
+        } = userProfile;
+        posthog.people.set(personProps);
+      }
     }
-  }, [userProfile?.username]);
+  }, [userProfile]);
 
   return (
     <>
@@ -141,7 +129,6 @@ export default function App({
         {children}
       </ExcalidrawWrapper>
 
-      {/* AuthModal is now handled by AuthGate */}
     </>
   );
 }

src/frontend/src/AuthGate.tsx

@@ -1,40 +1,60 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useAuthCheck } from "./api/hooks";
 import AuthModal from "./auth/AuthModal";
 
 /**
- * AuthGate ensures the authentication check is the very first XHR request.
- * It blocks rendering of children until the auth check completes.
- * If unauthenticated, it shows the AuthModal.
+ * If unauthenticated, it shows the AuthModal as an overlay, but still renders the app behind it.
+ * 
+ * If authenticated, it silently primes the Coder OIDC session by loading
+ * the OIDC callback endpoint in a hidden iframe. This is a workaround:
+ * without this, users would see the Coder login screen when opening an embedded terminal.
+ * 
+ * The iframe is removed as soon as it loads, or after a fallback timeout.
  */
 export default function AuthGate({ children }: { children: React.ReactNode }) {
   const { data: isAuthenticated, isLoading } = useAuthCheck();
   const [coderAuthDone, setCoderAuthDone] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const timeoutRef = useRef<number | null>(null);
 
   useEffect(() => {
-    // When authenticated, also authenticate with Coder using an iframe
+    // Only run the Coder OIDC priming once per session, after auth is confirmed
     if (isAuthenticated === true && !coderAuthDone) {
-      // Create a hidden iframe to handle Coder authentication
-      const iframe = document.createElement('iframe');
-      iframe.style.display = 'none';
-      iframe.src = 'https://coder.pad.ws/api/v2/users/oidc/callback';
+      const iframe = document.createElement("iframe");
+      iframe.style.display = "none";
+      iframe.src = "https://coder.pad.ws/api/v2/users/oidc/callback";
 
-      // Add the iframe to the document
+      // Remove iframe as soon as it loads, or after 2s fallback
+      const cleanup = () => {
+        if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
+        setCoderAuthDone(true);
+      };
+
+      iframe.onload = cleanup;
       document.body.appendChild(iframe);
+      iframeRef.current = iframe;
 
-      // Clean up after a short delay
-      setTimeout(() => {
-        document.body.removeChild(iframe);
-        setCoderAuthDone(true);
-      }, 2000); // 2 seconds should be enough for the auth to complete
+      // Fallback: remove iframe after 5s if onload doesn't fire
+      timeoutRef.current = window.setTimeout(cleanup, 5000);
+
+      // Cleanup on unmount or re-run
+      return () => {
+        if (iframeRef.current && iframeRef.current.parentNode) {
+          iframeRef.current.parentNode.removeChild(iframeRef.current);
+        }
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated, coderAuthDone]);
 
-  // Always render children (App), but overlay AuthModal if unauthenticated
+  // Always render children; overlay AuthModal if not authenticated
   return (
     <>
       {children}
-      {isAuthenticated === false && !isLoading && <AuthModal />}
+      {isAuthenticated === false && <AuthModal />}
     </>
   );
 }

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -38,7 +38,7 @@ export const renderCustomEmbeddable = (
       default:
         return null;
     }
+  } else {
+    return <iframe className="custom-rendered-embeddable" src={element.link} />;
   }
-
-  return null;
 };

src/frontend/src/ExcalidrawWrapper.tsx

@@ -1,17 +1,17 @@
 import React, { Children, cloneElement } from 'react';
-import DiscordButton from './components/DiscordButton';
-import FeedbackButton from './components/FeedbackButton';
+import DiscordButton from './ui/DiscordButton';
+import FeedbackButton from './ui/FeedbackButton';
 import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types';
 import type { NonDeletedExcalidrawElement } from '@excalidraw/excalidraw/element/types';
 import type { AppState } from '@excalidraw/excalidraw/types';
-import { MainMenuConfig } from './MainMenu';
+import { MainMenuConfig } from './ui/MainMenu';
 import { renderCustomEmbeddable } from './CustomEmbeddableRenderer';
 
 const defaultInitialData = {
   elements: [],
   appState: {
     gridModeEnabled: true,
-    gridSize: 20,
+    gridSize: 40,
     gridStep: 5,
   },
   files: {},

src/frontend/src/auth/AuthModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
+import { capture } from "../utils/posthog";
 import "../styles/AuthModal.scss";
 
 interface AuthModalProps {
@@ -9,14 +10,14 @@ interface AuthModalProps {
 }
 
 const AuthModal: React.FC<AuthModalProps> = ({
-  title = "pad.ws",
-  description = "Welcome\n\nPad is a browser-based developer environment where you can take notes and code side to side.\n\nYour workspace is an Ubuntu virtual machine that we run for you in the cloud",
+  description = "This is a browser-based developer environment where you can take notes and code side to side.\n\nYour workspace is an Ubuntu virtual machine that we run for you in the cloud",
   infoText = "🚧 This is a beta. Consider all data is temporary and might be deleted at any time while we build",
 }) => {
   const [isMounted, setIsMounted] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
+    capture("auth_modal_shown");
     // Prevent scrolling when modal is open
     document.body.style.overflow = "hidden";
 

src/frontend/src/pad/buttons/ActionButton.tsx

@@ -315,7 +315,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
 
   const executeAction = () => {
     // Track button click event with PostHog
-    capture('button_clicked', {
+    capture('custom_button_clicked', {
       target: selectedTarget,
       action: selectedAction,
       codeVariant: selectedTarget === 'code' ? selectedCodeVariant : null
@@ -328,7 +328,6 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         return;
       }
 
-      const elements = excalidrawAPI.getSceneElements();
       const baseUrl = getUrl();
 
       if (!baseUrl) {
@@ -347,7 +346,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         scrollToView: true
       });
 
-      console.debug(`Embedded ${selectedTarget} at URL: ${baseUrl}`);
+      console.debug(`[pad.ws] Embedded ${selectedTarget} at URL: ${baseUrl}`);
 
       // Track successful embed action
       capture('embed_created', {
@@ -361,7 +360,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
         return;
       }
 
-      console.debug(`Opening ${selectedTarget} in new tab from ${baseUrl}`);
+      console.debug(`[pad.ws] Opening ${selectedTarget} in new tab from ${baseUrl}`);
       window.open(baseUrl, '_blank');
 
       // Track tab open action
@@ -388,7 +387,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
       } else if (selectedTarget === 'code') {
         const prefix = selectedCodeVariant === 'cursor' ? 'cursor' : 'vscode';
         magnetLink = `${prefix}://coder.coder-remote/open?owner=${owner}&workspace=${workspace}&url=${url}&token=&openRecent=true&agent=${agent}`;
-        console.debug(`Opening ${selectedCodeVariant} desktop app with magnet link: ${magnetLink}`);
+        console.debug(`[pad.ws] Opening ${selectedCodeVariant} desktop app with magnet link: ${magnetLink}`);
         window.open(magnetLink, '_blank');
 
         // Track desktop app open action
@@ -415,15 +414,6 @@ const ActionButton: React.FC<ActionButtonProps> = ({
 
 
   const handleTabClick = (tabType: string, value: string) => {
-    // Track tab selection change
-    capture('tab_selection_changed', {
-      tabType,
-      newValue: value,
-      previousTarget: selectedTarget,
-      previousCodeVariant: selectedTarget === 'code' ? selectedCodeVariant : null,
-      previousAction: selectedAction
-    });
-    
     if (tabType === 'target') {
       setSelectedTarget(value as TargetType);
     } else if (tabType === 'editor') {
@@ -440,7 +430,7 @@ const ActionButton: React.FC<ActionButtonProps> = ({
     setShowOptions(newShowOptions);
 
     // Track settings toggle event
-    capture('settings_toggled', {
+    capture('custom_button_edit_settings', {
       target: selectedTarget,
       action: selectedAction,
       codeVariant: selectedTarget === 'code' ? selectedCodeVariant : null,