<Authenticated />
<Authenticated> is the component form of useIsAuthenticated.
It internally uses useIsAuthenticated's return values (data.authenticated, data.error, and, isLoading) to provide its functionality.
When:
data.authenticatedistrue, it renders its children.data.authenticatedisfalse, it rendersfallbackprop if provided. Otherwise, it redirects todata.redirectTopage.isLoadingistrue, it renders theloadingprop.
You may want to use this component when rendering a page that requires authentication. You will be able to render a fallback or redirect to an authentication page depending on your case. Authenticated can also be used to render a conditional content based on the user's authentication status.
Basic Usage
import { Authenticated } from "@refinedev/core";
const MyPage = () => (
<Authenticated>
<YourComponent />
</Authenticated>
);
Properties
key required
A differentiator prop for the <Authenticated /> component. This is crucial for the authentication logic to work properly in certain scenarios where <Authenticated /> is used multiple times in same tree level. key prop will signal React to remount the component rather than updating the current props.
Why is it required?
Due to the nature of React, components are not unmounted and remounted again if props are changed. While this is mostly a good practice for performance, in some cases you'll want your component to re-mount instead of updating; for example if you don't want to use any of the previous states and effects initiated with the old props.
The <Authenticated /> component has this kind of scenario when its used for page level authentication checks. If the previous check results were used for the rendering of the content (fallback or children) this may lead to unexpected behaviors and flashing of the unwanted content.
To avoid this, a key prop must be set with different values for each use of the <Authenticated /> components. This will make sure that React will unmount and remount the component instead of updating the props.
import { Authenticated } from "@refinedev/core";
const MyPage = () => (
<Authenticated key="dashboard">
<h1>Dashboard Page</h1>
</Authenticated>
);
redirectOnFail
The path to redirect to if the user is not logged in. If left empty, the user will be redirected to the value in the redirectTo property of the check function of the AuthProvider.
This property only works if the fallback prop is not provided.
appendCurrentPathToQuery
If true, the current path will be appended to the to query parameter. This is useful when you want to redirect the user to the page they were trying to access after they log in.
fallback
Component to render if the user is not logged in. If undefined, the page will be redirected to /login.
<Authenticated fallback={<div>You cannot access this section</div>}>
<YourComponent />
</Authenticated>
loading
Component to render while checking whether the user is logged in.
<Authenticated loading={<div>loading...</div>}>
<YourComponent />
</Authenticated>