0

I'm trying to create an authentication service in Angular to provide a Login form that connects to Google Firebase. The problem is, as soon as I include the service in the constructor of my Logincomponent I can't even reach the /login route anymore.

I don't get any errors inside the console.

Does somebody know where the problem is?

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)
  }

}

1 Answer 1

1

The service is named TestService not AuthService.

I would say you probably have imported some AuthService from somewhere else do you have compilation problems ?

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.