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};