fix: Update UI state + example app

Ehesp · Ehesp · commit 469cf122dfd3 · 2025-04-08T12:18:39.000+01:00
diff --git a/examples/nextjs/lib/firebase/clientApp.ts b/examples/nextjs/lib/firebase/clientApp.ts
@@ -13,8 +13,6 @@ export const auth = getAuth(firebaseApp);
 
 export const ui = initializeUI({
   app: firebaseApp,
-  tosUrl: "https://www.google.com",
-  privacyPolicyUrl: "https://www.google.com",
   behaviors: [autoAnonymousLogin()],
   translations: [
     customLanguage(english.locale, {
diff --git a/examples/nextjs/lib/firebase/ui.tsx b/examples/nextjs/lib/firebase/ui.tsx
@@ -8,5 +8,15 @@ export function FirebaseUIProvider({
 }: {
   children: React.ReactNode;
 }) {
-  return <ConfigProvider ui={ui}>{children}</ConfigProvider>;
+  return (
+    <ConfigProvider
+      ui={ui}
+      policies={{
+        termsOfServiceUrl: "https://www.google.com",
+        privacyPolicyUrl: "https://www.google.com",
+      }}
+    >
+      {children}
+    </ConfigProvider>
+  );
 }
diff --git a/packages/firebaseui-core/src/auth.ts b/packages/firebaseui-core/src/auth.ts
@@ -57,10 +57,11 @@ export async function signInWithEmailAndPassword(
 
     ui.setState('signing-in');
     const result = await signInWithCredential(auth, credential);
-    ui.setState('idle');
     return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -83,10 +84,11 @@ export async function createUserWithEmailAndPassword(
 
     ui.setState('creating-user');
     const result = await _createUserWithEmailAndPassword(auth, email, password);
-    ui.setState('idle');
     return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -98,11 +100,11 @@ export async function signInWithPhoneNumber(
   try {
     const auth = getAuth(ui.app);
     ui.setState('signing-in');
-    const result = await _signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
-    ui.setState('idle');
-    return result;
+    return await _signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -126,10 +128,11 @@ export async function confirmPhoneNumber(
 
     ui.setState('signing-in');
     const result = await signInWithCredential(auth, credential);
-    ui.setState('idle');
     return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -138,9 +141,10 @@ export async function sendPasswordResetEmail(ui: FirebaseUIConfiguration, email:
     const auth = getAuth(ui.app);
     ui.setState('sending-password-reset-email');
     await _sendPasswordResetEmail(auth, email);
-    ui.setState('idle');
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -156,10 +160,11 @@ export async function sendSignInLinkToEmail(ui: FirebaseUIConfiguration, email:
 
     ui.setState('sending-sign-in-link-to-email');
     await _sendSignInLinkToEmail(auth, email, actionCodeSettings);
-    ui.setState('idle');
     window.localStorage.setItem('emailForSignIn', email);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -181,10 +186,11 @@ export async function signInWithEmailLink(
 
     ui.setState('signing-in');
     const result = await signInWithCredential(auth, credential);
-    ui.setState('idle');
     return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -193,10 +199,11 @@ export async function signInAnonymously(ui: FirebaseUIConfiguration): Promise<Us
     const auth = getAuth(ui.app);
     ui.setState('signing-in');
     const result = await _signInAnonymously(auth);
-    ui.setState('idle');
     return handlePendingCredential(ui, result);
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -216,6 +223,8 @@ export async function signInWithOAuth(ui: FirebaseUIConfiguration, provider: Aut
     // If we support popups, we'd need to modify state here.
   } catch (error) {
     handleFirebaseError(ui, error);
+  } finally {
+    ui.setState('idle');
   }
 }
 
@@ -239,6 +248,7 @@ export async function completeEmailLinkSignIn(
   } catch (error) {
     handleFirebaseError(ui, error);
   } finally {
+    ui.setState('idle');
     window.localStorage.removeItem('emailForSignIn');
   }
 }
diff --git a/packages/firebaseui-react/src/auth/forms/email-link-form.tsx b/packages/firebaseui-react/src/auth/forms/email-link-form.tsx
@@ -70,8 +70,7 @@ export function EmailLinkForm(_: EmailLinkFormProps) {
   }, [auth, ui.translations]);
 
   if (emailSent) {
-    // TODO: Improve this UI
-    return <div>{getTranslation(ui, "messages", "signInLinkSent")}</div>;
+    return <div className="fui-success">{getTranslation(ui, "messages", "signInLinkSent")}</div>;
   }
 
   return (
diff --git a/packages/firebaseui-react/src/auth/forms/forgot-password-form.tsx b/packages/firebaseui-react/src/auth/forms/forgot-password-form.tsx
@@ -58,7 +58,7 @@ export function ForgotPasswordForm({
 
   if (emailSent) {
     return (
-      <div className="fui-form__success">
+      <div className="fui-success">
         {getTranslation(ui, "messages", "checkEmailForReset")}
       </div>
     );
diff --git a/packages/firebaseui-react/src/components/policies.tsx b/packages/firebaseui-react/src/components/policies.tsx
@@ -69,7 +69,7 @@ export function Policies() {
               onClick={() => handleUrl(termsOfServiceUrl)}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-text-muted hover:underline text-xs"
+              className="text-text-muted hover:underline font-semibold"
             >
               {termsText}
             </a>
@@ -82,7 +82,7 @@ export function Policies() {
               onClick={() => handleUrl(privacyPolicyUrl)}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-text-muted hover:underline text-xs"
+              className="text-text-muted hover:underline font-semibold"
             >
               {privacyText}
             </a>
diff --git a/packages/firebaseui-styles/dist.css b/packages/firebaseui-styles/dist.css
diff --git a/packages/firebaseui-styles/src/base.css b/packages/firebaseui-styles/src/base.css

Original file line number	Diff line number	Diff line change
`@@ -57,10 +57,11 @@ export async function signInWithEmailAndPassword(`
`57`	`57`
`58`	`58`	`ui.setState('signing-in');`
`59`	`59`	`const result = await signInWithCredential(auth, credential);`
`60`		`- ui.setState('idle');`
`61`	`60`	`return handlePendingCredential(ui, result);`
`62`	`61`	`} catch (error) {`
`63`	`62`	`handleFirebaseError(ui, error);`
	`63`	`+ } finally {`
	`64`	`+ ui.setState('idle');`
`64`	`65`	`}`
`65`	`66`	`}`
`66`	`67`
`@@ -83,10 +84,11 @@ export async function createUserWithEmailAndPassword(`
`83`	`84`
`84`	`85`	`ui.setState('creating-user');`
`85`	`86`	`const result = await _createUserWithEmailAndPassword(auth, email, password);`
`86`		`- ui.setState('idle');`
`87`	`87`	`return handlePendingCredential(ui, result);`
`88`	`88`	`} catch (error) {`
`89`	`89`	`handleFirebaseError(ui, error);`
	`90`	`+ } finally {`
	`91`	`+ ui.setState('idle');`
`90`	`92`	`}`
`91`	`93`	`}`
`92`	`94`
`@@ -98,11 +100,11 @@ export async function signInWithPhoneNumber(`
`98`	`100`	`try {`
`99`	`101`	`const auth = getAuth(ui.app);`
`100`	`102`	`ui.setState('signing-in');`
`101`		`- const result = await _signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);`
`102`		`- ui.setState('idle');`
`103`		`- return result;`
	`103`	`+ return await _signInWithPhoneNumber(auth, phoneNumber, recaptchaVerifier);`
`104`	`104`	`} catch (error) {`
`105`	`105`	`handleFirebaseError(ui, error);`
	`106`	`+ } finally {`
	`107`	`+ ui.setState('idle');`
`106`	`108`	`}`
`107`	`109`	`}`
`108`	`110`
`@@ -126,10 +128,11 @@ export async function confirmPhoneNumber(`
`126`	`128`
`127`	`129`	`ui.setState('signing-in');`
`128`	`130`	`const result = await signInWithCredential(auth, credential);`
`129`		`- ui.setState('idle');`
`130`	`131`	`return handlePendingCredential(ui, result);`
`131`	`132`	`} catch (error) {`
`132`	`133`	`handleFirebaseError(ui, error);`
	`134`	`+ } finally {`
	`135`	`+ ui.setState('idle');`
`133`	`136`	`}`
`134`	`137`	`}`
`135`	`138`
`@@ -138,9 +141,10 @@ export async function sendPasswordResetEmail(ui: FirebaseUIConfiguration, email:`
`138`	`141`	`const auth = getAuth(ui.app);`
`139`	`142`	`ui.setState('sending-password-reset-email');`
`140`	`143`	`await _sendPasswordResetEmail(auth, email);`
`141`		`- ui.setState('idle');`
`142`	`144`	`} catch (error) {`
`143`	`145`	`handleFirebaseError(ui, error);`
	`146`	`+ } finally {`
	`147`	`+ ui.setState('idle');`
`144`	`148`	`}`
`145`	`149`	`}`
`146`	`150`
`@@ -156,10 +160,11 @@ export async function sendSignInLinkToEmail(ui: FirebaseUIConfiguration, email:`
`156`	`160`
`157`	`161`	`ui.setState('sending-sign-in-link-to-email');`
`158`	`162`	`await _sendSignInLinkToEmail(auth, email, actionCodeSettings);`
`159`		`- ui.setState('idle');`
`160`	`163`	`window.localStorage.setItem('emailForSignIn', email);`
`161`	`164`	`} catch (error) {`
`162`	`165`	`handleFirebaseError(ui, error);`
	`166`	`+ } finally {`
	`167`	`+ ui.setState('idle');`
`163`	`168`	`}`
`164`	`169`	`}`
`165`	`170`
`@@ -181,10 +186,11 @@ export async function signInWithEmailLink(`
`181`	`186`
`182`	`187`	`ui.setState('signing-in');`
`183`	`188`	`const result = await signInWithCredential(auth, credential);`
`184`		`- ui.setState('idle');`
`185`	`189`	`return handlePendingCredential(ui, result);`
`186`	`190`	`} catch (error) {`
`187`	`191`	`handleFirebaseError(ui, error);`
	`192`	`+ } finally {`
	`193`	`+ ui.setState('idle');`
`188`	`194`	`}`
`189`	`195`	`}`
`190`	`196`
`@@ -193,10 +199,11 @@ export async function signInAnonymously(ui: FirebaseUIConfiguration): Promise<Us`
`193`	`199`	`const auth = getAuth(ui.app);`
`194`	`200`	`ui.setState('signing-in');`
`195`	`201`	`const result = await _signInAnonymously(auth);`
`196`		`- ui.setState('idle');`
`197`	`202`	`return handlePendingCredential(ui, result);`
`198`	`203`	`} catch (error) {`
`199`	`204`	`handleFirebaseError(ui, error);`
	`205`	`+ } finally {`
	`206`	`+ ui.setState('idle');`
`200`	`207`	`}`
`201`	`208`	`}`
`202`	`209`
`@@ -216,6 +223,8 @@ export async function signInWithOAuth(ui: FirebaseUIConfiguration, provider: Aut`
`216`	`223`	`// If we support popups, we'd need to modify state here.`
`217`	`224`	`} catch (error) {`
`218`	`225`	`handleFirebaseError(ui, error);`
	`226`	`+ } finally {`
	`227`	`+ ui.setState('idle');`
`219`	`228`	`}`
`220`	`229`	`}`
`221`	`230`
`@@ -239,6 +248,7 @@ export async function completeEmailLinkSignIn(`
`239`	`248`	`} catch (error) {`
`240`	`249`	`handleFirebaseError(ui, error);`
`241`	`250`	`} finally {`
	`251`	`+ ui.setState('idle');`
`242`	`252`	`window.localStorage.removeItem('emailForSignIn');`
`243`	`253`	`}`
`244`	`254`	`}`
Original file line number	Diff line number	Diff line change
`@@ -70,8 +70,7 @@ export function EmailLinkForm(_: EmailLinkFormProps) {`
`70`	`70`	`}, [auth, ui.translations]);`
`71`	`71`
`72`	`72`	`if (emailSent) {`
`73`		`- // TODO: Improve this UI`
`74`		`- return <div>{getTranslation(ui, "messages", "signInLinkSent")}</div>;`
	`73`	`+ return <div className="fui-success">{getTranslation(ui, "messages", "signInLinkSent")}</div>;`
`75`	`74`	`}`
`76`	`75`
`77`	`76`	`return (`