Currently, I am developing a login page for my ReactJS application utilizing the firebase authentication package.
Within my global firebase file, I have successfully imported the necessary packages:
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const config = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
export default firebase.initializeApp(config);
Now, in my LoginComponent
, I am looking to utilize the FacebookAuthProvider
class from the firebase.auth
namespace. To achieve this, I import the auth
namespace.
import React, { Component } from 'react';
import { auth } from 'firebase';
class Login extends Component {
provider = new auth.FacebookAuthProvider();
However, with this latest import, a warning message appears in the console:
It appears you are using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is recommended to import
only the specific SDK components you require.
For module builds, use the following syntax
(replace <PACKAGE> with the component name - e.g., auth, database, etc.):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Even after thoroughly reviewing documentation and code, I have yet to find a solution to eliminate this warning while still being able to utilize the FacebookAuthProvider
class.
Another question that arises is whether I am currently using the entire firebase development SDK. Is my usage limited to just the auth
namespace?