Namespace imports

[jakeleventhal]

[REQUIRED] Describe your environment

• Operating System version: OS X 10.15.5
• Browser version: Chrome 74.0.3729.169
• Firebase SDK version: 6.0.4
• Firebase Product: auth

[REQUIRED] Describe the problem

I am unable to import properly from the auth namespace

Steps to reproduce:

When using firebase, I get the following warning in my console:

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

I am using ES Modules but when I try to import from specific packages, none of the sign in providers work properly.

Relevant Code

signInOptions: [
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ]

[Feiyang1]

Can you please provide some detail on what error you see, and steps to reproduce?
Is your project a typescript or js project ?

[jakeleventhal]

Yes, the error i see is what is provided in the original description. It is a warning.

The project is a react project using javascript and .jsx files

The two instances where I use the firebase import are in 1 file like this:

import firebase from 'firebase';
...
firebase.initializeApp({
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN
});

and in another file like this:

import firebase from 'firebase';
...
signInOptions: [
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
]

I have tried modifying the second file to be:

import firebase from 'firebase/auth';
...
signInOptions: [
    firebase.FacebookAuthProvider.PROVIDER_ID,
    firebase.GoogleAuthProvider.PROVIDER_ID,
    firebase.EmailAuthProvider.PROVIDER_ID
]

but it does not work properly saying that the auth providers are not properties of firebase

[hsubox76]

Hi there - two things:

1. The warning you're seeing isn't related to any issues you're having with auth or providers. It's a warning that you're using the all-in-one firebase bundle which brings in all the firebase packages, including ones you're not using. It's a suggestion to import packages individually to optimize your bundle size. If you want it to go away, you'll want to do as it suggests, in this case that'll be:

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

If you decide you want to use firestore, for example, add the line:

import 'firebase/firestore'

But either way it shouldn't cause any bugs, you'll just be loading more code than you need.

2. As far as auth not working, are you seeing any additional errors? The code you're using looks like you're using firebase-ui, is that right? (Or are you using react-firebaseui?) Does anything on that linked page help? Did you create the HTML element? Have you enabled all the sign-in providers in the console? Is the UI showing up? Do the buttons do anything when you click on them? Any more details about what is or isn't happening would be helpful.

[google-oss-bot]

Hey @jakeleventhal. We need more information to resolve this issue but there hasn't been an update in 7 days. I'm marking the issue as stale and if there are no new updates in the next 3 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[jakeleventhal]

This works. Thanks.