Merge pull request #1 from shiiinji/feature_firebase9_firebaseui0.600

Update dependencies: 🔥 Firebase 9 and Firebaseui 0.600

Author: shiiinji

README.md

@@ -48,15 +48,16 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
 // Import FirebaseAuth and firebase.
 import React from 'react';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-import firebase from 'firebase';
+import { initializeApp } from 'firebase/app';
+import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(firebaseConfig);
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -66,17 +67,19 @@ const uiConfig = {
   signInSuccessUrl: '/signedIn',
   // We will display Google and Facebook as auth providers.
   signInOptions: [
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+    GoogleAuthProvider.PROVIDER_ID,
+    FacebookAuthProvider.PROVIDER_ID,
   ],
 };
 
 function SignInScreen() {
+  const auth = getAuth(firebaseApp)
+
   return (
     <div>
       <h1>My App</h1>
       <p>Please sign-in:</p>
-      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
     </div>
   );
 }
@@ -92,24 +95,25 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
 // Import FirebaseAuth and firebase.
 import React, { useEffect, useState } from 'react';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-import firebase from 'firebase';
+import { initializeApp } from 'firebase/app';
+import { getAuth, onAuthStateChanged, signOut, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(firebaseConfig);
 
 // Configure FirebaseUI.
 const uiConfig = {
   // Popup signin flow rather than redirect flow.
   signInFlow: 'popup',
   // We will display Google and Facebook as auth providers.
   signInOptions: [
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    firebase.auth.FacebookAuthProvider.PROVIDER_ID
+    GoogleAuthProvider.PROVIDER_ID,
+    FacebookAuthProvider.PROVIDER_ID
   ],
   callbacks: {
     // Avoid redirects after sign-in.
@@ -118,11 +122,12 @@ const uiConfig = {
 };
 
 function SignInScreen() {
+  const auth = getAuth(firebaseApp);
   const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.
 
   // Listen to the Firebase Auth state and set the local state.
   useEffect(() => {
-    const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
+    const unregisterAuthObserver = onAuthStateChanged(auth, user => {
       setIsSignedIn(!!user);
     });
     return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
@@ -133,15 +138,15 @@ function SignInScreen() {
       <div>
         <h1>My App</h1>
         <p>Please sign-in:</p>
-        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
       </div>
     );
   }
   return (
     <div>
       <h1>My App</h1>
-      <p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
-      <a onClick={() => firebase.auth().signOut()}>Sign-out</a>
+      <p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
+      <a onClick={() => signOut(auth)}>Sign-out</a>
     </div>
   );
 }
@@ -161,7 +166,7 @@ return (
   <div>
     <h1>My App</h1>
     <p>Please sign-in:</p>
-    <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
+    <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
   </div>
 );
 ```

dist/README.md

@@ -48,15 +48,16 @@ Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
 // Import FirebaseAuth and firebase.
 import React from 'react';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-import firebase from 'firebase';
+import { initializeApp } from 'firebase/app';
+import { getAuth, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(firebaseConfig);
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -66,17 +67,19 @@ const uiConfig = {
   signInSuccessUrl: '/signedIn',
   // We will display Google and Facebook as auth providers.
   signInOptions: [
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
+    GoogleAuthProvider.PROVIDER_ID,
+    FacebookAuthProvider.PROVIDER_ID,
   ],
 };
 
 function SignInScreen() {
+  const auth = getAuth(firebaseApp)
+
   return (
     <div>
       <h1>My App</h1>
       <p>Please sign-in:</p>
-      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
     </div>
   );
 }
@@ -92,24 +95,25 @@ Below is an example on how to use `StyledFirebaseAuth` with a state change upon
 // Import FirebaseAuth and firebase.
 import React, { useEffect, useState } from 'react';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
-import firebase from 'firebase';
+import { initializeApp } from 'firebase/app';
+import { getAuth, onAuthStateChanged, signOut, EmailAuthProvider, GoogleAuthProvider } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(firebaseConfig);
 
 // Configure FirebaseUI.
 const uiConfig = {
   // Popup signin flow rather than redirect flow.
   signInFlow: 'popup',
   // We will display Google and Facebook as auth providers.
   signInOptions: [
-    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
-    firebase.auth.FacebookAuthProvider.PROVIDER_ID
+    GoogleAuthProvider.PROVIDER_ID,
+    FacebookAuthProvider.PROVIDER_ID
   ],
   callbacks: {
     // Avoid redirects after sign-in.
@@ -118,11 +122,12 @@ const uiConfig = {
 };
 
 function SignInScreen() {
+  const auth = getAuth(firebaseApp);
   const [isSignedIn, setIsSignedIn] = useState(false); // Local signed-in state.
 
   // Listen to the Firebase Auth state and set the local state.
   useEffect(() => {
-    const unregisterAuthObserver = firebase.auth().onAuthStateChanged(user => {
+    const unregisterAuthObserver = onAuthStateChanged(auth, user => {
       setIsSignedIn(!!user);
     });
     return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
@@ -133,15 +138,15 @@ function SignInScreen() {
       <div>
         <h1>My App</h1>
         <p>Please sign-in:</p>
-        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
       </div>
     );
   }
   return (
     <div>
       <h1>My App</h1>
-      <p>Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!</p>
-      <a onClick={() => firebase.auth().signOut()}>Sign-out</a>
+      <p>Welcome {auth.currentUser.displayName}! You are now signed-in!</p>
+      <a onClick={() => signOut(auth)}>Sign-out</a>
     </div>
   );
 }
@@ -161,7 +166,7 @@ return (
   <div>
     <h1>My App</h1>
     <p>Please sign-in:</p>
-    <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
+    <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={uiConfig} firebaseAuth={auth}/>
   </div>
 );
 ```