littleshop/PUSH-NOTIFICATION-FIX.md

Push Notification Fix for Dark.Side Domain

Issue

Push notifications failing because nginx doesn't have proper CORS headers for the admin.dark.side domain and the callback endpoints.

Solution

The VAPID configuration is already correct with mailto:admin@littleshop.local which allows domain-independent operation. The issue is the nginx CORS configuration.

Current Status

✅ VAPID Subject: Using mailto: format (domain-independent) ✅ Push Notification Code: 15-second timeout implemented ❌ Nginx CORS: Needs update for admin.dark.side domain

Required Fix

Option 1: Update nginx-proxy-manager Custom Config

If using nginx-proxy-manager UI:

1. Access nginx-proxy-manager at http://10.13.13.1:81
2. Edit the proxy host for admin.dark.side
3. Go to the "Advanced" tab
4. Add the custom nginx configuration from nginx-push-fix-dark-side.conf

Option 2: Direct nginx Configuration

If using direct nginx configuration files:

1. SSH to server: ssh -i vps_hardening_key -p 2255 sysadmin@10.13.13.1
2. Edit the nginx config: sudo nano /etc/nginx/sites-available/admin-littleshop
3. Replace the existing CORS headers with the configuration from nginx-push-fix-dark-side.conf
4. Test: sudo nginx -t
5. Reload: sudo systemctl reload nginx

Key Changes Needed

Current (Problematic)

add_header 'Access-Control-Allow-Origin' 'https://admin.dark.side' always;

Updated (Working)

# Dynamic CORS for dark.side domains
set $cors_origin "";
if ($http_origin ~* (https?://.*\.dark\.side|https?://admin\.dark\.side)) {
    set $cors_origin $http_origin;
}

if ($cors_origin = "") {
    set $cors_origin "https://admin.dark.side";
}

add_header 'Access-Control-Allow-Origin' $cors_origin always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;

# Handle preflight OPTIONS requests
if ($request_method = 'OPTIONS') {
    return 204;
}

Push Notification Endpoints

These endpoints need the CORS fix:

• /api/push/vapidpublickey - Gets VAPID public key
• /api/push/subscribe - Handles subscription
• /service-worker.js - Service worker file
• /manifest.json - PWA manifest
• /pwa.js - PWA initialization

Testing After Fix

1. Connect to VPN
2. Visit https://admin.dark.side
3. Click the notification bell icon
4. Allow notifications when prompted
5. Check browser console for CORS errors (should be none)

Expected Behavior

• Notification permission dialog appears
• No CORS errors in browser console
• Push subscription succeeds
• Notifications can be sent/received

Verification Commands

# Test VAPID endpoint
curl -H "Origin: https://admin.dark.side" https://admin.dark.side/api/push/vapidpublickey

# Test with OPTIONS (preflight)
curl -X OPTIONS -H "Origin: https://admin.dark.side" -H "Access-Control-Request-Method: POST" https://admin.dark.side/api/push/subscribe

Both should return proper CORS headers allowing the dark.side domain.