adds Unauthenticated component

src/__tests__/Unauthenticated.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { Unauthenticated } from '../components/Unauthenticated';
+import { FusionAuthProvider } from '../providers/FusionAuthProvider';
+import { TEST_CONFIG } from './mocks/testConfig';
+
+describe('FusionAuthLogoutButton', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('Only renders children if not authenticated', async () => {
+        // set up provider to fetch user, which will authenticate
+        Object.defineProperty(document, 'cookie', {
+            writable: true,
+            value: `app.idt=abc123;`,
+        });
+        const mockUser = { name: 'AuthGuy5000' };
+        const response = {
+            ok: true,
+            json: () => Promise.resolve(mockUser),
+        } as Response;
+        jest.spyOn(global, 'fetch').mockResolvedValue(response);
+
+        const contentForTheUnauthenticated = 'for unauthenticated eyes only';
+        const { queryByText } = render(
+            <FusionAuthProvider {...TEST_CONFIG}>
+                <Unauthenticated>
+                    <p>{contentForTheUnauthenticated}</p>
+                </Unauthenticated>
+            </FusionAuthProvider>,
+        );
+
+        // content appears before user is fetched
+        expect(queryByText(contentForTheUnauthenticated)).toBeInTheDocument();
+
+        // user is authenticated -- content disappears
+        await waitFor(() => {
+            expect(
+                queryByText(contentForTheUnauthenticated),
+            ).not.toBeInTheDocument();
+        });
+    });
+});

src/components/Unauthenticated.tsx

@@ -0,0 +1,8 @@
+import React, { FC, PropsWithChildren } from 'react';
+import { useFusionAuth } from '../providers/FusionAuthProvider';
+
+export const Unauthenticated: FC<PropsWithChildren> = props => {
+    const { isAuthenticated } = useFusionAuth();
+
+    return isAuthenticated ? null : <>{props.children}</>;
+};

src/index.js

@@ -1,6 +1,8 @@
 export * from './providers/FusionAuthProvider';
+
 export * from './components/FusionAuthLoginButton';
 export * from './components/FusionAuthLogoutButton';
 export * from './components/FusionAuthRegisterButton';
 export * from './components/RequireAuth';
+export * from './components/Unauthenticated';
 export * from './components/withFusionAuth';