angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.64k stars 2.2k forks source link

please reexport firebase.auth #2529

Closed alexfung888 closed 3 years ago

alexfung888 commented 4 years ago

Version info

Angular: 10.0.1 Firebase: 7.15.5 AngularFire: 6.0.2

How to reproduce these conditions

import { auth } from 'firebase/app';

AngularFireAuth promise proxies an initialized firebase.auth.Auth, however, angular/fire does not re-export firebase.auth itself As a result, programs do not have access to auth unless it directly imports from firebase/app resuling in angular 10 warning

depends on firebase/app. CommonJS or AMD dependencies can cause optimization bailouts.

For example, to use angular/fire .signInWithRedirect(), you need an AuthProvider. To create one, you need something like

import { auth } from 'firebase/app';
const p = new auth.GoogleAuthProvider();

angular/fire should re-export firebase.auth, or at least all the authprovider constants/functions available, so that programs would not need to import from firebase.

ghost commented 4 years ago

Would like to see this fixed as well, for people who are looking for a solution until this is changed read the following: https://angular.io/guide/build#configuring-commonjs-dependencies

alexfung888 commented 4 years ago

I notice that with angular/fire@6, angularfiremodule.auth no longer exists, but angularfiremodule.app.auth() method is present (actually .app is a promise so the code is more complicated). However, this still does not provide access to GoogleAuthProvider() required for login request because we need to get a firebase.auth.GoogleAuthProvider() instead of a firebase.auth().GoogleAuthProvider().

jadengis commented 3 years ago

@alexfung888 Tbh I think you would get this warning even if the auth module is rexported. The angular compiler prints that warning for any dependency, even transitive dependencies, that use commonjs modules and must be included in your bundle. The only real solution is for the firebase team to rebuild the firebase sdk to use es modules instead of commonjs.

jimmykane commented 3 years ago

This becomes more cumbersome with Firebase 8 right ?

alexfung888 commented 3 years ago

This becomes more cumbersome with Firebase 8 right ?

Actually I have figured out how to do it in firebase@8. And it doesn't receive any angular warnings.

import firebase from 'firebase';
const p = new firebase.auth.GoogleAuthProvider();

I don't really understand the various syntax of the import statement, or whether this import and loading a lot of useless stuff into my module. At least this is a working version.

I would feel much beter if I can import things like auth, User, FirebaseError from angular/fire instead of from firebase, because tha latter is completely undocumented as far as Typescript is concerned.

jamesdaniels commented 3 years ago

@alexfung888 you should import from firebase/app to make it so you're only importing what you need to.

import firebase from 'firebase/app'; // CHANGE TO FIREBASE/APP
const p = new firebase.auth.GoogleAuthProvider();

The change with v8 is Firebase is now exporting a "default export" rather than a namespace, I know it's weird but you can't destructure a module in ES5/6/7 as it conflicts with the namespace syntax. Supporting both namespaces + defaults are coming to modules in ES2020(E11) apparently but we're not targeting that high ATM.

firebase/app is just the base of the library, whereas firebase includes the kitchen sink. The Firebase object currently gets the methods auth, firestore, etc. added to it's prototype when you import 'firebase/auth' etc.

Looking to the future we're working on a modular version of the JS SDK, I'll be starting an experimental branch of AngularFire to support this soon.

jamesdaniels commented 3 years ago

I can't reexport firebase.auth etc. until the next minor at least, I'm still not sure what I want to do for an API there...

This problem also is going away with the aforementioned modular JS SDK.

jimmykane commented 3 years ago

@jamesdaniels that way we get the warning about development environment.

You need to

import firebase from 'firebase/app';
import 'firebase/auth';

And later

new firebase.auth() etc

jamesdaniels commented 3 years ago

I'm thinking about a new API here but I ran out of steam on 6.1, honestly I think Firebase vNext is going to be the big next target for AngularFire and it won't have these problems. Going to close.