useIsAuthenticated
This hook can only be used if the authProvider
is provided.
useIsAuthenticated
calls the check
method from the authProvider
under the hood.
It returns the result of react-query
's useQuery
which includes many properties, some of which being isSuccess
and isError
.
Data that is resolved from the useIsAuthenticated
will be returned as the data
in the query result with the following type:
type CheckResponse = {
authenticated: boolean;
redirectTo?: string;
logout?: boolean;
error?: Error;
};
authenticated
: A boolean value indicating whether the user is authenticated or not.redirectTo
: A string value indicating the URL to redirect to if authentication is required.logout
: A boolean value indicating whether the logout method should be called.error
: An Error object representing any errors that may have occurred during the check.
Usage
useIsAuthenticated
can be useful when you want to check for authentication and handle the result manually.
We have used this hook in refine's <Authenticated>
component, which allows only authenticated users to access the page or any part of the code.
We will demonstrate a similar basic implementation below. Imagine that you have a public page, but you want to make some specific fields private.
We have a logic in authProvider
's check
method like below:
const authProvider: AuthBindings = {
// ---
check: () =>
localStorage.getItem("email")
? {
authenticated: true,
}
: {
authenticated: false,
error: {
message: "Check failed",
name: "Not authenticated",
},
logout: true,
redirectTo: "/login",
},
// ---
};
Let's create a wrapper component that renders children if check
method returns the Promise resolved:
import { useIsAuthenticated, useGo } from "@refinedev/core";
export const Authenticated: React.FC<AuthenticatedProps> = ({
children,
fallback,
loading,
}) => {
const { isLoading, data } = useIsAuthenticated();
const go = useGo();
if (isLoading) {
return <>{loading}</> || null;
}
if (data.error) {
if (!fallback) {
go({ to: redirectTo, type: "replace" });
return null;
}
return <>{fallback}</>;
}
if (data.authenticated) {
return <>{children}</>;
}
return null;
};
type AuthenticatedProps = {
fallback?: React.ReactNode;
loading?: React.ReactNode;
};
Now, only authenticated users can see the price field:
import { Authenticated } from "components/authenticated";
export const PostShow: React.FC = () => (
<div>
<Authenticated>
<span>Only authenticated users can see</span>
</Authenticated>
</div>
);