react-firebaseuiを自前で管理するように

package.json

@@ -12,10 +12,10 @@
     "@types/node": "^18.11.18",
     "date-fns": "2.29.3",
     "firebase": "9.15.0",
+    "firebaseui": "^6.0.2",
     "react": "18.2.0",
     "react-copy-to-clipboard": "5.1.0",
     "react-dom": "18.2.0",
-    "react-firebaseui": "6.0.0",
     "react-scripts": "5.0.1",
     "typescript": "4.9.4",
     "web-vitals": "3.1.0"

src/components/Body/index.spec.tsx

@@ -11,7 +11,7 @@ jest.mock("firebase/auth", () => ({
   GoogleAuthProvider: jest.fn(),
 }));
 const mockecdGetAuth = getAuth;
-jest.mock('react-firebaseui/StyledFirebaseAuth');
+jest.mock('../StyledFirebaseAuth', () => jest.fn());
 
 describe('Bodyが正しく表示される', () => {
   it('firebaseの認証が表示されていない状態', () => {

src/components/SignInDialog/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Auth, GoogleAuthProvider } from 'firebase/auth';
-import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
+import StyledFirebaseAuth from '../StyledFirebaseAuth';
 
 export type SignInDialogProps = {
   firebaseAuth: Auth | null;

src/components/StyledFirebaseAuth/index.tsx

@@ -0,0 +1,47 @@
+// ref: https://github.com/firebase/firebaseui-web-react/pull/173#issuecomment-1151532176
+import React, { useEffect, useRef, useState } from 'react';
+import { onAuthStateChanged } from 'firebase/auth';
+import * as firebaseui from 'firebaseui';
+import 'firebaseui/dist/firebaseui.css';
+
+type Props = {
+  // The Firebase UI Web UI Config object.
+  // See: https://github.com/firebase/firebaseui-web#configuration
+  uiConfig: firebaseui.auth.Config;
+  firebaseAuth: any; // As firebaseui-web
+}
+
+const StyledFirebaseAuth = (props: Props) => {
+  const [userSignedIn, setUserSignedIn] = useState(false);
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    // Get or Create a firebaseUI instance.
+    const firebaseUiWidget = firebaseui.auth.AuthUI.getInstance()
+      || new firebaseui.auth.AuthUI(props.firebaseAuth);
+    if (props.uiConfig.signInFlow === 'popup') {
+      firebaseUiWidget.reset();
+    }
+
+    // We track the auth state to reset firebaseUi if the user signs out.
+    const unregisterAuthObserver = onAuthStateChanged(props.firebaseAuth, (user) => {
+      if (!user && userSignedIn) {
+        firebaseUiWidget.reset();
+      }
+      setUserSignedIn(!!user);
+    });
+
+    // Render the firebaseUi Widget.
+    // @ts-ignore
+    firebaseUiWidget.start(elementRef.current, props.uiConfig);
+
+    return () => {
+      unregisterAuthObserver();
+      firebaseUiWidget.reset();
+    };
+  }, [firebaseui, props.uiConfig]);
+
+  return <div ref={elementRef} />;
+};
+
+export default StyledFirebaseAuth;