useLogout is a hook that calls the logout method from the authProvider under the hood. It returns a mutation result from @tanstack/react-query.
Usage
import { useLogout } from "@refinedev/core";
const { mutate: logout } = useLogout();
logout();
Parameters
Options to configure the mutation from @tanstack/react-query.mutationOptions.onSuccess
Callback function to be called on successful logout.
Callback function to be called on logout error.
Additional metadata to pass to the mutation.
Return Values
Returns a mutation result from @tanstack/react-query.
A function to trigger the logout mutation. Accepts an optional object with redirectPath as a parameter.
An async version of mutate that returns a Promise.
Indicates whether the logout mutation is in progress.
Indicates whether the logout mutation was successful.
Indicates whether the logout mutation encountered an error.
The response data from the logout mutation.Indicates whether the logout was successful.
The URL to redirect to after successful logout.
Error object if logout failed.
data.successNotification
SuccessNotificationResponse
Notification message to display on successful logout.
Error object if the mutation failed.
Type Parameters
Type of the variables object passed to the logout mutation.
Mutation Variables
When calling the mutate function, you can pass an optional object with the following properties:
Custom redirect path after logout. If set to false, no redirection will occur. If not provided, the redirectTo value from the authProvider.logout response will be used.
Examples
Basic Usage
import { useLogout } from "@refinedev/core";
import { Button } from "antd";
const LogoutButton = () => {
const { mutate: logout, isPending } = useLogout();
return (
<Button
type="primary"
danger
onClick={() => logout()}
loading={isPending}
>
Logout
</Button>
);
};
With Custom Redirect
import { useLogout } from "@refinedev/core";
import { Button } from "antd";
const LogoutButton = () => {
const { mutate: logout } = useLogout<{ redirectTo: string }>();
return (
<Button
onClick={() =>
logout({
redirectTo: "/custom-login",
})
}
>
Logout
</Button>
);
};
Prevent Redirect
import { useLogout } from "@refinedev/core";
const { mutate: logout } = useLogout();
// Logout without redirecting
logout({
redirectPath: false,
});
import { useLogout, useMenu } from "@refinedev/core";
import { Link } from "react-router-dom";
const Menu = () => {
const { mutate: logout } = useLogout();
const { menuItems } = useMenu();
return (
<nav>
{menuItems.map((item) => (
<Link key={item.key} to={item.route ?? "/"}>
{item.label}
</Link>
))}
<button onClick={() => logout()}>Logout</button>
</nav>
);
};
With Callbacks
import { useLogout } from "@refinedev/core";
const { mutate: logout } = useLogout({
mutationOptions: {
onSuccess: (data) => {
console.log("Logged out successfully", data);
},
onError: (error) => {
console.error("Logout failed", error);
},
},
});
logout();