React: Optionally treat loading as unauthenticated

npm-packages/convex/src/react/auth_helpers.test.tsx

@@ -1,9 +1,22 @@
 /**
  * @vitest-environment custom-vitest-environment.ts
  */
-import { test } from "vitest";
+import { render, screen } from "@testing-library/react";
 import React from "react";
+import { describe, expect, test } from "vitest";
 import { Authenticated, AuthLoading, Unauthenticated } from "./auth_helpers.js";
+import { ConvexReactClient } from "./client.js";
+import { ConvexProviderWithAuth } from "./index.js";
+
+function mockUseAuth(isLoading = true, isAuthenticated = false) {
+  return () => {
+    return {
+      isAuthenticated: isAuthenticated,
+      isLoading: isLoading,
+      fetchAccessToken: async () => null,
+    };
+  };
+}
 
 test("Helpers are valid children", () => {
   const _element = (
@@ -33,3 +46,35 @@ test("Helpers can take many children", () => {
     </div>
   );
 });
+
+describe("<Unauthenticated />", () => {
+  test("renders children when loading and prop loadingEqualsUnauthenticated is true", () => {
+    const convex = new ConvexReactClient("https://127.0.0.1:3001");
+
+    const { unmount } = render(
+      <ConvexProviderWithAuth client={convex} useAuth={mockUseAuth(true)}>
+        <Unauthenticated loadingEqualsUnauthenticated>
+          <div>Yay</div>
+        </Unauthenticated>
+      </ConvexProviderWithAuth>,
+    );
+
+    expect(screen.getByText("Yay")).toBeTruthy();
+    unmount();
+  });
+
+  test("shows no children when loading", () => {
+    const convex = new ConvexReactClient("https://127.0.0.1:3001");
+
+    const { unmount } = render(
+      <ConvexProviderWithAuth client={convex} useAuth={mockUseAuth(true)}>
+        <Unauthenticated>
+          <div>Yay</div>
+        </Unauthenticated>
+      </ConvexProviderWithAuth>,
+    );
+
+    expect(screen.queryByText("Yay")).toBeNull();
+    unmount();
+  });
+});

npm-packages/convex/src/react/auth_helpers.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { useConvexAuth } from "./ConvexAuthState.js";
 
 /**
@@ -17,12 +16,20 @@ export function Authenticated({ children }: { children: ReactNode }) {
 
 /**
  * Renders children if the client is using authentication but is not authenticated.
+ * If `loadingEqualsUnauthenticated` is `true`, also renders children while the
+ * client is authenticating.
  *
  * @public
  */
-export function Unauthenticated({ children }: { children: ReactNode }) {
+export function Unauthenticated({
+  children,
+  loadingEqualsUnauthenticated = false,
+}: {
+  children: ReactNode;
+  loadingEqualsUnauthenticated?: boolean;
+}) {
   const { isLoading, isAuthenticated } = useConvexAuth();
-  if (isLoading || isAuthenticated) {
+  if ((isLoading && !loadingEqualsUnauthenticated) || isAuthenticated) {
     return null;
   }
   return <>{children}</>;