Firebase auth v9 do not pass typescript checks when inside web worker

[jeronimonunes]

Environment

• Angular Version 12.2.0
• TypeScript version: 4.3.5
• Firebase SDK version: 9.0.0
• Firebase Product: auth

When typescript tries to compile a worker with firebase auth, it fails because types refer to DOM types which are not available in the worker library.

Steps to reproduce

npm install -g @angular/cli
ng new test
cd test
ng add @angular/fire
ng g web-worker test-auth

Go to test-auth.worker.ts and place content:

/// <reference lib="webworker" />
import { initializeAuth, } from 'firebase/auth';

Run Angular: ng serve

You’ll get the errors:

Error: node_modules/@firebase/auth/dist/auth-public.d.ts:614:22 - error TS2304: Cannot find name 'Window'.
614     readonly window: Window | null;
                         ~~~~~~
Error: node_modules/@firebase/auth/dist/auth-public.d.ts:616:25 - error TS2304: Cannot find name 'Window'.
616     constructor(window: Window | null);
                            ~~~~~~
2577     render: (container: HTMLElement, parameters: RecaptchaParameters) => number;
                             ~~~~~~~~~~~
Error: node_modules/@firebase/auth/dist/auth-public.d.ts:2647:32 - error TS2304: Cannot find name 'HTMLElement'.
2647     constructor(containerOrId: HTMLElement | string, parameters: RecaptchaParameters, authExtern: Auth);

[jbalidiong]

Hi @jeronimonunes, thanks for the report. I was able to reproduce the behavior now. Let me check what we can do for this issue or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.

[hsubox76]

I've looked around and it seems like people using the Angular web worker generator have run into similar issues (typescript complaints about DOM-only types) in general, even if not using Firebase. Do any of these suggestions help?

https://github.com/maximegris/angular-electron/issues/578 https://stackoverflow.com/questions/64853849/angular-10-webworker-cannot-find-name-element-how-to-resolve https://stackoverflow.com/questions/68843329/core-angular-objects-not-found-building-web-worker-in-angular-v8

[jeronimonunes]

Hi @hsubox76 thanks for the help!

I solved this in my project by creating a .d.ts file with the following content:

// This file exists because firebase auth v9 has HTMLElement and Window references.
// It would not be a problem in a normal browser context, but web workers do not have these items, and this project needs auth in workers.
interface HTMLElement { }
interface Window { }

I did not like the solution of disabling libraries checks, maybe the library would not work inside workers because it would indeed use these missing elements.

[mark922]

Thanks for this @jeronimonunes. But I think there should be a better way

[jeronimonunes]

Sure, it's just a workaround so we can use the library while it's not fixed. I believe the best way would be to to have two different modules, the first without DOM dependencies and then another one that add the functionalities that require them.

[beonde]

Also blocked using auth in web workers by this bug. As mentioned by @jeronimonunes is it possible to have a "lite" extension of the auth module that does not include DOM dependencies?

[Talal916]

Confirmed, running into the same issue with trying to use Firebase in a TypeScript web worker. Is there any fix for this? I don't want to switch to JS

[laurentpayot]

I’m not an Angular user but I’m using auth in a web worker without issue. You have to prevent the usage of DOM related functions at auth init. See the docs at https://firebase.google.com/docs/auth/web/custom-dependencies

Here is what I do:

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth'

// const app = ...

const auth = initializeAuth(app, {
        persistence: indexedDBLocalPersistence,
    })

Hope it helps, Laurent

[NhienLam]

Thanks laurentpayot for attaching the docs! https://firebase.google.com/docs/auth/web/custom-dependencies and @laurentpayot's answer is the right way to do it.