Skip to main content
Version: 4.xx.xx

<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.authenticated is true, it renders its children.
  • data.authenticated is false, it renders fallback prop if provided. Otherwise, it redirects to data.redirectTo page.
  • isLoading is true, it renders the loading prop.

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.

INFORMATION

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>

API Reference​

Properties​

PropertyTypeDescriptionDefault
v3LegacyAuthProviderCompatible

boolean

This must be set to true if legacy auth provider is being used.

redirectOnFail

string | true

Whether to redirect user if not logged in or not. If not set, user will be redirected to redirectTo property of the check function's response. This behavior is only available for new auth providers. Legacy auth providers will redirect to /login by default if this property is not set. If set to a string, user will be redirected to that string.

This property only works if fallback is not set.

true

appendCurrentPathToQuery

boolean

Whether to append current path to search params of the redirect url at to property.

By default, to parameter is used by successful invocations of the useLogin hook. If to present, it will be used as the redirect url after successful login.

true

fallback

ReactNode

Content to show if user is not logged in.

loading

ReactNode

Content to show while checking whether user is logged in or not.

children

ReactNode

Content to show if user is logged in