Firebaseui-web: Please support SSR - Server Side Rendering - window is not defined

Created on 20 Sep 2017  路  3Comments  路  Source: firebase/firebaseui-web

I am using the combination angularfire2 and firebaseui in order to authenticate users.
The app is universal and i am using nodejs to render the app.
Since window, document, navigator, and other browser types - do not exist on the server, i am not able to use the firebaseui module
-->

node_modules/firebaseui/dist/npm.js:342
Dl.prototype.Sb);oa("firebaseui.auth.AuthUI.prototype.signIn",Dl.prototype.we);oa("firebaseui.auth.AuthUI.prototype.reset",Dl.prototype.reset);oa("firebaseui.auth.AuthUI.prototype.delete",Dl.prototype.delete);oa("firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM",bj);oa("firebaseui.auth.CredentialHelper.NONE","none")})(); })();module.exports=firebaseui;
                                                                                                                                                                                                                                                                                                                                         ^
ReferenceError: window is not defined
    at /Users/.../node_modules/firebaseui/dist/npm.js:30:129
    at Object.<anonymous> (/Users/.../node_modules/firebaseui/dist/npm.js:342:330)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> 
npm ERR! code ELIFECYCLE
npm ERR! errno 1

stack-trace -->

import * as firebaseui from 'firebaseui';

when i call new firebaseui.auth.AuthUI(angularFireAuth.auth);

thanks in advance

Most helpful comment

@AnthonyNahas I found simple solution. In Vue this works fine:

// Mounted hook is called only in browser, so window is defined
mounted () {
    const firebaseui = require('firebaseui')
}

All 3 comments

Server side rendering is not supported and not on our current roadmap.

@AnthonyNahas I found simple solution. In Vue this works fine:

// Mounted hook is called only in browser, so window is defined
mounted () {
    const firebaseui = require('firebaseui')
}

@TovarischChe thanks for your suggestion! However, I implemented my own firebaseui module that support SSR and material design ;) (still in dev - alpha release) ... take a look here ngx-auth-firebaseui
cheers

Was this page helpful?
0 / 5 - 0 ratings