Description
It's been two completely wasted days now. I have not the slightest idea what could be wrong with my setup or what kind of information I am missing here but please somebody put me out of my misery here.
tl;dr: I follow a simple example where I want to create a new user using Google Sign-Up. The user gets created in the Auth service but not in the Firestore. I have no idea how my local
firebaseConfigshould look like and why this is not working.
Version info
Angular: 12
Firebase: 9.0.1
AngularFire: 7.0.3
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Node: 16
How to reproduce these conditions
You can clone this repository and give it a try yourself.
I don't really know. All I did was run firebase init, and fire ap the base with:
$ npm run build --prefix functions && firebase emulators:start --inspect-functions & tsc --watch
All I am trying to to is save a new user to the Firestore:
async googleSignIn() {
this.logger.debug('User signs in with Google.')
const provider = new auth.GoogleAuthProvider();
const credentials = await this.afAuth.signInWithPopup(provider);
return await this.updateUserData(credentials.user);
}
private async updateUserData(user: User | null) {
if (!user) {
throw "User cannot be null.";
}
const userRef: AngularFirestoreDocument<User> = this.afs.doc(`/users/${user.uid}`);
const data: any = {
uid: user.uid,
email: user.email,
displayName: user.displayName ? user.displayName : user.email,
photoURL: user.photoURL
}
return userRef.set(data, {merge: true});
}Using
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {AppRouting} from "./app.routing";
import {LoggerModule, NgxLoggerLevel} from "ngx-logger";
import {environment} from "../environments/environment";
import {HttpClientModule} from "@angular/common/http";
import {SharedModule} from "./modules/shared.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AngularFireModule} from "@angular/fire/compat";
import {USE_EMULATOR as USE_AUTH_EMULATOR} from '@angular/fire/compat/auth';
import {AngularFirestore, USE_EMULATOR as USE_FIRESTORE_EMULATOR} from '@angular/fire/compat/firestore';
import {USE_EMULATOR as USE_FUNCTIONS_EMULATOR} from '@angular/fire/compat/functions';
const envFirebase = environment.firebase;
@NgModule({
declarations: [
AppComponent
],
imports: [
SharedModule,
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AppRouting,
// Logging
LoggerModule.forRoot({
serverLoggingUrl: '/',
level: environment.production ? NgxLoggerLevel.OFF : NgxLoggerLevel.TRACE,
serverLogLevel: NgxLoggerLevel.OFF
}),
// Firebase
AngularFireModule.initializeApp(envFirebase.config),
],
providers: [
// Firebase
{provide: USE_AUTH_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:9099'] : undefined},
{provide: USE_FUNCTIONS_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:5001'] : undefined},
{provide: USE_FIRESTORE_EMULATOR, useValue: envFirebase.useEmulators ? ['http://localhost:8080'] : undefined},
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(firestore: AngularFirestore) {
firestore.firestore.settings({experimentalForceLongPolling: true})
}
}Debug output
After the user got created in the Authentication Service I am seeing this in my console.
** Errors in the JavaScript console **
FirebaseError: Missing or insufficient permissions.
Also:
export const environment = {
production: false,
firebase: {
useEmulators: true,
config: {
apiKey: "*******",
authDomain: ""*******-dev.firebaseapp.com",
projectId: ""*******-dev",
storageBucket: ""*******-dev.appspot.com",
messagingSenderId: ""*******",
appId: "1:"*******:web:"*******",
measurementId: ""*******"
},
}
};
The interesting thing is that I see this in https://console.firebase.google.com/project/project/firestore/usage/last-24h/reads:
Even though I started using Emulators from the very beginning.
These are my Firestore settings:
which are the same as my local settings:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}