angular - Handle Error in AngularFireModule.initializeApp

Question

I have integrated Firebase Authentication in my angular 10 application and things are working great.

In my app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.configPlaceholder),
    ...

For authorised users, everythying works perfect but there are few cases where few unauthorised users are trying to access my application and they don't see anything on the UI.

The error that they see in the console are

main.974e641d3eb0ad8ccf3b.js:formatted:37342 ERROR FirebaseError: Missing or insufficient permissions.
at new t (https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:43737)
at e.fromRpcStatus (https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:109993)
at e.fromWatchChange (https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:118500)
at t.onMessage (https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:229980)
at https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:228755
at https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:229557
at https://my-random.web.app/main.974e641d3eb0ad8ccf3b.js:1:137587
at e.invoke (https://my-random.web.app/polyfills.c30c8e919bc8991e7c3b.js:1:7309)
at t.run (https://my-random.web.app/polyfills.c30c8e919bc8991e7c3b.js:1:2409)
at https://my-random.web.app/polyfills.c30c8e919bc8991e7c3b.js:1:14330

Now how can I catch this error and show a graceful pop that the user is not authroised

question from:https://stackoverflow.com/questions/65839954/handle-error-in-angularfiremodule-initializeapp

Answer 1

Waitting for answers