Auth: Cannot use browserPopupRedirectResolver on demand

[vandres]

Version info

Angular: 12.2.12

Firebase: 9.2.0

AngularFire:: 7.1.1

How to reproduce these conditions

Steps to set up and reproduce

Initialiaze firebase auth without a popup resolver. This prevents the infamous iframe.js to load.

provideAuth(() => {
            const auth: Auth = initializeAuth(getApp(), {
                persistence: [
                    indexedDBLocalPersistence,
                    browserLocalPersistence,
                    browserSessionPersistence
                ],
                popupRedirectResolver: undefined
            });
            if (environment.emulator) {
                connectAuthEmulator(auth, 'http://localhost:9099', {disableWarnings: true});
            }

            return auth;
        }),

Then when a social auth is required, load the resolver on demand:

import {Auth, browserPopupRedirectResolver, signInWithPopup, GoogleAuthProvider} from '@angular/fire/auth';


await signInWithPopup(this.auth, new GoogleAuthProvider(), browserPopupRedirectResolver);

Debug output

** Errors in the JavaScript console **

GoogleSigninDirective.onclick() TypeError: Class constructor BrowserPopupRedirectResolver cannot be invoked without 'new'
    at angular-fire.js:206
    at angular-fire.js:163
    at ZoneDelegate.invoke (zone.js:372)
    at Object.onInvoke (core.js:28680)
    at ZoneDelegate.invoke (zone.js:371)
    at Zone.run (zone.js:134)
    at NgZone.run (core.js:28534)
    at run (angular-fire.js:163)
    at new <anonymous> (angular-fire.js:206)
    at _getInstance (index-238d6fa9.js:535)
    at _withDefaultResolver (index-238d6fa9.js:7714)
    at index-238d6fa9.js:7931
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new ZoneAwarePromise (zone.js:1387)
    at asyncToGenerator.js:21
    at _signInWithPopup (index-238d6fa9.js:7934)
    at signInWithPopup (index-238d6fa9.js:7928)
    at angular-fire.js:225
    at angular-fire.js:160
    at ZoneDelegate.invoke (zone.js:372)
    at Zone.run (zone.js:134)
    at NgZone.runOutsideAngular (core.js:28579)
    at runOutsideAngular (angular-fire.js:160)
    at angular-fire.js:225
    at AuthService.<anonymous> (auth.service.ts:38)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone.js:1387)
    at __awaiter (tslib.es6.js:72)
    at AuthService.google (auth.service.ts:37)
    at AuthService.descriptor.value (track-event.decorator.ts:32)
    at GoogleSigninDirective.<anonymous> (google-signin.directive.ts:21)
    at Generator.next (<anonymous>)
    at tslib.es6.js:76
    at new ZoneAwarePromise (zone.js:1387)
    at __awaiter (tslib.es6.js:72)
    at GoogleSigninDirective.onclick (google-signin.directive.ts:20)
    at GoogleSigninDirective.descriptor.value (catch.decorator.ts:41)
    at GoogleSigninDirective_click_HostBindingHandler (google-signin.directive.ts:8)
    at executeListenerWithErrorHandling (core.js:15315)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:15353)
    at HTMLButtonElement.<anonymous> (platform-browser.js:561)
    at HTMLButtonElement.sentryWrapped (helpers.js:73)
    at ZoneDelegate.invokeTask (zone.js:406)
    at Object.onInvokeTask (core.js:28667)
    at ZoneDelegate.invokeTask (zone.js:405)
    at Zone.runTask (zone.js:178)

Expected behavior

The popup should open.

Actual behavior

The popup is not opening, instead you see the described error.

Temporary workaround

As a temporary workaround, I import all dependencies directly from 'firebase/auth'. Don't know though, if this could have a negative impact on Angular (Zone)

import {browserPopupRedirectResolver, GoogleAuthProvider, signInWithPopup} from 'firebase/auth';

[kashesandr]

Having similar issue.

setPersistence(auth, browserSessionPersistence)

Login error: TypeError: Class constructor BrowserSessionPersistence cannot be invoked without 'new'

"@angular/fire": "^7.2.0",
"firebase": "^9.6.6",

[Idomo]

@kashesandr The issue is with setPersistence only.
You can workaround this with import { setPersistence } from '@firebase/auth' only, browserSessionPersistence can be imported from @angular/fire/auth.

[Judp0m]

I am using "@angular/fire": "7.5.0" and "firebase": "9.15.0". I am also unable to delay popupRedirectResolver.
Loading it in main.ts works, wither via provideAuth(() => getAuth()) or with initializeAuth. But trying to lazy load it once needed fails:
TypeError: Class constructor BrowserPopupRedirectResolver cannot be invoked without 'new'

[IvanColucciSW]

Any news on this bug? I am facing the same issue and the workaround of importing setPersistence from @firebase/auth is not working, because the types of the two Auth objects are not the same. @Idomo can you provide me some help about the workaround you found? Thanks in advance.

[Idomo]

@IvanColucciSW I'm sorry, but I honestly don't remember, it has been a long time since I faced it and probably the new versions of the libraries changes things, so you may try to check if it works with the versions that was mentioned back then, if not you may not implemented it correctly.

"@angular/fire": "^7.2.0",
"firebase": "^9.6.6",

[rdesimone]

import from firebase/auth

import {Auth,} from '@angular/fire/auth';

import {
  browserPopupRedirectResolver,
  FacebookAuthProvider,
  getAdditionalUserInfo,
  getRedirectResult,
  GoogleAuthProvider,
  signInWithEmailAndPassword,
  signInWithPopup,
  UserCredential
} from 'firebase/auth';

This works for me for Google and Facebook provider.

credit to: https://javascript.plainenglish.io/firebase-9-a-breath-of-fresh-air-for-the-angularfire-app-c6d80c1260b2

auth/iframe.js will only be loaded on sign-in.