angular / angular/angularfire

Auth: Cannot use `browserPopupRedirectResolver` on demand

Offen
#3,038 6 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
7.8k
Forks
2.2k
Ø Merge
22 Std. 28 Min.
Gemergte PRs (30 T.)
6

Beschreibung

### 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 (angular-fire.js:206)
at _getInstance (index-238d6fa9.js:535)
at _withDefaultResolver (index-238d6fa9.js:7714)
at index-238d6fa9.js:7931
at Generator.next ()
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. (auth.service.ts:38)
at Generator.next ()
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. (google-signin.directive.ts:21)
at Generator.next ()
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. (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';
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der im Bericht gezeigten provideAuth-Initialisierung und dem Aufruf von signInWithPopup und untersuche anschließend den AngularFire-Wrapper in angular-fire.js und den Aufrufer in auth.service.ts. Reproduziere den Fehler, indem browserPopupRedirectResolver bei Bedarf bereitgestellt wird; abgeschlossen ist die Aufgabe, wenn sich das social-auth-Popup ohne den Konstruktorfehler öffnet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, firebase, typescript
Bereich
authentication
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.