[auth] add useVerifyBeforeUpdateEmail hook

Author: skratchdot

auth/README.md

@@ -23,6 +23,7 @@ List of Auth hooks:
 - [useUpdateEmail](#useupdateemail)
 - [useUpdatePassword](#useupdatepassword)
 - [useUpdateProfile](#useupdateprofile)
+- [useVerifyBeforeUpdateEmail](#useverifybeforeupdateemail)
 - [useSendPasswordResetEmail](#usesendpasswordresetemail)
 - [useSendEmailVerification](#usesendemailverification)
 - [useSignOut](#usesignout)
@@ -469,7 +470,7 @@ The `useUpdateEmail` hook takes the following parameters:
 
 Returns:
 
-- `updateEmail(email: string)`: a function you can call to update the current user's email addres
+- `updateEmail(email: string)`: a function you can call to update the current user's email address
 - `updating`: A `boolean` to indicate whether the user update is processing
 - `error`: Any `Error` returned by Firebase when trying to update the user, or `undefined` if there is no error
 
@@ -632,6 +633,63 @@ const UpdateProfile = () => {
 };
 ```
 
+### useVerifyBeforeUpdateEmail
+
+```js
+const [verifyBeforeUpdateEmail, updating, error] = useVerifyBeforeUpdateEmail(auth);
+```
+
+Verify and update the current user's email address. Wraps the underlying `auth.verifyBeforeUpdateEmail` method and provides additional `updating` and `error` information.
+
+The `useVerifyBeforeUpdateEmail` hook takes the following parameters:
+
+- `auth`: `Auth` instance for the app you would like to monitor
+
+Returns:
+
+- `verifyBeforeUpdateEmail(email: string, actionCodeSettings: ActionCodeSettings | null)`: a function you can call to verify and update the current user's email address
+- `updating`: A `boolean` to indicate whether the user update is processing
+- `error`: Any `Error` returned by Firebase when trying to update the user, or `undefined` if there is no error
+
+#### Full Example
+
+```jsx
+import { useVerifyBeforeUpdateEmail } from 'react-firebase-hooks/auth';
+
+const UpdateEmail = () => {
+  const [email, setEmail] = useState('');
+  const [verifyBeforeUpdateEmail, updating, error] = useVerifyBeforeUpdateEmail(auth);
+
+  if (error) {
+    return (
+      <div>
+        <p>Error: {error.message}</p>
+      </div>
+    );
+  }
+  if (updating) {
+    return <p>Updating...</p>;
+  }
+  return (
+    <div className="App">
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <button
+        onClick={async () => {
+          await verifyBeforeUpdateEmail(email);
+          alert('Please check your email to verify your updated email address');
+        }}
+      >
+        Update email
+      </button>
+    </div>
+  );
+};
+```
+
 ### useSendPasswordResetEmail
 
 ```js

auth/index.ts

@@ -24,9 +24,11 @@ export {
   useUpdateEmail,
   useUpdatePassword,
   useUpdateProfile,
+  useVerifyBeforeUpdateEmail,
   UpdateEmailHook,
   UpdatePasswordHook,
   UpdateProfileHook,
+  VerifyBeforeUpdateEmailHook,
 } from './useUpdateUser';
 
 export { EmailAndPasswordActionHook, SignInWithPopupHook } from './types';

auth/useUpdateUser.ts

@@ -1,9 +1,11 @@
 import {
+  ActionCodeSettings,
   Auth,
   AuthError,
   updateEmail as fbUpdateEmail,
   updatePassword as fbUpdatePassword,
   updateProfile as fbUpdateProfile,
+  verifyBeforeUpdateEmail as fbVerifyBeforeUpdateEmail,
 } from 'firebase/auth';
 import { useMemo, useState } from 'react';
 
@@ -21,6 +23,12 @@ export type UpdatePasswordHook = UpdateUserHook<
 export type UpdateProfileHook = UpdateUserHook<
   (profile: Profile) => Promise<void>
 >;
+export type VerifyBeforeUpdateEmailHook = UpdateUserHook<
+  (
+    email: string,
+    actionCodeSettings: ActionCodeSettings | null
+  ) => Promise<void>
+>;
 
 export const useUpdateEmail = (auth: Auth): UpdateEmailHook => {
   const [error, setError] = useState<AuthError>();
@@ -93,3 +101,36 @@ export const useUpdateProfile = (auth: Auth): UpdateProfileHook => {
   const resArray: UpdateProfileHook = [updateProfile, loading, error];
   return useMemo<UpdateProfileHook>(() => resArray, resArray);
 };
+
+export const useVerifyBeforeUpdateEmail = (
+  auth: Auth
+): VerifyBeforeUpdateEmailHook => {
+  const [error, setError] = useState<AuthError>();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const verifyBeforeUpdateEmail = async (
+    email: string,
+    actionCodeSettings: ActionCodeSettings | null
+  ) => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      if (auth.currentUser) {
+        await fbVerifyBeforeUpdateEmail(auth.currentUser, email, actionCodeSettings);
+      } else {
+        setError(new Error('No user is logged in') as AuthError);
+      }
+    } catch (err) {
+      setError(err as AuthError);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const resArray: VerifyBeforeUpdateEmailHook = [
+    verifyBeforeUpdateEmail,
+    loading,
+    error,
+  ];
+  return useMemo<VerifyBeforeUpdateEmailHook>(() => resArray, resArray);
+};