After setting up a new angular ssr project, I integrated @angular/fire using schematics. The project interacts with firestore, storage, and authentication services. To enhance security, I configured app-check services and added my app debug token to the firebase console.
Below is how I initialized Firebase in my app.config.ts:
export const appConfig: ApplicationConfig = {
providers: [
importProvidersFrom(
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() =>
initializeAppCheck(getApp(), {
provider: new ReCaptchaEnterpriseProvider(environment.siteKey),
isTokenAutoRefreshEnabled: true,
})
)
),
]
}
The first time I run npm start, an error is displayed as shown here.
Upon reloading the page without any code changes, everything works fine. However, modifying the code and then reloading the page triggers another error as seen here.
This error persists until I terminate the terminal process and restart npm start.
I attempted checking for existing apps during appCheck initialization, but it did not resolve the issue:
provideAppCheck(() =>
initializeAppCheck(
getApps().length === 0
? initializeApp(environment.firebase)
: getApp(),
{
provider: new ReCaptchaEnterpriseProvider(environment.siteKey),
isTokenAutoRefreshEnabled: true,
}
)
)