Fix <Authenticated> briefly renders its children when checkAuth returns error

packages/ra-core/src/auth/Authenticated.spec.tsx

@@ -26,6 +26,34 @@ describe('<Authenticated>', () => {
         );
         await screen.findByText('Loading');
     });
+
+    it('should not render its child when checkAuth raises an error', async () => {
+        const NeverDisplayedComponent = jest.fn(() => (
+            <div>It should not be called</div>
+        ));
+
+        const authProvider = {
+            checkAuth: jest.fn().mockRejectedValue(undefined),
+            logout: jest.fn().mockResolvedValue(undefined),
+        } as any;
+
+        render(
+            <CoreAdminContext authProvider={authProvider}>
+                <Authenticated>
+                    <NeverDisplayedComponent />
+                </Authenticated>
+            </CoreAdminContext>
+        );
+
+        // Ensure that the NeverDisplayedComponent is not called
+        await waitFor(() => {
+            // Ensure that checkAuth and logout were called as expected
+            expect(authProvider.checkAuth).toHaveBeenCalled();
+            expect(authProvider.logout).toHaveBeenCalled();
+            expect(NeverDisplayedComponent).toHaveBeenCalledTimes(0);
+        });
+    });
+
     it('should render its child when authenticated', async () => {
         const authProvider = {
             login: () => Promise.reject('bad method'),

packages/ra-core/src/auth/Authenticated.tsx

@@ -35,9 +35,9 @@ export const Authenticated = (props: AuthenticatedProps) => {
     const { authParams, loading = null, children } = props;
 
     // this hook will redirect to login if the user is not authenticated
-    const { isPending } = useAuthenticated({ params: authParams });
+    const { isPending, isError } = useAuthenticated({ params: authParams });
 
-    if (isPending) {
+    if (isPending || isError) {
         return loading;
     }