useLogout()

A React hook that provides functionality to sign out the current user. It clears the authentication state and removes stored tokens.

Basic Usage

import { useLogout } from 'authsafe-react';

function LogoutButton() {
  const { logout } = useLogout();

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

Return Values

Property	Type	Description
`logout`	`() => Promise<void>`	Async function to sign out the current user
`isLoading`	`boolean`	Indicates if the logout process is in progress
`error`	`Error \| null`	Any error that occurred during logout

Logout with Post-Logout Actions

Handle post-logout redirects or cleanup:

import { useLogout } from 'authsafe-react';
import { useNavigate } from 'react-router-dom';

function LogoutButton() {
  const { logout, isLoading } = useLogout();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    // Redirect to home page after logout
    navigate('/');
  };

  return (
    <button onClick={handleLogout} disabled={isLoading}>
      {isLoading ? 'Logging out...' : 'Logout'}
    </button>
  );
}

Complete Example

import { useLogout, useAuth } from 'authsafe-react';

function UserMenu() {
  const { user } = useAuth();
  const { logout, isLoading, error } = useLogout();

  if (error) {
    console.error('Logout error:', error);
  }

  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={logout} disabled={isLoading}>
        {isLoading ? 'Logging out...' : 'Logout'}
      </button>
    </div>
  );
}

Type Definition

interface UseLogoutReturn {
  logout: () => Promise<void>;
  isLoading: boolean;
  error: Error | null;
}

What happens when logout is called?

All authentication tokens are cleared from storage
The user session is terminated
Authentication state is reset
User is redirected to the logged-out state

Best Practices

Always disable the logout button when isLoading is true