Recently, I posted a question regarding Google Firebase Angular Firestore switchMap and encountered some issues. The question can be found here.
After exploring AngularFireAuth, I learned that it is used to create a User object with fixed values, requiring custom values to be added through Google Firestore.
I have successfully created an entry in Firestore and defined a User Model as follows:
export interface User {
uid: string;
email: string;
displayName?: string;
role: string;
thursdayCampaign: Boolean;
menagerieCoast: Boolean;
}
The code snippet below should retrieve the uid from the AngularFireAuth User object and then utilize switchMap to interact with the Firebase store. However, a problem arises when my updateUserData function attempts to update the AngularFireAuth User Object with additional data, causing an error due to incompatible field values.
At this point, I am puzzled as to why my reference is not redirecting properly. Do I need to include a call to this.user$ somewhere in the code?
In hopes of better articulating my issue compared to my prior post, please find the relevant code below:
import { Injectable } from "@angular/core";
import { Router } from '@angular/router';
import { auth } from 'firebase/app';
import {
AngularFirestore,
AngularFirestoreDocument
} from '@angular/fire/firestore'
import { Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { User } from './user1.model';
import * as firebase from 'firebase';
import { AngularFireAuth } from '@angular/fire/auth';
@Injectable({
providedIn: 'root'
})
export class AuthService {
user$: Observable<User[]>;
constructor(private afAuth: AngularFireAuth,
private afs: AngularFirestore,
private router: Router) {
//This is how we're getting into the firestoreDB
this.user$ = this.afAuth.authState.pipe(
switchMap(user => {
if (user){
return this.afs.doc<User>(`/users/${user.uid}`).valueChanges();
} else {
return of(null)
}
})
)
} //end constructor
public updateUserData(user){
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`users/${user.uid}`)
const data: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
role: user.role,
thursdayCampaign: user.thursdayCampaign,
menagerieCoast: user.menagerieCoast
}
userRef.set(data, { merge: true})
}
async emailSignin(value){
const credential = await this.afAuth.signInWithEmailAndPassword(value.email, value.password)
return this.updateUserData(credential.user),
this.router.navigate(['/home'])
}
async googleSignin(){
const provider = new auth.GoogleAuthProvider();
const credential = await this.afAuth.signInWithPopup(provider);
return this.updateUserData(credential.user)
}
Error message received when calling emailSignin:
ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field role) FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field role)