<Authenticated>
The <Authenticated>
component calls authProvider.checkAuth()
on mount. If the current user is authenticated,<Authenticated>
renders its child component. If the user is not authenticated, it redirects to the login page. While the authentication is being checked, <Authenticated>
displays a loading component (empty by default).
Usage
Use it as an alternative to the useAuthenticated()
hook when you can’t use a hook, e.g. inside a <Route element>
component:
import { Admin, CustomRoutes, Authenticated } from 'react-admin';
import { Route } from 'react-router-dom';
const App = () => (
<Admin authProvider={authProvider}>
<CustomRoutes>
<Route path="/foo" element={<Authenticated><Foo /></Authenticated>} />
<Route path="/anoonymous" element={<Baz />} />
</CustomRoutes>
</Admin>
);
Props
Prop | Required | Type | Default | Description |
---|---|---|---|---|
children |
Required | ReactNode |
The component to render if the user is authenticated. | |
authParams |
any |
{} |
An object containing the parameters to pass to the authProvider.checkAuth() call. |
|
loading |
ReactNode |
null |
Component to display while the authentication is being checked. |