google.accounts.id.initialize callback not firing

I'm trying to setup the ability for the Authenticated User to manage the OAuth accounts they have linked. Here's the code I'm using in my Angular Component:

linkGoogle(): void {
debugger; // this pauses 1st
const googleAuthButton = document.createElement('div');
googleAuthButton.setAttribute('id', 'google-button');

// Inject Google button dynamically
document.body.appendChild(googleAuthButton);

const client = google.accounts.id;
client.initialize({
client_id: environment.googleClientId,
callback: (response: any) => {
const idToken = response.credential;
console.log('Google Sign-In callback triggered:', response);
debugger; // this never pauses
// Use the new CustomerService method
this.customerService.linkGoogleAccount(idToken).subscribe({
next: () => {
this.snackBar.open('Google account linked successfully!', 'Close', {
duration: 3000,
});
document.body.removeChild(googleAuthButton); // Cleanup
this.authService.initializeAuth().subscribe(); // Refresh current user
},
error: (err) => {
console.error('Error linking Google account:', err);
this.snackBar.open('Failed to link Google account.', 'Close', {
duration: 3000,
});
},
});
},
auto_select: false,
cancel_on_tap_outside: true,
});
console.log('Client initialized:', client);
client.prompt();
}


When I invoke this function I can see the debugger; statements pause but not the one that I have set inside the defined callback function.

I expect the callback method to be invoked so I can see the token and manage the linked account.

Continue reading...