feat(react): Extract useSignInWithProvider for shadcn usage

Author: Ehesp

packages/react/src/auth/index.ts

@@ -64,4 +64,4 @@ export {
   type MicrosoftSignInButtonProps,
 } from "./oauth/microsoft-sign-in-button";
 export { TwitterSignInButton, TwitterLogo, type TwitterSignInButtonProps } from "./oauth/twitter-sign-in-button";
-export { OAuthButton, type OAuthButtonProps } from "./oauth/oauth-button";
+export { OAuthButton, useSignInWithProvider, type OAuthButtonProps } from "./oauth/oauth-button";

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

@@ -14,8 +14,8 @@
  */
 
 import { describe, it, expect, vi, afterEach, beforeEach } from "vitest";
-import { render, screen, fireEvent, cleanup } from "@testing-library/react";
-import { OAuthButton } from "./oauth-button";
+import { render, screen, fireEvent, cleanup, renderHook, act } from "@testing-library/react";
+import { OAuthButton, useSignInWithProvider } from "./oauth-button";
 import { CreateFirebaseUIProvider, createMockUI } from "~/tests/utils";
 import { enUs, registerLocale } from "@firebase-ui/translations";
 import type { AuthProvider, UserCredential } from "firebase/auth";
@@ -224,3 +224,150 @@ describe("<OAuthButton />", () => {
     expect(screen.queryByText(expectedError)).toBeNull();
   });
 });
+
+describe("useSignInWithProvider", () => {
+  const mockGoogleProvider = { providerId: "google.com" } as AuthProvider;
+  const mockFacebookProvider = { providerId: "facebook.com" } as AuthProvider;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("returns error and callback", () => {
+    const ui = createMockUI();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result } = renderHook(() => useSignInWithProvider(mockGoogleProvider), { wrapper });
+
+    expect(result.current.error).toBeNull();
+    expect(typeof result.current.callback).toBe("function");
+  });
+
+  it("calls signInWithProvider when callback is executed", async () => {
+    const mockSignInWithProvider = vi.mocked(signInWithProvider);
+    const ui = createMockUI();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result } = renderHook(() => useSignInWithProvider(mockGoogleProvider), { wrapper });
+
+    await act(async () => {
+      await result.current.callback();
+    });
+
+    expect(mockSignInWithProvider).toHaveBeenCalledTimes(1);
+    expect(mockSignInWithProvider).toHaveBeenCalledWith(ui.get(), mockGoogleProvider);
+  });
+
+  it("sets error state when FirebaseUIError occurs", async () => {
+    const { FirebaseUIError } = await import("@firebase-ui/core");
+    const mockSignInWithProvider = vi.mocked(signInWithProvider);
+    const ui = createMockUI();
+    const mockError = new FirebaseUIError(
+      ui.get(),
+      new FirebaseError("auth/user-not-found", "No account found with this email address")
+    );
+    mockSignInWithProvider.mockRejectedValue(mockError);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result } = renderHook(() => useSignInWithProvider(mockGoogleProvider), { wrapper });
+
+    await act(async () => {
+      await result.current.callback();
+    });
+
+    expect(result.current.error).toBe("No account found with this email address");
+  });
+
+  it("sets unknown error message when non-Firebase error occurs", async () => {
+    const mockSignInWithProvider = vi.mocked(signInWithProvider);
+    const regularError = new Error("Regular error");
+    mockSignInWithProvider.mockRejectedValue(regularError);
+
+    // Mock console.error to prevent test output noise
+    const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const ui = createMockUI({
+      locale: registerLocale("test", {
+        errors: {
+          unknownError: "unknownError",
+        },
+      }),
+    });
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result } = renderHook(() => useSignInWithProvider(mockGoogleProvider), { wrapper });
+
+    await act(async () => {
+      await result.current.callback();
+    });
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(regularError);
+    expect(result.current.error).toBe("unknownError");
+
+    // Restore console.error
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("clears error when callback is called again", async () => {
+    const { FirebaseUIError } = await import("@firebase-ui/core");
+    const mockSignInWithProvider = vi.mocked(signInWithProvider);
+    const ui = createMockUI();
+
+    // First call fails, second call succeeds
+    mockSignInWithProvider
+      .mockRejectedValueOnce(
+        new FirebaseUIError(ui.get(), new FirebaseError("auth/wrong-password", "Incorrect password"))
+      )
+      .mockResolvedValueOnce({} as UserCredential);
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result } = renderHook(() => useSignInWithProvider(mockGoogleProvider), { wrapper });
+
+    // First call - should set error
+    await act(async () => {
+      await result.current.callback();
+    });
+
+    expect(result.current.error).toBe("Incorrect password");
+
+    // Second call - should clear error
+    await act(async () => {
+      await result.current.callback();
+    });
+
+    expect(result.current.error).toBeNull();
+  });
+
+  it("maintains stable callback reference when provider changes", () => {
+    const ui = createMockUI();
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <CreateFirebaseUIProvider ui={ui}>{children}</CreateFirebaseUIProvider>
+    );
+
+    const { result, rerender } = renderHook(({ provider }) => useSignInWithProvider(provider), {
+      wrapper,
+      initialProps: { provider: mockGoogleProvider },
+    });
+
+    const firstCallback = result.current.callback;
+
+    // Change provider
+    rerender({ provider: mockFacebookProvider });
+
+    // Callback should be different due to dependency change
+    expect(result.current.callback).not.toBe(firstCallback);
+  });
+});

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

@@ -19,7 +19,7 @@
 import { FirebaseUIError, getTranslation, signInWithProvider } from "@firebase-ui/core";
 import type { AuthProvider } from "firebase/auth";
 import type { PropsWithChildren } from "react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { Button } from "~/components/button";
 import { useUI } from "~/hooks";
 
@@ -28,12 +28,11 @@ export type OAuthButtonProps = PropsWithChildren<{
   themed?: boolean | string;
 }>;
 
-export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
+export function useSignInWithProvider(provider: AuthProvider) {
   const ui = useUI();
-
   const [error, setError] = useState<string | null>(null);
 
-  const handleOAuthSignIn = async () => {
+  const callback = useCallback(async () => {
     setError(null);
     try {
       await signInWithProvider(ui, provider);
@@ -45,7 +44,15 @@ export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
       console.error(error);
       setError(getTranslation(ui, "errors", "unknownError"));
     }
-  };
+  }, [ui, provider, setError]);
+
+  return { error, callback };
+}
+
+export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
+  const ui = useUI();
+
+  const { error, callback } = useSignInWithProvider(provider);
 
   return (
     <div>
@@ -54,7 +61,7 @@ export function OAuthButton({ provider, children, themed }: OAuthButtonProps) {
         data-themed={themed}
         data-provider={provider.providerId}
         disabled={ui.state !== "idle"}
-        onClick={handleOAuthSignIn}
+        onClick={callback}
         className="fui-provider__button"
       >
         {children}