Skip to content

COOKIE-CONSENT-FIX.md

Latest commit

 

History

History
177 lines (145 loc) · 5.81 KB

COOKIE-CONSENT-FIX.md

File metadata and controls

177 lines (145 loc) · 5.81 KB

Cookie Consent Wall Redirect Loop Fix

Problem Description

Users were experiencing an infinite redirect loop after logging in:

  1. Login succeeds (HTTP 200)
  2. Redirect to /admin/dashboard
  3. GDPR Cookie Consent Wall appears
  4. User is redirected back to /login?returnUrl=...
  5. Loop continues indefinitely

Root Cause

The issue was caused by the interaction between:

  • CookieConsentWall component: Blocking page interaction immediately on load
  • Authorization attribute: [Authorize(Roles = "Admin")] on Dashboard page
  • Authentication state: Temporary disruption during wall initialization
  • RedirectToLogin component: Automatically triggered when auth check fails

The cookie consent wall's JavaScript blockInteraction() function was interfering with Blazor's authentication state management, causing the auth check to fail momentarily and trigger an unwanted redirect.

Solution Implemented

1. Exclude Wall from Auth Pages (MainLayout.razor)

@if (!IsAuthPage())
{
    <CookieConsentWall />
}
  • Added IsAuthPage() method to detect login/register pages
  • Cookie wall is NOT rendered on authentication pages

2. Delay Wall Display (CookieConsentWall.razor)

// Check authentication state before showing wall
var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var isAuthenticated = authState.User?.Identity?.IsAuthenticated ?? false;

// Delay showing the wall if user just authenticated
if (isAuthenticated)
{
    await Task.Delay(1000); // Give navigation time to complete
}
  • Added delays to prevent interference with navigation
  • Check auth state before blocking interaction

3. Navigation Event Handling (CookieConsentWall.razor)

Navigation.LocationChanged += OnLocationChanged;

private void OnLocationChanged(object? sender, LocationChangedEventArgs e)
{
    // Hide wall when navigating to auth pages
    var currentPath = Navigation.ToBaseRelativePath(e.Location).ToLower();
    if (currentPath.StartsWith("login") || currentPath.StartsWith("register"))
    {
        showWall = false;
    }
}
  • Subscribe to navigation events
  • Automatically hide wall on auth page navigation

4. JavaScript Safety Checks (cookie-consent-wall.js)

blockInteraction: function() {
    // Only block if not on an auth page
    const currentPath = window.location.pathname.toLowerCase();
    if (currentPath.includes('/login') ||
        currentPath.includes('/register')) {
        console.log('[COOKIE-WALL-JS] On auth page - not blocking');
        return;
    }
    document.body.style.overflow = 'hidden';
}
  • Added path checking in JavaScript
  • Prevents blocking on auth pages

Files Modified

  1. /src/InsightLearn.WebAssembly/Layout/MainLayout.razor

    • Added IsAuthPage() method
    • Conditional rendering of CookieConsentWall

  2. /src/InsightLearn.WebAssembly/Components/CookieConsentWall.razor

    • Added AuthenticationStateProvider injection
    • Implemented IDisposable for cleanup
    • Added navigation event handling
    • Added delays to prevent interference
    • Path checking before showing wall

  3. /src/InsightLearn.WebAssembly/wwwroot/js/cookie-consent-wall.js

    • Added path checking in blockInteraction()
    • Improved pointer-events handling

Expected Behavior After Fix

Correct Flow for New Users:

  1. User visits site → NO wall on login page
  2. User logs in → Redirected to dashboard
  3. After navigation completes → GDPR wall appears
  4. User accepts cookies → Wall hidden, localStorage saved
  5. Dashboard fully accessible

Correct Flow for Returning Users:

  1. User with saved consent logs in
  2. Redirected to dashboard
  3. NO wall appears (consent already saved)
  4. Dashboard immediately accessible

Alternative Flow:

  1. User visits public page → GDPR wall appears
  2. User accepts cookies → Wall hidden
  3. User navigates to login → NO wall
  4. User logs in → Dashboard accessible

Testing

Manual Testing Steps:

  1. Clear browser localStorage (remove 'cookie-consent' key)
  2. Navigate to /login
  3. Verify NO cookie wall appears
  4. Login with valid credentials
  5. Verify redirect to dashboard
  6. Verify cookie wall appears AFTER navigation
  7. Accept cookies
  8. Verify dashboard is accessible
  9. Logout and login again
  10. Verify NO wall appears (consent saved)

Automated Testing:

Run the test script:

./test-cookie-consent-fix.sh

Browser Console Verification:

Look for these console messages:

  • [COOKIE-WALL] On auth page - not showing wall
  • [COOKIE-WALL] User is authenticated - delaying wall display
  • [COOKIE-WALL-JS] On auth page - not blocking interaction

Key Principles

  1. Never show wall on auth pages - Login/register must be accessible
  2. Delay blocking interactions - Allow navigation to complete
  3. Check authentication state - Don't interfere with auth flow
  4. Path-aware blocking - JavaScript double-checks current page
  5. Clean up event handlers - Prevent memory leaks with IDisposable

Troubleshooting

If redirect loop persists:

  1. Check browser console for errors
  2. Clear all browser data (cache, cookies, localStorage)
  3. Verify all files were updated correctly
  4. Check network tab for redirect chain
  5. Ensure JWT tokens are valid

Future Improvements

Consider these enhancements:

  1. Server-side cookie consent tracking
  2. Gradual consent (ask for analytics/marketing later)
  3. Cookie consent management page
  4. A/B testing different consent UI designs
  5. Integration with consent management platforms

Related Files

  • /src/InsightLearn.WebAssembly/App.razor - Main routing configuration
  • /src/InsightLearn.WebAssembly/Components/RedirectToLogin.razor - Redirect component
  • /src/InsightLearn.WebAssembly/Pages/Admin/Dashboard.razor - Protected page
  • /src/InsightLearn.WebAssembly/wwwroot/css/cookie-consent-wall.css - Styling