feat: Add support for existing credentials in the react package

Author: exaby73

packages/firebaseui-react/src/auth/forms/email-link-form.tsx

@@ -16,7 +16,11 @@ import { TermsAndPrivacy } from "../../components/terms-and-privacy";
 
 export function EmailLinkForm() {
   const auth = useAuth();
-  const { language, enableAutoUpgradeAnonymous } = useConfig();
+  const {
+    language,
+    enableAutoUpgradeAnonymous,
+    enableHandleExistingCredential,
+  } = useConfig();
   const translations = useTranslations();
   const [formError, setFormError] = useState<string | null>(null);
   const [emailSent, setEmailSent] = useState(false);
@@ -65,6 +69,7 @@ export function EmailLinkForm() {
           translations,
           language,
           enableAutoUpgradeAnonymous,
+          enableHandleExistingCredential,
         });
       } catch (error) {
         if (error instanceof FirebaseUIError) {
@@ -74,7 +79,13 @@ export function EmailLinkForm() {
     };
 
     void completeSignIn();
-  }, [auth, translations, language, enableAutoUpgradeAnonymous]);
+  }, [
+    auth,
+    translations,
+    language,
+    enableAutoUpgradeAnonymous,
+    enableHandleExistingCredential,
+  ]);
 
   if (emailSent) {
     // TODO: Improve this UI

packages/firebaseui-react/src/auth/forms/email-password-form.tsx

@@ -25,7 +25,11 @@ export function EmailPasswordForm({
 }: EmailPasswordFormProps) {
   const auth = useAuth();
   const translations = useTranslations();
-  const { language, enableAutoUpgradeAnonymous } = useConfig();
+  const {
+    language,
+    enableAutoUpgradeAnonymous,
+    enableHandleExistingCredential,
+  } = useConfig();
   const [formError, setFormError] = useState<string | null>(null);
 
   // TODO: Do we need to memoize this?
@@ -50,6 +54,7 @@ export function EmailPasswordForm({
           translations,
           language,
           enableAutoUpgradeAnonymous,
+          enableHandleExistingCredential,
         });
       } catch (error) {
         if (error instanceof FirebaseUIError) {

packages/firebaseui-react/src/auth/forms/phone-form.tsx

@@ -298,7 +298,12 @@ export interface PhoneFormProps {
 
 export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
   const auth = useAuth();
-  const { language, recaptchaMode } = useConfig();
+  const {
+    language,
+    recaptchaMode,
+    enableAutoUpgradeAnonymous,
+    enableHandleExistingCredential,
+  } = useConfig();
   const translations = useTranslations();
   const [formError, setFormError] = useState<string | null>(null);
   const [confirmationResult, setConfirmationResult] =
@@ -423,6 +428,8 @@ export function PhoneForm({ resendDelay = 30 }: PhoneFormProps) {
       await fuiConfirmPhoneNumber(confirmationResult, code, {
         translations,
         language,
+        enableAutoUpgradeAnonymous,
+        enableHandleExistingCredential,
       });
     } catch (error) {
       if (error instanceof FirebaseUIError) {

packages/firebaseui-react/src/auth/oauth/oauth-button.tsx

@@ -1,10 +1,15 @@
 "use client";
 
-import { FirebaseUIError, fuiSignInWithOAuth } from "@firebase-ui/core";
+import {
+  FirebaseUIError,
+  fuiSignInWithOAuth,
+  getTranslation,
+} from "@firebase-ui/core";
 import type { AuthProvider } from "firebase/auth";
 import type { PropsWithChildren } from "react";
 import { Button } from "~/components/button";
 import { useAuth, useConfig, useTranslations } from "~/hooks";
+import { useState } from "react";
 
 export type OAuthButtonProps = PropsWithChildren<{
   provider: AuthProvider;
@@ -13,29 +18,44 @@ export type OAuthButtonProps = PropsWithChildren<{
 export function OAuthButton({ provider, children }: OAuthButtonProps) {
   const auth = useAuth();
   const translations = useTranslations();
-  const { language, enableAutoUpgradeAnonymous } = useConfig();
+  const {
+    language,
+    enableAutoUpgradeAnonymous,
+    enableHandleExistingCredential,
+  } = useConfig();
+  const [error, setError] = useState<string | null>(null);
 
   const handleOAuthSignIn = async () => {
+    setError(null);
     try {
       await fuiSignInWithOAuth(auth, provider, {
         translations,
         language,
         enableAutoUpgradeAnonymous,
+        enableHandleExistingCredential,
       });
     } catch (error) {
       if (error instanceof FirebaseUIError) {
-        // TODO: What happens here?
+        setError(error.message);
+        return;
       }
+      console.error(error);
+      setError(
+        getTranslation("errors", "unknownError", translations, language)
+      );
     }
   };
 
   return (
-    <Button
-      type="button"
-      onClick={handleOAuthSignIn}
-      className="fui-provider__button"
-    >
-      {children}
-    </Button>
+    <div>
+      <Button
+        type="button"
+        onClick={handleOAuthSignIn}
+        className="fui-provider__button"
+      >
+        {children}
+      </Button>
+      {error && <div className="fui-form__error">{error}</div>}
+    </div>
   );
 }