Repository navigation
Auth: Cannot use browserPopupRedirectResolver on demand #3038
Description
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';
Reacted by Faustino Marañón, Azumi Takahashi, Julien and Jashanpreet singh
Reacted by Julien
Activity
[-]Auth: Cannot use [/-][+]Auth: Cannot use `browserPopupRedirectResolver` on demand[/+]kashesandr commentedon Feb 16, 2022
Having similar issue.
Login error: TypeError: Class constructor BrowserSessionPersistence cannot be invoked without 'new'"@angular/fire": "^7.2.0",
"firebase": "^9.6.6",
Idomo commentedon Feb 27, 2022
@kashesandr The issue is with
setPersistenceonly.You can workaround this with
import { setPersistence } from '@firebase/auth'only,browserSessionPersistencecan be imported from@angular/fire/auth.Judp0m commentedon Dec 26, 2022
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 withinitializeAuth. But trying to lazy load it once needed fails:TypeError: Class constructor BrowserPopupRedirectResolver cannot be invoked without 'new'IvanColucciSW commentedon Sep 1, 2023
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 commentedon Sep 1, 2023
@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.
rdesimone commentedon Sep 23, 2023
import from
firebase/authThis 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.jswill only be loaded on sign-in.