Church-Music/legacy-site/documentation/md-files/MOBILE_LOGIN_FIX.md

Mobile Login Issue - Troubleshooting Guide

Issue

Users can login on desktop but not on mobile devices.

Common Causes & Solutions

1. Private/Incognito Browsing Mode ⚠️ MOST COMMON

Problem: Mobile browsers in private/incognito mode often block sessionStorage and localStorage

Solution:

• Exit private/incognito mode
• Use normal browsing mode
• The app will now display a warning if storage is blocked

2. Browser Storage Settings Disabled

Problem: Some mobile browsers have storage/cookies disabled in settings

Solution for iOS Safari:

1. Open Settings > Safari
2. Enable "Block All Cookies" should be OFF
3. Enable "Prevent Cross-Site Tracking" can be ON
4. Refresh the app

Solution for Android Chrome:

1. Open Chrome > Settings > Site Settings
2. Cookies > Allow
3. Refresh the app

3. CryptoJS Library Loading Issue

Problem: The encryption library might not load properly on slow mobile connections

Solution:

• Wait for the page to fully load (watch for network indicator)
• Refresh the page (pull down on mobile)
• Clear browser cache
• Check your internet connection

4. Form Submission Issues on Mobile

Problem: Mobile keyboards might interfere with form submission

Solution:

• Make sure to press the "Login" button, not the keyboard's "Go/Enter" button
• Try closing the keyboard first, then tap Login
• Updated code now better handles mobile form submissions

Quick Diagnostic Tool

Access the Debug Page

1. Navigate to: http://your-server:3000/mobile-login-debug.html
2. Or add /mobile-login-debug.html to your app URL
3. Run all tests to identify the exact problem

What the Tests Check

• ✅ Browser capabilities
• ✅ Storage availability (localStorage & sessionStorage)
• ✅ CryptoJS library loading
• ✅ Password hashing
• ✅ Login simulation

Default Credentials

• Username: hop
• Password: hop@2026ilovejesus

Recent Code Improvements

Enhanced Error Messages

The login page now shows specific error messages:

• "Encryption library not loaded. Please refresh the page."
• "Storage error: Please ensure cookies/storage is enabled and not in private browsing mode."
• "Invalid username or password"

Early Detection

The app now checks for issues when the login page loads:

• Verifies CryptoJS is loaded
• Tests localStorage accessibility
• Tests sessionStorage accessibility
• Displays warnings before you try to login

Console Logging

Open browser console (Chrome DevTools on desktop, or use remote debugging) to see:

• Login attempt details
• Hash comparison results
• Storage operation status
• Specific error messages

Testing on Mobile

Using Desktop Browser (Chrome DevTools)

1. Open Chrome DevTools (F12)
2. Click "Toggle Device Toolbar" (Ctrl+Shift+M)
3. Select a mobile device
4. Test login functionality
5. Check Console tab for errors

Using Real Mobile Device

1. Navigate to the app on your phone
2. Try to login
3. Note any error messages
4. Try the debug page: /mobile-login-debug.html
5. Share test results for further diagnosis

How to Enable Console on Mobile

iOS Safari

1. Settings > Safari > Advanced > Web Inspector (ON)
2. Connect iPhone to Mac
3. Safari (Mac) > Develop > [Your iPhone] > [Page]

Android Chrome

1. Enable Developer Options on phone
2. Enable USB Debugging
3. Connect to computer
4. Chrome desktop: chrome://inspect
5. Select your device

Force Refresh on Mobile

iOS Safari

• Hold the refresh button
• Select "Request Desktop Site"
• Or: Close Safari completely and reopen

Android Chrome

• Settings (three dots) > Settings
• Advanced > Site Settings
• Storage > Clear browsing data
• Select "Cached images" and clear

Technical Details

Authentication Flow

1. User enters credentials
2. Password is hashed using SHA-256 (CryptoJS)
3. Hash is compared with stored hash
4. On success:
   • sessionStorage.setItem("authenticated", "true")
   • sessionStorage.setItem("authTime", timestamp)
   • sessionStorage.setItem("sessionId", uniqueId)
5. Session valid for 24 hours

Why Mobile Might Fail

1. sessionStorage blocked - Private mode, strict browser settings
2. CryptoJS not loaded - Slow network, CDN blocked, script blocker
3. Form submission blocked - Mobile keyboard interaction
4. Cache issues - Old JavaScript files cached

Contact Support

If issues persist after trying these solutions:

1. Run the debug page tests
2. Take screenshots of any errors
3. Note your device/browser (iPhone Safari, Android Chrome, etc.)
4. Share console errors if possible
5. Try a different browser as a test

Files Modified

/frontend/src/App.js

• Added system warning detection on mount
• Enhanced error messages with specific causes
• Added console logging for debugging
• Better sessionStorage error handling
• Verification that storage operations succeed

/frontend/public/mobile-login-debug.html

• New diagnostic tool
• Tests all system capabilities
• Simulates login process
• Shows exact failure points

Next Steps

1. Try the debug page first: Access /mobile-login-debug.html on mobile
2. Check for warnings: Look at the orange warning banner on login page
3. Disable private mode: Most common fix
4. Try different browser: Test if it's browser-specific
5. Clear cache: Force fresh download of all files

---

Last Updated: December 16, 2025 Version: 1.0