I am currently working on setting up an authentication service in Angular that will integrate with Google Firebase for a Login form. However, I have encountered an issue where including the service in the constructor of my LoginComponent prevents me from accessing the /login route.
Interestingly, there are no errors being displayed in the console.
Could anyone offer insight into where the problem might lie?
AuthService:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from './user.model'
@Injectable({
providedIn: 'root'
})
export class TestService {
user$: Observable<User>;
constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore, private router: Router) {
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user) {
return this.afs.doc<User>(`users/${user.uid}`).valueChanges();
} else {
return of(null);
}
})
)
}
async googleSignin() {
const provider = new auth.GoogleAuthProvider();
const credential = await this.afAuth.signInWithPopup(provider);
return this.updateUserData(credential.user);
}
async signOut() {
await this.afAuth.signOut()
return this.router.navigate(['/'])
}
private updateUserData({ uid, email, displayName }: User) {
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${uid}`);
const data = {
uid,
email,
displayName
}
return userRef.set(data, { merge: true })
}
}
login.component.ts
import { Component, OnInit } from '@angular/core';
import { Inject } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
signupForm: FormGroup;
constructor(public fb: FormBuilder, public auth: AuthService) { }
ngOnInit(): void {
this.signupForm = this.fb.group({
'email': ['', [
Validators.required,
Validators.email
]],
'password': ['', [
Validators.pattern('/^([a-zA-Z0-9@$*#]{8,})$/'),
Validators.minLength(8),
]]
});
}
get email() { return this.signupForm.get('email') }
get password() { return this.signupForm.get('password') }
signup() {
// return this.auth.emailSignUp(this.email.value, this.password.value)
}
}