fix(mobile): prevent master password screen freeze during user transitions

- Add synchronous userId change detection using useRef to catch sign-in immediately
- Introduce userChanging state flag to block app rendering during user transitions
- Prevent notes screen from mounting and attempting decryption before master password entry
- Reset master password state on userId change to ensure clean state

Author: batalabs

apps/mobile/v1/src/components/AppWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { useAuth, useUser } from '@clerk/clerk-expo';
 import { useTheme } from '../theme';
@@ -24,8 +24,27 @@ export const AppWrapper: React.FC<AppWrapperProps> = ({ children }) => {
   } = useMasterPassword();
 
   const [showLoading, setShowLoading] = useState(false);
+  const lastUserIdRef = useRef<string | undefined>(undefined);
+  const [userChanging, setUserChanging] = useState(false);
 
-  const isLoading = !isLoaded || (isSignedIn && !userLoaded) || (isSignedIn && userLoaded && !user) || (isSignedIn && user && isChecking);
+  // Detect userId change SYNCHRONOUSLY in render
+  if (userId !== lastUserIdRef.current) {
+    lastUserIdRef.current = userId;
+    if (userId && !userChanging) {
+      // User just signed in - block app from rendering
+      setUserChanging(true);
+    }
+  }
+
+  // Clear userChanging flag once master password state is determined
+  useEffect(() => {
+    if (userChanging && !isChecking) {
+      setUserChanging(false);
+    }
+  }, [userChanging, isChecking]);
+
+  // Simple logic: show loading only for initial Clerk loading, nothing else
+  const isLoading = !isLoaded || (isSignedIn && !userLoaded) || (isSignedIn && userLoaded && !user);
 
   // Handle loading delay
   useEffect(() => {
@@ -62,19 +81,6 @@ export const AppWrapper: React.FC<AppWrapperProps> = ({ children }) => {
     }
   }, [isSignedIn, user?.id, user?.primaryEmailAddress?.emailAddress, user?.username]);
 
-  if (__DEV__) {
-    console.log('AppWrapper Auth status:', {
-      isSignedIn,
-      isLoaded,
-      userLoaded,
-      userId: user?.id,
-      hasSession: !!user,
-      needsUnlock,
-      isNewSetup,
-      isChecking,
-    });
-  }
-
   // Show loading while Clerk initializes, user loads, or checking master password
   if (showLoading) {
     return (
@@ -104,8 +110,10 @@ export const AppWrapper: React.FC<AppWrapperProps> = ({ children }) => {
     return <AuthScreen />;
   }
 
-  // User is signed in - show master password screen or main app
-  if (needsUnlock) {
+  // User is signed in - check master password state
+  // IMPORTANT: If we're checking OR need unlock OR user just changed, show master password screen
+  // This prevents notes from loading prematurely
+  if (needsUnlock || isChecking || userChanging) {
     return (
       <MasterPasswordScreen
         key={userId} // Force remount when userId changes to reset all state
@@ -116,6 +124,6 @@ export const AppWrapper: React.FC<AppWrapperProps> = ({ children }) => {
     );
   }
 
-  // Show main app
+  // Only render main app when explicitly unlocked and stable
   return <>{children}</>;
 };

apps/mobile/v1/src/components/MasterPasswordDialog/index.tsx

@@ -26,16 +26,12 @@ export function MasterPasswordScreen({
   const [isLoading, setIsLoading] = useState(false);
   const animatedValue = useKeyboardHandler();
 
-  useEffect(() => {
-    // Vibrate when component mounts
-    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
-  }, []);
-
-  // Reset loading state when component mounts or isNewSetup changes
+  // Reset loading state and vibrate when component mounts
   // This ensures the form is shown after sign out/sign in
   useEffect(() => {
     setIsLoading(false);
-  }, [isNewSetup]);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+  }, []);
 
   const handleFormSubmit = async (password: string) => {
     setIsLoading(true);
@@ -70,6 +66,7 @@ export function MasterPasswordScreen({
         >
           {!isLoading ? (
             <MasterPasswordForm
+              key={`password-form-${isNewSetup}`} // Force remount when setup state changes
               isNewSetup={isNewSetup}
               onSubmit={handleFormSubmit}
             />

apps/mobile/v1/src/hooks/useMasterPassword.ts

@@ -18,21 +18,33 @@ export function forceGlobalMasterPasswordRefresh() {
 export function useMasterPassword() {
   const { user, isLoaded: userLoaded } = useUser();
   const { isSignedIn } = useAuth();
-  const [needsUnlock, setNeedsUnlock] = useState(false);
+  const [needsUnlock, setNeedsUnlock] = useState(true); // Default to true to prevent premature loading
   const [isNewSetup, setIsNewSetup] = useState(false);
   const [isChecking, setIsChecking] = useState(true);
   const [, setLastCheckTime] = useState<number>(0);
 
   const userId = user?.id;
 
+  // Reset state when user changes (sign out/sign in)
+  useEffect(() => {
+    if (userId) {
+      // New user signed in - reset to locked state
+      setNeedsUnlock(true);
+      setIsChecking(true);
+      setIsNewSetup(false);
+    }
+  }, [userId]);
+
   const checkMasterPasswordStatus = useCallback(async () => {
     if (!userLoaded || !userId || !isSignedIn) {
       setIsChecking(true);
+      setNeedsUnlock(true); // Assume locked when no user
       return;
     }
 
     try {
       setIsChecking(true);
+      setNeedsUnlock(true); // Assume locked while checking
 
       // Check if user has a master password set up
       const hasPassword = await hasMasterPassword(userId);
@@ -53,9 +65,6 @@ export function useMasterPassword() {
           // Already unlocked
           setIsNewSetup(false);
           setNeedsUnlock(false);
-          if (__DEV__) {
-            console.log('✅ Master password already unlocked');
-          }
         }
       }