Merge pull request #124 from HassanBahati/ft-add-useVerifyPasswordResetCodeMutation

feat: add useVerifyPasswordResetCodeMutation hook

Author: Ehesp

packages/react/src/auth/index.ts

@@ -30,6 +30,7 @@ export { useSignInWithEmailAndPasswordMutation } from "./useSignInWithEmailAndPa
 export { useUpdateCurrentUserMutation } from "./useUpdateCurrentUserMutation";
 // useValidatePasswordMutation
 // useVerifyPasswordResetCodeMutation
+export { useVerifyPasswordResetCodeMutation } from "./useVerifyPasswordResetCodeMutation";
 // useDeleteUserMutation
 export { useDeleteUserMutation } from "./useDeleteUserMutation";
 // useLinkWithCredentialMutation

packages/react/src/auth/useVerifyPasswordResetCodeMutation.test.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { describe, expect, test, beforeEach, afterEach, vi } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useVerifyPasswordResetCodeMutation } from "./useVerifyPasswordResetCodeMutation";
+import { auth, wipeAuth } from "~/testing-utils";
+import {
+  createUserWithEmailAndPassword,
+  sendPasswordResetEmail,
+} from "firebase/auth";
+import { waitForPasswordResetCode } from "./utils";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false },
+    mutations: { retry: false },
+  },
+});
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe("useVerifyPasswordResetCodeMutation", () => {
+  const email = "[email protected]";
+  const password = "TanstackQueryFirebase#123";
+
+  beforeEach(async () => {
+    queryClient.clear();
+    await wipeAuth();
+    await createUserWithEmailAndPassword(auth, email, password);
+    await sendPasswordResetEmail(auth, email);
+  });
+
+  afterEach(async () => {
+    vi.clearAllMocks();
+    await auth.signOut();
+  });
+
+  test("successfully verifies the reset code", async () => {
+    const code = await waitForPasswordResetCode(email);
+
+    const { result } = renderHook(
+      () => useVerifyPasswordResetCodeMutation(auth),
+      {
+        wrapper,
+      }
+    );
+
+    await act(async () => {
+      code && (await result.current.mutateAsync(code));
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    expect(result.current.data).toBe(email);
+    expect(result.current.variables).toBe(code);
+  });
+
+  test("handles invalid reset code", async () => {
+    const invalidCode = "invalid-reset-code";
+
+    const { result } = renderHook(
+      () => useVerifyPasswordResetCodeMutation(auth),
+      { wrapper }
+    );
+
+    await act(async () => {
+      await result.current.mutate(invalidCode);
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toBeDefined();
+    // TODO: Assert Firebase error for auth/invalid-action-code
+  });
+
+  test("handles empty reset code", async () => {
+    const emptyCode = "";
+
+    const { result } = renderHook(
+      () => useVerifyPasswordResetCodeMutation(auth),
+      { wrapper }
+    );
+
+    await act(async () => await result.current.mutate(emptyCode));
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toBeDefined();
+    // TODO: Assert Firebase error for auth/invalid-action-code
+  });
+});

packages/react/src/auth/useVerifyPasswordResetCodeMutation.ts

@@ -0,0 +1,22 @@
+import { useMutation, type UseMutationOptions } from "@tanstack/react-query";
+import {
+  type AuthError,
+  verifyPasswordResetCode,
+  type Auth,
+} from "firebase/auth";
+
+type AuthUseMutationOptions<
+  TData = unknown,
+  TError = Error,
+  TVariables = void
+> = Omit<UseMutationOptions<TData, TError, TVariables>, "mutationFn">;
+
+export function useVerifyPasswordResetCodeMutation(
+  auth: Auth,
+  options?: AuthUseMutationOptions<string, AuthError, string>
+) {
+  return useMutation<string, AuthError, string>({
+    ...options,
+    mutationFn: (code: string) => verifyPasswordResetCode(auth, code),
+  });
+}

packages/react/src/auth/utils.ts

@@ -0,0 +1,71 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * Reads the Firebase emulator debug log and extracts the password reset code
+ * @param email The email address for which the password reset was requested
+ * @returns The password reset code (oobCode) or null if not found
+ */
+async function getPasswordResetCodeFromLogs(
+  email: string
+): Promise<string | null> {
+  try {
+    // Read the firebase-debug.log file
+    const logPath = path.join(process.cwd(), "firebase-debug.log");
+    const logContent = await fs.promises.readFile(logPath, "utf8");
+
+    // Find the most recent password reset link for the given email
+    const lines = logContent.split("\n").reverse();
+    const resetLinkPattern = new RegExp(
+      `To reset the password for ${email.replace(
+        ".",
+        "\\."
+      )}.*?http://127\\.0\\.0\\.1:9099.*`,
+      "i"
+    );
+
+    for (const line of lines) {
+      const match = line.match(resetLinkPattern);
+      if (match) {
+        // Extract oobCode from the reset link
+        const url = match[0].match(/http:\/\/127\.0\.0\.1:9099\/.*?$/)?.[0];
+        if (url) {
+          const oobCode = new URL(url).searchParams.get("oobCode");
+          return oobCode;
+        }
+      }
+    }
+
+    return null;
+  } catch (error) {
+    console.error("Error reading Firebase debug log:", error);
+    return null;
+  }
+}
+
+/**
+ * Waits for the password reset code to appear in the logs
+ * @param email The email address for which the password reset was requested
+ * @param timeout Maximum time to wait in milliseconds
+ * @param interval Interval between checks in milliseconds
+ * @returns The password reset code or null if timeout is reached
+ */
+async function waitForPasswordResetCode(
+  email: string,
+  timeout = 5000,
+  interval = 100
+): Promise<string | null> {
+  const startTime = Date.now();
+
+  while (Date.now() - startTime < timeout) {
+    const code = await getPasswordResetCodeFromLogs(email);
+    if (code) {
+      return code;
+    }
+    await new Promise((resolve) => setTimeout(resolve, interval));
+  }
+
+  return null;
+}
+
+export { getPasswordResetCodeFromLogs, waitForPasswordResetCode };