catch firebase auth unauthorized domain error

app/components/auth/index.tsx

@@ -4,12 +4,15 @@ import type { UserCredential } from "firebase/auth";
 import { getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { useState } from "react";
 import IconGoogle from "../svg/icon-google";
+import UnauthorizedDomain from "../error/UnauthorizedDomain";
 
 export const LoginButton = ({ firebaseConfig }: any) => {
   const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
   // TODO error handling / web-api-key missing
   const auth = getAuth(app);
 
+  const [error, setError] = useState<any>(null);
+
   const submit = useSubmit();
 
   const handleLogin = async () => {
@@ -21,21 +24,26 @@ export const LoginButton = ({ firebaseConfig }: any) => {
         });
       },
       (error: any) => {
-        // TODO error handling / auth domain missing
-        throw new Error(error);
+        console.error(error);
+        setError(error);
       }
     );
   };
 
   return (
-    <button className="btn btn-ghost" onClick={handleLogin}>
-      <span className="flex items-center gap-1">
-        <IconGoogle />
-        <span className="w-20 sm:w-full overflow-hidden text-ellipsis whitespace-nowrap">
-          Sign in with Google
+    <>
+      {error && error.code === "auth/unauthorized-domain" && (
+        <UnauthorizedDomain projectId={firebaseConfig?.projectId} />
+      )}
+      <button className="btn btn-ghost" onClick={handleLogin}>
+        <span className="flex items-center gap-1">
+          <IconGoogle />
+          <span className="w-20 sm:w-full overflow-hidden text-ellipsis whitespace-nowrap">
+            Sign in with Google
+          </span>
         </span>
-      </span>
-    </button>
+      </button>
+    </>
   );
 };
 

app/components/error/UnauthorizedDomain.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+
+const UnauthorizedDomain = ({ projectId }: any) => {
+  const [open, setOpen] = useState(true);
+  if (!open) {
+    return null;
+  }
+  console.log(projectId);
+  return (
+    <div className="fixed top-0 left-0 right-0">
+      <div className="w-full max-w-screen-md md:mx-auto alert alert-error shadow-lg px-2 py-1 mt-1">
+        <div>
+          <div>
+            <h3 className="font-bold">Unauthorized domain</h3>
+            <div className="text-xs">
+              If you are the app developer{" "}
+              <a
+                className="link"
+                target="_blank"
+                href={`https://console.firebase.google.com/u/0/project/${projectId}/authentication/settings`}
+              >
+                click here
+              </a>{" "}
+              to whitelist domain
+            </div>
+          </div>
+        </div>
+
+        <button
+          className="btn btn-error right-0"
+          onClick={() => setOpen(false)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="stroke-current flex-shrink-0 h-6 w-6"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default UnauthorizedDomain;

app/routes/roadmap/index.tsx

@@ -90,7 +90,6 @@ export default function Items() {
         <RoadmapItems items={sortedItems} userVotes={userVotes} />
       )}
       {errors.map((error: any) => {
-        console.log(error);
         if (error.code === 9) {
           return <MissingFirestoreIndex error={error} />;
         }