Avoid cloning elements in Authenticated

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

@@ -7,7 +7,7 @@ import { Routes, Route, useLocation } from 'react-router-dom';
 import { memoryStore } from '../store';
 import { CoreAdminContext } from '../core';
 import { useNotificationContext } from '../notification';
-import Authenticated from './Authenticated';
+import { Authenticated } from './Authenticated';
 
 describe('<Authenticated>', () => {
     const Foo = () => <div>Foo</div>;

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

@@ -1,13 +1,8 @@
-import { cloneElement, ReactElement } from 'react';
+import * as React from 'react';
+import { ReactNode } from 'react';
 
 import { useAuthenticated } from './useAuthenticated';
 
-export interface AuthenticatedProps {
-    children: ReactElement<any>;
-    authParams?: object;
-    location?: object; // kept for backwards compatibility, unused
-}
-
 /**
  * Restrict access to children to authenticated users.
  * Redirects anonymous users to the login page.
@@ -36,17 +31,15 @@ export interface AuthenticatedProps {
  *         </Admin>
  *     );
  */
-const Authenticated = (props: AuthenticatedProps) => {
-    const {
-        authParams,
-        children,
-        location, // kept for backwards compatibility, unused
-        ...rest
-    } = props;
+export const Authenticated = (props: AuthenticatedProps) => {
+    const { authParams, children } = props;
     useAuthenticated({ params: authParams });
     // render the child even though the useAuthenticated() call isn't finished (optimistic rendering)
     // the above hook will log out if the authProvider doesn't validate that the user is authenticated
-    return cloneElement(children, rest);
+    return <>{children}</>;
 };
 
-export default Authenticated;
+export interface AuthenticatedProps {
+    children: ReactNode;
+    authParams?: object;
+}

packages/ra-core/src/auth/index.ts

@@ -1,4 +1,3 @@
-import Authenticated, { AuthenticatedProps } from './Authenticated';
 import AuthContext from './AuthContext';
 import useAuthProvider from './useAuthProvider';
 import useAuthState from './useAuthState';
@@ -12,6 +11,7 @@ import useGetPermissions from './useGetPermissions';
 import useLogoutIfAccessDenied from './useLogoutIfAccessDenied';
 import convertLegacyAuthProvider from './convertLegacyAuthProvider';
 
+export * from './Authenticated';
 export * from './types';
 export * from './useAuthenticated';
 export * from './useCheckAuth';
@@ -32,8 +32,7 @@ export {
     // hook with immediate effect
     useLogoutIfAccessDenied,
     // components
-    Authenticated,
     WithPermissions,
 };
 
-export type { AuthenticatedProps, WithPermissionsProps };
+export type { WithPermissionsProps };

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

@@ -5,7 +5,7 @@ import { createMemoryHistory } from 'history';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { memoryStore } from '../store';
-import Authenticated from './Authenticated';
+import { Authenticated } from './Authenticated';
 import { useNotificationContext } from '../notification';
 import { CoreAdminContext } from '../core';