I wanted to implement google oauth in my angular application

So, i have built an application where we can assign tasks and set deadline etc. Everything was perfectly working (including my login and register page). I wanted to implement Third party authentication in this app. I implemented everything correctly and i know there is a minor mistake in there somehow. As soon as i click sign in with google, it perfectly goes to the google sign in page and lets me select my account. But after that, it shows "all fields are required" in my server. Help me fix it please. I am attaching the code for your reference.

[This is my login endpoint][1]. [This is my login.html][2]

'''

import { Component, OnInit } from '@angular/core';
import { GlobalTextBoxComponent } from '../global-text-box/global-text-box.component';
import { GlobalButtonComponent } from '../global-button/global-button.component';
import { FloatLabelType } from '@angular/material/form-field';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';

@Component({
selector: 'app-login-page',
imports: [GlobalTextBoxComponent, GlobalButtonComponent, RouterModule],
templateUrl: './login-page.component.html',
styleUrl: './login-page.component.scss',
})
export class LoginPageComponent {
textBoxes = [
{
label: 'Email',
placeholder: 'Enter your email',
value: '',
type: 'email',
disabled: false,
floatLabel: 'auto' as FloatLabelType,
},
{
label: 'Password',
placeholder: 'Enter your password',
value: '',
type: 'password',
disabled: false,
floatLabel: 'auto' as FloatLabelType,
},
];

constructor(
private http: HttpClient,
private router: Router,
) {}



updateTextBox(event: { label: string; value: string }) {
const textBox = this.textBoxes.find((tb) => tb.label === event.label);
if (textBox) textBox.value = event.value;
}



loginUser() {
const userData = {
email: this.textBoxes.find((tb) => tb.label === 'Email')?.value || '',
password:
this.textBoxes.find((tb) => tb.label === 'Password')?.value || '',
};

if (!userData.email || !userData.password) {
console.error('All fields are required!');
return;
} else {
this.router.navigateByUrl('/a-sign');
}

this.http.post('http://localhost:3000/login', userData).subscribe(
(response: any) => {
localStorage.setItem('authToken', response.token);
localStorage.setItem('profile_picture', response.user.profile_picture);
console.log('hey hey heyyyyyyy::::', localStorage.getItem('authToken'));
console.log('Login successful!', response);
},
(error) => console.error('Login failed', error)
);
}
}


''' This is my login.component.ts file. If there is anything else needed, kindly let me know. [1]: https://i.sstatic.net/3KmmpRYl.png [2]: https://i.sstatic.net/DznOQs4E.png

Continue reading...