Skip to content

Conversation

Copilot
Copy link

@Copilot Copilot AI commented Sep 25, 2025

Fixes the popup authentication issue where users were unable to successfully authenticate using the "Authorize using popup" option. The problem was caused by a malformed redirect URL and lack of proper communication between the popup window and parent application.

Problem

The popup authentication flow was failing because:

  • The redirect URL used URL-encoded hash (/%23/auth-success) which created routing issues
  • No proper callback page existed to handle successful popup authentication
  • Missing communication mechanism between popup and parent window
  • Users would see authentication success in the popup but the main application remained unauthenticated

Solution

Created a dedicated popup callback page (ui/auth-success.html):

  • Clean Bootstrap-styled success message
  • Automatic postMessage to parent window on successful authentication
  • Self-closing popup behavior

Fixed the popup redirect URL in ui/app/main.js:

// Before: Malformed URL with encoded hash
popup = window.open('auth/login?redirect=/%23/auth-success', 'login', 'height=450,width=600');

// After: Proper redirect to dedicated callback page
popup = window.open('auth/login?redirect=/auth-success.html', 'login', 'height=450,width=600');

Added postMessage communication:

  • Message listener in parent window to handle auth-success events
  • Automatic popup cleanup and app state refresh when authentication succeeds
  • Enhanced error handling for failed authentication attempts

Testing

  • ✅ Popup opens correctly and navigates to Blackbaud OAuth
  • ✅ Success page displays with proper styling after authentication
  • ✅ Parent window receives notification and updates state
  • ✅ Redirect authentication flow remains unaffected
  • ✅ No breaking changes to existing functionality

Screenshots

Main application with both authentication options:
App Login Page

New popup success callback page:
Auth Success Page

The fix ensures the popup authentication flow works correctly by establishing proper URL routing and window communication, resolving the authentication issue users were experiencing.

Original prompt

This section details on the original issue you should resolve

<issue_title>Not able to authenticate</issue_title>
<issue_description>I tried running the application with node js code sample. When I clicked on "Authorize using popup" and signed in using blackbaud account, I could not get proper response. I am attaching the screenshot for the reference:-
image (4)
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #10

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@Copilot Copilot AI changed the title [WIP] Not able to authenticate Fix popup authentication flow with proper redirect URL and postMessage communication Sep 25, 2025
Copilot finished work on behalf of Blackbaud-ValKuppuswamy September 25, 2025 19:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Not able to authenticate

2 participants