Error:

Analytics: Firebase Analytics is not supported in this environment. Wrap initialization of analytics in analytics.isSupported() to prevent initialization in unsupported environments. Details: (1) Cookies are not available. (analytics/invalid-analytics-context).

From what I have read, safari blocks third party cookies in iframes.
We will not be able to do anything about this.

my question is, what is the correct way to initialize firebase so this error goes away.

how can I call isSupported in the provide, since it's async?

I'm using firebase 9 and the new modular way.

my current config looks like this.

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAnalytics(() =>
 initializeAnalytics(getApp(), {
 config: {
 allow_ad_personalization_signals: false,
 anonymize_ip: true,
 },
 }),
),

Analytics is an object

One strange thing I also found is that if I inject the Analytics service when the initialization fails, it's not undefined but instead an empty object / class.

constructor(@Optional() private analytics: Analytics) {}
logSomething() {
 logEvent(this.analytics, ...)
}

I would think that if the initialization fails because of isSupported = false that the injected service would be undefined or null.

Maybe it has to do with how angular fire wraps the firebase Analytics in a class?
https://github.com/angular/angularfire/blob/master/src/analytics/analytics.ts#L10-L14