useLogout

By default, Refine already provides a logout button on the sider and if you want to use this default button you won't need to handle the logout flow manually. If you want to build a custom logout button instead of the default one, useLogout can be used like this:

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

export const LogoutButton = () => {
  const { mutate: logout } = useLogout();

  return <button onClick={() => logout()}>Logout</button>;
};

We have 3 options to manage the redirection after logout process.

• If promise returned from logout is resolved with nothing, app will be redirected to the /login route by default.

• A custom url can be resolved from the promise returned from the logout method of the authProvider.

const authProvider: AuthProvider = {
    ...
    logout: () => {
        ...
        return Promise.resolve("/custom-url");
    }
}

A custom url can be given to mutate function from the useLogout hook if you want to redirect yourself to a certain url.

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

const { mutate: logout } = useLogout<{ redirectPath: string }>();

logout({ redirectPath: "/custom-url" });

Then, you can handle this url in your logout method of the authProvider.

const authProvider: AuthProvider = {
    ...
    logout: ({ redirectPath }) => {
        ...
        return Promise.resolve(redirectPath);
    }
}

• If promise returned from the logout method of the authProvider gets resolved with false no redirection will occur.

const authProvider: AuthProvider = {
    ...
    logout: () => {
        ...
        return Promise.resolve(false);
    }
}