diff --git a/npm-packages/convex/src/react/auth_helpers.test.tsx b/npm-packages/convex/src/react/auth_helpers.test.tsx
index c4facc8f6..b03c80cde 100644
--- a/npm-packages/convex/src/react/auth_helpers.test.tsx
+++ b/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", () => {
);
});
+
+describe("", () => {
+ test("renders children when loading and prop loadingEqualsUnauthenticated is true", () => {
+ const convex = new ConvexReactClient("https://127.0.0.1:3001");
+
+ const { unmount } = render(
+
+
+ Yay
+
+ ,
+ );
+
+ 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(
+
+
+ Yay
+
+ ,
+ );
+
+ expect(screen.queryByText("Yay")).toBeNull();
+ unmount();
+ });
+});
diff --git a/npm-packages/convex/src/react/auth_helpers.tsx b/npm-packages/convex/src/react/auth_helpers.tsx
index 4063903e0..ac8571e71 100644
--- a/npm-packages/convex/src/react/auth_helpers.tsx
+++ b/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}>;