Compat + emulators isn't working well

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 firebaseConfig should 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;
    }
  }
}

[jamesdaniels]

Your Firestore and functions emulator tokens are in the wrong format. They’re inconsistent with auth, so you’re trying to hit prod with emulated credentials. Use [‘host’, port], see https://github.com/angular/angularfire/blob/b22c82478dc4bc2df108bf8fae6de40a9107c646/sample-compat/src/app/app.module.ts#L81

‘Tis a silly API I know but it’s the one that shipped 😉

[falk-stefan]

@jamesdaniels Thanks a lot! 👍