Upgraded to React 18, updated dependencies, fixed "AuthUI instance is deleted" error

.babelrc

@@ -1,15 +1,11 @@
 {
   "presets": [
-    "react",
-    ["env", {
-      "targets": { "node": "4.1" },
-      "loose": true,
-      "modules": "commonjs"
-    }]
+    "@babel/preset-react",
+    "@babel/preset-env"
   ],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread",
-    "remove-comments"
-  ]
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "comments": false
 }

.eslintrc

@@ -2,15 +2,16 @@
   "extends": [
     "plugin:flowtype/recommended",
     "google",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "plugins": [
     "flowtype"
   ],
   "rules": {
     "max-len": [2, 100, 2]
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2016,
     "sourceType": "module",

README.md

@@ -48,16 +48,17 @@ 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/compat/app';
-import 'firebase/compat/auth';
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, EmailAuthProvider } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(config);
+const firebaseAuth = getAuth(firebaseApp);
 
 // Configure FirebaseUI.
 const uiConfig = {
@@ -67,20 +68,18 @@ 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() {
-  return (
-    <div>
-      <h1>My App</h1>
-      <p>Please sign-in:</p>
-      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
-    </div>
-  );
-}
+const SignInScreen = () => (
+  <div>
+    <h1>My App</h1>
+    <p>Please sign-in:</p>
+    <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebaseAuth} />
+  </div>
+);
 
 export default SignInScreen
 ```
@@ -93,38 +92,39 @@ 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/compat/app';
-import 'firebase/compat/auth';
+import { initializeApp } from 'firebase/app';
+import { getAuth, GoogleAuthProvider, EmailAuthProvider, onAuthStateChanged } from 'firebase/auth';
 
 // Configure Firebase.
 const config = {
   apiKey: 'AIzaSyAeue-AsYu76MMQlTOM-KlbYBlusW9c1FM',
   authDomain: 'myproject-1234.firebaseapp.com',
   // ...
 };
-firebase.initializeApp(config);
+const firebaseApp = initializeApp(config);
+const firebaseAuth = getAuth(firebaseApp);
 
 // 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.
     signInSuccessWithAuthResult: () => false,
   },
 };
 
-function SignInScreen() {
+const SignInScreen = () => {
   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(user => {
       setIsSignedIn(!!user);
     });
     return () => unregisterAuthObserver(); // Make sure we un-register Firebase observers when the component unmounts.
@@ -135,15 +135,15 @@ function SignInScreen() {
       <div>
         <h1>My App</h1>
         <p>Please sign-in:</p>
-        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebaseAuth} />
       </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 {firebaseAuth.currentUser.displayName}! You are now signed-in!</p>
+      <a onClick={() => firebaseAuth.signOut()}>Sign-out</a>
     </div>
   );
 }