<Authenticated>

<Authenticated> is the component form of useAuthenticated.

It internally uses useAuthenticated's return values (isSuccess, isLoading, and, isError) to provide its functionality.

When:

isSuccess is true, it renders to children.
isLoading is true, it renders loading prop.
isError is true, it renders fallback prop if provided. Otherwise, it redirects to /login page.

Basic Usage

import { Authenticated } from "@pankod/refine-core";

const MyPage = () => (
    <Authenticated>
        <YourComponent />
    </Authenticated>
);

Refer to Custom Pages Example and it's explanation to learn how to use it with custom pages. →

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>

Component to render while checking whether the user is logged in.

<Authenticated loading={<div>loading...</div>}>
    <YourComponent />
</Authenticated>

Property	Description	Type	Default
fallback	Component to render if the user is not logged in. If `undefined`, the page will be redirected to `/login`	`ReactNode`
loading	Component to render while checking whether user is logged in	`ReactNode`