angularfire: SSR => @firebase/auth: Auth (9.6.8): INTERNAL ASSERTION FAILED: Expected a class definition

Firebase:

"firebase": "^9.6.8",

AngularFire:

Angular CLI: 13.3.0
Node: 14.16.0
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 13.2.5
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.0
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.3.0
@angular-devkit/schematics      13.3.0
@angular/cli                    13.3.0
@angular/fire                   7.2.1
@angular/google-maps            13.3.0
@nguniversal/builders           13.0.2
@nguniversal/express-engine     13.0.2
@schematics/angular             13.3.0
ng-packagr                      13.2.1
rxjs                            6.6.7
typescript                      4.5.5

How to reproduce these conditions

  1. run habitat-commons:serve-ssr:development
  2. in my app browser and ssr server will build fine
  3. start ssr server node dist/apps/habitat-commons/server/main.js
  4. make a request to this server
  5. see errors below

First Error

 @firebase/auth: Auth (9.6.8): INTERNAL ASSERTION FAILED: Expected a class definition
Error: INTERNAL ASSERTION FAILED: Expected a class definition
    at debugFail (test_app/dist/apps/habitat-commons/server/main.js:317691:9)
    at debugAssert (test_app/dist/apps/habitat-commons/server/main.js:317704:5)
    at Module._getInstance (test_app/dist/apps/habitat-commons/server/main.js:317728:3)
    at new CompatPopupRedirectResolver (test_app/dist/apps/habitat-commons/server/main.js:315880:81)
    at _getInstance (test_app/dist/apps/habitat-commons/server/main.js:317736:14)
    at AuthImpl._initializeWithPersistence (test_app/dist/apps/habitat-commons/server/main.js:320082:37)
    at _initializeAuthInstance (test_app/dist/apps/habitat-commons/server/main.js:317817:8)
    at test_app/dist/apps/habitat-commons/server/main.js:325294:7
    at Component.instanceFactory (test_app/dist/apps/habitat-commons/server/main.js:325297:7)
    at Provider.getOrInitializeService (test_app/dist/apps/habitat-commons/server/main.js:327833:33)

i looked into the _getInstance mentioned in the callstack. it takes an arg that should be a class instance. hence the error.

Here is what _getInstance looked like in my ssr bootstrap (main.js)

function _getInstance(cls) {
  console.log('**((_getInstance 0))**', cls)
  debugAssert(cls instanceof Function, 'Expected a class definition');
  let instance = instanceCache.get(cls);

  if (instance) {
    debugAssert(instance instanceof cls, 'Instance stored in cache mismatched with class');
    return instance;
  }

  instance = new cls();
  instanceCache.set(cls, instance);
  return instance;
}

The log i added(see above) revealed that an error instead of a class was passed in the 3 rd time.see out put below

**((_getInstance 0))** [class InMemoryPersistence] { type: 'NONE' }
**((_getInstance 0))** [class CompatPopupRedirectResolver]
**((_getInstance 0))** FirebaseError: Firebase: Error (auth/operation-not-supported-in-this-environment).
    at createErrorInternal (test_app/dist/apps/habitat-commons/server/main.js:317665:38)
    at _createError (test_app/dist/apps/habitat-commons/server/main.js:317640:10)
    at Module.2485 (test_app/dist/apps/habitat-commons/server/main.js:325381:29)
    at __webpack_require__ (test_app/dist/apps/habitat-commons/server/main.js:545206:42)
    at Module.32562 (test_app/dist/apps/habitat-commons/server/main.js:325547:76)
    at __webpack_require__ (test_app/dist/apps/habitat-commons/server/main.js:545206:42)
    at Module.70092 (test_app/dist/apps/habitat-commons/server/main.js:315550:81)
    at __webpack_require__ (test_app/dist/apps/habitat-commons/server/main.js:545206:42)
    at Module.55776 (test_app/dist/apps/habitat-commons/server/main.js:500158:79)
    at __webpack_require__ (test_app/dist/apps/habitat-commons/server/main.js:545206:42) {
  code: 'auth/operation-not-supported-in-this-environment',
  customData: {}
}
[2022-03-17T20:12:59.002Z]  @firebase/auth: Auth (9.6.8): INTERNAL ASSERTION FAILED: Expected a class definition
ERROR Error: INTERNAL ASSERTION FAILED: Expected a class definition

of course all my servers and test requests are on local host…Do you know anything that can help me understand either error

@firebase/auth: Auth (9.6.8): INTERNAL ASSERTION FAILED: Expected a class definition

or

Firebase: Error (auth/operation-not-supported-in-this-environment)

Expected behavior

I expected to send a universal rendered view to the browser

Actual behavior

Firebase auth prevents universal from performing its task.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 14
  • Comments: 28 (6 by maintainers)

Most upvoted comments

There seems to be a resolve in here. however I dont know how to apply it to my @angular/fire env

https://github.com/firebase/firebase-js-sdk/issues/5475#issuecomment-920211870

https://github.com/firebase/firebase-js-sdk/issues/5475#issuecomment-920211870

This seems to be the best lead however i have not figured out how to implement with @angular/fire

We had to use scully. But I will get start debugging this again soon.

πŸ˜ŽπŸ˜πŸ˜‹πŸ˜„πŸ€”

On Tue, 28 Jun 2022 at 23:30, Santosh @.***> wrote:

Thanks @yharaskrik https://github.com/yharaskrik. It worked fine with modular firebase 9

We were in a process to update our firebase from 8 to 9. We had manage to remove compat version and run our application on modular version. Its working fine with Angular Universal + Angular version 14 and firebase 9

β€” Reply to this email directly, view it on GitHub https://github.com/angular/angularfire/issues/3181#issuecomment-1169495810, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJPNYZXTVZUWNZKZGV24ILVRO7OJANCNFSM5Q775GQA . You are receiving this because you commented.Message ID: @.***>

This will solve the issue for you if you are getting it when server side rendering (we are using Angular Universal)

provideAuth(() => {
            /*
             * This is a hack to get around the issue described in this thread:
             * https://github.com/firebase/firebase-js-sdk/issues/5475
             *
             * It has not been fixed and the webpack trick both did not work nor
             * was it simple to implement. What this does is it checks to see if it
             * is being SSR'd, if it is not then initialize firebase normally,
             * if it is then just "gets" the auth, which is essential a noop.
             */
            if (typeof document !== 'undefined') {
                return initializeAuth(getApp(), {
                    persistence: browserLocalPersistence,
                    popupRedirectResolver: browserPopupRedirectResolver,
                });
            }
            return getAuth(getApp());
        }),