Replace outdated react-firebaseui package

example/components/FirebaseAuth.js

@@ -1,8 +1,8 @@
 /* globals window */
 import React, { useEffect, useState } from 'react'
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
 import { getApp } from 'firebase/app'
 import { getAuth, EmailAuthProvider } from 'firebase/auth'
+import StyledFirebaseAuth from './StyledFirebaseAuth'
 
 // Note that next-firebase-auth inits Firebase for us,
 // so we don't need to.

example/components/StyledFirebaseAuth.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Auth, onAuthStateChanged } from 'firebase/auth'
+import 'firebaseui/dist/firebaseui.css'
+import { auth } from 'firebaseui'
+
+interface Props {
+  // The Firebase UI Web UI Config object.
+  // See: https://github.com/firebase/firebaseui-web#configuration
+  uiConfig: auth.Config
+  // Callback that will be passed the FirebaseUi instance before it is
+  // started. This allows access to certain configuration options such as
+  // disableAutoSignIn().
+  uiCallback?(ui: auth.AuthUI): void
+  // The Firebase App auth instance to use.
+  firebaseAuth: Auth // As firebaseui-web
+  className?: string
+}
+
+const StyledFirebaseAuth = ({
+  uiConfig,
+  firebaseAuth,
+  className,
+  uiCallback,
+}: Props) => {
+  const [firebaseui, setFirebaseui] = useState<
+    typeof import('firebaseui') | null
+  >(null)
+  const [userSignedIn, setUserSignedIn] = useState(false)
+  const elementRef = useRef(null)
+
+  useEffect(() => {
+    // Firebase UI only works on the Client. So we're loading the package only after
+    // the component has mounted, so that this works when doing server-side rendering.
+    async function setUI() {
+      setFirebaseui(await import('firebaseui'))
+    }
+
+    setUI()
+  }, [])
+
+  useEffect(() => {
+    if (firebaseui === null) return () => {}
+
+    // Get or Create a firebaseUI instance.
+    const firebaseUiWidget =
+      firebaseui.auth.AuthUI.getInstance() ||
+      new firebaseui.auth.AuthUI(firebaseAuth)
+    if (uiConfig.signInFlow === 'popup') firebaseUiWidget.reset()
+
+    // We track the auth state to reset firebaseUi if the user signs out.
+    const unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
+      if (!user && userSignedIn) firebaseUiWidget.reset()
+      setUserSignedIn(!!user)
+    })
+
+    // Trigger the callback if any was set.
+    if (uiCallback) uiCallback(firebaseUiWidget)
+
+    // Render the firebaseUi Widget.
+    firebaseUiWidget.start(elementRef.current!, uiConfig)
+
+    return () => {
+      unregisterAuthObserver()
+      firebaseUiWidget.reset()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [firebaseui, uiConfig])
+
+  return <div className={className} ref={elementRef} />
+}
+
+export default StyledFirebaseAuth

example/package.json

@@ -11,12 +11,12 @@
   "dependencies": {
     "firebase": "9.17.1",
     "firebase-admin": "^11.9.0",
+    "firebaseui": "^6.1.0",
     "next": "13.4.9",
     "next-absolute-url": "^1.2.2",
     "next-firebase-auth": "1.0.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-firebaseui": "^6.0.0"
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.4.9",
@@ -25,4 +25,4 @@
     "eslint-config-next": "^13.4.9",
     "typescript": "^5.1.6"
   }
-}
+}