214 lines
5.4 KiB
Markdown
214 lines
5.4 KiB
Markdown
# 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
|