Angularfire: Support On-Demand Firebase SDK Auto-configuration

Created on 6 Apr 2017 · 8Comments · Source: angular/angularfire

Not sure if this is even possible with AngularFire2, but this was just released:

https://firebase.googleblog.com/2017/04/easier-configuration-for-firebase-on-web.html?m=1

At first glance it seems that the init would need to be able to support this new feature from Firebase.

Source

seanlail

👍2

Most helpful comment

I solved it with a (admittedly pretty ugly) workaround:

In your index.html add the following lines before the end of the body tag (or in the head, doesn't really matter as long as they execute before the webpack bundles)

<script>
  window.firebase = { initializeApp: function(credentials) { window.firebaseCredentials = credentials} };
</script>
<script src="/__/firebase/init.js"></script>
<script>
  window.firebase = undefined;
</script>

This will save the credentials needed to initialize firebase to window.firebaseCredentials, so that we can use them when initializing the app.

Then add the saved credentials to your app.module.ts imports:

AngularFireModule.initializeApp((window as any).firebaseCredentials)

Maybe something that could be added to the docs?

Maistho on 8 Jan 2018

👍4

All 8 comments

@seanlail It's actually in the RC0 API which is checked in at master, but not yet released. I plan on doing a next tag release soon. See issue #854 for more details. This isn't actually a new feature it was released sometime back in November and we're just making more noise about it now.

davideast on 6 Apr 2017

Apologies, I thought you were referring to the module bundling splitting, import 'firebase/auth';

I'll have to give it a think of how we'd do it, but it would be awesome.

davideast on 7 Apr 2017

👍3

I solved it with a (admittedly pretty ugly) workaround:

In your index.html add the following lines before the end of the body tag (or in the head, doesn't really matter as long as they execute before the webpack bundles)

<script>
  window.firebase = { initializeApp: function(credentials) { window.firebaseCredentials = credentials} };
</script>
<script src="/__/firebase/init.js"></script>
<script>
  window.firebase = undefined;
</script>

This will save the credentials needed to initialize firebase to window.firebaseCredentials, so that we can use them when initializing the app.

Then add the saved credentials to your app.module.ts imports:

AngularFireModule.initializeApp((window as any).firebaseCredentials)

Maybe something that could be added to the docs?

Maistho on 8 Jan 2018

👍4

hello, any update on this?

hiepxanh on 5 May 2018

No update, happy to accept a PR; which is why I left this open. Continue configuring normally for now.

jamesdaniels on 5 May 2018

👍1

I've been looking at where to possibly inject this in a way that is easy for users. I'd like it if it was an option to the initializeApp() call, but I don't think that it's possible without changes to the firebase SDK.
The SDK assumes that the config is provided synchronously, but if Angularfire is to be responsible for loading the config asynchronously it's not possible to do in a clean way.

I think that my solution posted above is a good fit for users who want to do this, and could probably be added (with some changes for clarity) to the docs.

It will however slow down the loading of the app slightly (one more non-deferred network request) so I don't think it should be the default/preferred way of doing it.

TL:DR; I don't think this is possible in a user-friendly way without changes to the firebase SDK to allow loading config async.

Maistho on 6 May 2018

Further, I don't think we can handle this easily with Angular Universal. I'm going to think on this more and will reconsider in the future. Closing for now.

jamesdaniels on 14 May 2018

Any updates here? I think This is a huge update on security and I think we should discuss better on alternatives if it's not possible to implement

@Maistho, what it credentials on this case? I tried your solution but couldn't make it work