Fix external auth buttons in React Strict Mode

.changeset/nice-walls-attend.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix race condition in React Strict Mode when fetching external authenticators

src/auth/components/LoginPage/LoginPage.test.tsx

@@ -1,7 +1,8 @@
 import { AvailableExternalAuthenticationsQuery } from "@dashboard/graphql";
+import Wrapper from "@test/wrapper";
 import { render, screen, waitFor } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
-import * as React from "react";
+import { MemoryRouter } from "react-router-dom";
 
 import LoginPage from "./LoginPage";
 
@@ -22,16 +23,59 @@ const defaultProps = {
   onSubmit: jest.fn(),
 };
 
-jest.mock("react-router-dom", () => ({
-  MemoryRouter: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-  Link: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
+const renderLoginPage = (props = {}) =>
+  render(
+    <Wrapper>
+      <MemoryRouter>
+        <LoginPage lastLoginMethod={null} {...defaultProps} {...props} />
+      </MemoryRouter>
+    </Wrapper>,
+  );
 
 describe("LoginPage", () => {
   describe("External Authentication", () => {
+    it("renders external authentication buttons when provided", () => {
+      // Arrange & Act
+      renderLoginPage();
+
+      // Assert
+      expect(screen.getByTestId("external-authentication")).toBeInTheDocument();
+    });
+
+    it("does not render external authentication buttons when empty array", () => {
+      // Arrange & Act
+      renderLoginPage({ externalAuthentications: [] });
+
+      // Assert
+      expect(screen.queryByTestId("external-authentication")).not.toBeInTheDocument();
+    });
+
+    it("does not render external authentication buttons when undefined", () => {
+      // Arrange & Act
+      renderLoginPage({ externalAuthentications: undefined });
+
+      // Assert
+      expect(screen.queryByTestId("external-authentication")).not.toBeInTheDocument();
+    });
+
+    it("renders 'Continue with Saleor Cloud' for cloud auth plugin", () => {
+      // Arrange
+      const cloudAuth = {
+        id: "cloud_auth.CloudAuthorizationPlugin",
+        name: "Cloud Auth",
+        __typename: "ExternalAuthentication",
+      } as AuthType[0];
+
+      // Act
+      renderLoginPage({ externalAuthentications: [cloudAuth] });
+
+      // Assert
+      expect(screen.getByText("Continue with Saleor Cloud")).toBeInTheDocument();
+    });
+
     it("sets optimisticLoaderAuthId when clicking external auth button", async () => {
       // Arrange & Act
-      render(<LoginPage lastLoginMethod={null} {...defaultProps} />);
+      renderLoginPage();
 
       const authButton = screen.getByRole("button", { name: "Cloud" });
 
@@ -52,9 +96,7 @@ describe("LoginPage", () => {
       ] as AuthType;
 
       // Act
-      render(
-        <LoginPage lastLoginMethod={null} {...defaultProps} externalAuthentications={twoAuths} />,
-      );
+      renderLoginPage({ externalAuthentications: twoAuths });
 
       const oidcButton = screen.getByRole("button", { name: "OIDC" });
       const cloudButton = screen.getByRole("button", { name: "Cloud" });

src/auth/views/Login.tsx

@@ -1,7 +1,7 @@
-import { useAvailableExternalAuthenticationsLazyQuery } from "@dashboard/graphql";
+import { useAvailableExternalAuthenticationsQuery } from "@dashboard/graphql";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { getAppMountUriForRedirect } from "@dashboard/utils/urls";
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import urlJoin from "url-join";
 import useRouter from "use-react-router";
 
@@ -21,18 +21,26 @@ const LoginView = ({ params }: LoginViewProps) => {
   const { location } = useRouter();
   const { login, requestLoginByExternalPlugin, loginByExternalPlugin, authenticating, errors } =
     useUser();
-  const [
-    queryExternalAuthentications,
-    { data: externalAuthentications, loading: externalAuthenticationsLoading },
-  ] = useAvailableExternalAuthenticationsLazyQuery();
   const {
     fallbackUri,
     requestedExternalPluginId,
     isCallbackPath,
     setFallbackUri,
     setRequestedExternalPluginId,
   } = useAuthParameters();
+
+  // Determine if we should skip the query (when we're on callback path with auth params)
+  const { code, state } = params;
+  const isExternalAuthCallback = !!(code && state && isCallbackPath);
+
+  const { data: externalAuthentications, loading: externalAuthenticationsLoading } =
+    useAvailableExternalAuthenticationsQuery({
+      skip: isExternalAuthCallback,
+    });
+
   const { lastLoginMethod, setLastLoginMethod } = useLastLoginMethod();
+  // Track if external auth callback has been processed to avoid double-processing in Strict Mode
+  const externalAuthProcessedRef = useRef(false);
 
   const handleSubmit = async (data: LoginFormData) => {
     if (!login) {
@@ -61,38 +69,49 @@ const LoginView = ({ params }: LoginViewProps) => {
       window.location.href = data.authorizationUrl;
     }
   };
-  const handleExternalAuthentication = async (code: string, state: string) => {
-    await loginByExternalPlugin!(requestedExternalPluginId, {
-      code,
-      state,
-    });
-    setRequestedExternalPluginId(null);
-    navigate(fallbackUri);
-    setFallbackUri(null);
-  };
+  const handleExternalAuthentication = useCallback(
+    async (code: string, state: string) => {
+      await loginByExternalPlugin!(requestedExternalPluginId, {
+        code,
+        state,
+      });
+      setRequestedExternalPluginId(null);
+      navigate(fallbackUri);
+      setFallbackUri(null);
+    },
+    [
+      loginByExternalPlugin,
+      requestedExternalPluginId,
+      navigate,
+      fallbackUri,
+      setRequestedExternalPluginId,
+      setFallbackUri,
+    ],
+  );
 
+  // Reset the ref when we're no longer on a callback path, allowing new auth attempts
   useEffect(() => {
-    const { code, state } = params;
-    const externalAuthParamsExist = code && state && isCallbackPath;
-
-    if (!externalAuthParamsExist) {
-      queryExternalAuthentications();
+    if (!isExternalAuthCallback) {
+      externalAuthProcessedRef.current = false;
     }
-  }, [isCallbackPath, params, queryExternalAuthentications]);
+  }, [isExternalAuthCallback]);
+
   useEffect(() => {
-    const { code, state } = params;
-    const externalAuthParamsExist = code && state && isCallbackPath;
     const externalAuthNotPerformed = !authenticating && !errors.length;
 
-    if (externalAuthParamsExist && externalAuthNotPerformed) {
-      handleExternalAuthentication(code, state);
+    // Guard against double-processing in React Strict Mode
+    if (isExternalAuthCallback && externalAuthNotPerformed && !externalAuthProcessedRef.current) {
+      externalAuthProcessedRef.current = true;
+      handleExternalAuthentication(code!, state!);
     }
-
-    return () => {
-      setRequestedExternalPluginId(null);
-      setFallbackUri(null);
-    };
-  }, []);
+  }, [
+    isExternalAuthCallback,
+    authenticating,
+    errors.length,
+    handleExternalAuthentication,
+    code,
+    state,
+  ]);
 
   return (
     <LoginPage