Firebase Auth v9 doesn't work in web worker

[ebeloded]

Environment

• Browser version: Chrome (latest)
• Firebase SDK version: v9-beta.8
• Firebase Product: auth

Problem

While trying to transition to Firebase Modular API, I found that Firebase Auth doesn't work in web worker. It throws a "'window' is not defined" error.

Naturally, not everything in Firebase Auth can work in a web worker. However, the functions I'm trying to access shouldn't depend on window: onAuthStateChanged, signInWithEmailAndPassword, signOut, .

Steps to reproduce:

Relevant Code:

// worker.js
import { initializeApp } from 'firebase/app'
import { getAuth } from "firebase/auth";

initializeApp(/ *FIREBASE_CONFIG */)

const auth = getAuth(); // <- this fails

Workaround

In a classic worker, however, it is still possible to use firebase when importing the library from CDN in a non-modular way:

importScripts(
  'https://www.gstatic.com/firebasejs/9.0.0-beta.8/firebase-app-compat.js',
  'https://www.gstatic.com/firebasejs/9.0.0-beta.8/firebase-auth-compat.js',
)

firebase.initializeApp(/ *FIREBASE_CONFIG */)

firebase.auth().onAuthStateChnaged(user => console.log(user)) // <- this works fine

[kartikwatwani]

I updated to version 9 for chrome extension Manifest version 3 which uses the background services workers and I am receiving the same error.

[sam-gc]

Hi, thanks for reaching out. In this case, the issue is because getAuth() provides default dependencies that assume a DOM environment (specifically browserPopupRedirectResolver). Instead, in a worker context, you should initialize auth with targeted dependencies using initializeAuth() instead of getAuth()

For example,

import {initializeAuth, indexedDBLocalPersistence} from 'firebase/auth';
import {initializeApp} from 'firebase/app';

const app = initializeApp(...)
const auth = initializeAuth(app, {
  persistence: indexedDBLocalPersistence
  // Do not assign a popup redirect resolver; popup/redirect don't work in worker contexts
});

[ebeloded]

Excellent. Thank you @sam-gc!

[jeronimonunes]

I tried this solution but I got a few errors from typescript:

1. auth-public.d.ts:614:22 - error TS2304: Cannot find name 'Window'.
2. auth-public.d.ts:616:25 - error TS2304: Cannot find name 'Window'.
3. auth-public.d.ts:2573:25 - error TS2304: Cannot find name 'HTMLElement'.
4. auth-public.d.ts:2643:32 - error TS2304: Cannot find name 'HTMLElement'.
   I guess it will not be a problem at runtime but I think the library could separate this DOM dependent declarations into another .d.ts file. I'm yet to find out how to disable the typescript errors though. Should I open a new issue?

[sam-gc]

@jeronimonunes yes please open a new issue (along with a small code sample :)