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.
