7.2.1: AppCheck compact example doesn't seem to work

[slimstrawhat]

Version info

**Angular: 13.3

**Firebase: 9.12.1

**AngularFire: 7.2.1

**Other (e.g. Ionic/Cordova, Node, browser, operating system):**Angular

How to reproduce these conditions

I've used this example from the samples folder as my reference. Omitting boilerplate code for brevity.

app.module.ts

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

@NgModule({
    imports: [
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFireAuthModule,
        provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

app.browser.module.ts

import { AppModule } from './app.module';
import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';

@NgModule({
    imports: [
        AppModule,
        provideAppCheck(() => {
            const provider = new ReCaptchaV3Provider(environment.recaptchaSiteKey);
            return initializeAppCheck(undefined, { provider, isTokenAutoRefreshEnabled: true });
        }),
    ],
    bootstrap: [AppComponent],
})
export class AppBrowserModule {}

main.ts

import { AppBrowserModule } from './app/app.browser.module';

platformBrowserDynamic()
    .bootstrapModule(AppBrowserModule)
    .catch((err) => console.error(err));

auth.service.ts

import { AngularFireAuth } from '@angular/fire/compat/auth';
import firebase from '@firebase/app-compat';

@Injectable({
    providedIn: 'root',
})
export class AuthService {
    constructor(private auth: AngularFireAuth) { }


    signInWithGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider();
        return this.auth.signInWithPopup(provider);
    }
}

I've also correctly setup Firebase and ReCaptcha. I was previously getting errors on domain issues which I resolved.

Debug output

After attempting to call signInWithPopup, I see this error in the console:

ERROR Error: Uncaught (in promise): FirebaseError: Firebase: An internal AuthError has occurred. (auth/internal-error).
FirebaseError: Firebase: An internal AuthError has occurred. (auth/internal-error).

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[slimstrawhat]

Solved this in two steps in case someone else runs into this issue.

1. Upgrade to Angularfire 7.4.1.
2. Upgrade to Anuglar v14
3. Do NOT use the compact approach. Use the modular approach.