Logout Handling

How It Works

The logout function from the useDeva hook terminates the user's session by revoking tokens and clearing all stored authentication state.

---

Implementation

import { useDeva } from "@bitplanet/deva-sdk";

function LogoutButton() {
  const { logout, isAuthenticated, user } = useDeva();

  if (!isAuthenticated) {
    return null;
  }

  return (
    <div>
      <p>Logged in as {user?.persona?.display_name}</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

---

What Happens When User Clicks Logout

1. Revoke Token - SDK calls the revocation endpoint to invalidate the access token

2. Clear Stored State - All authentication data is removed from browser storage

3. Reset Auth State - isAuthenticated becomes false and user becomes null

4. Clear Errors - Any authentication errors are cleared

After logout, the user must log in again to access protected features. Learn more about the OAuth Logout flow.

---

Complete Example with Login/Logout

import { useDeva } from "@bitplanet/deva-sdk";

function AuthButton() {
  const { login, logout, isAuthenticated, isReady, user } = useDeva();

  if (!isReady) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <button onClick={login}>Login with Deva</button>;
  }

  return (
    <div>
      <p>Welcome, {user?.persona?.display_name}!</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

---

Best Practices

Conditional Rendering Only show the logout button when isAuthenticated is true.

User Confirmation For critical applications, consider adding a confirmation dialog before logout.

Post-Logout Redirect After logout, redirect users to a public page or show appropriate UI.

Handle Async The logout function is asynchronous. Handle loading states if needed:

const [isLoggingOut, setIsLoggingOut] = useState(false);

const handleLogout = async () => {
  setIsLoggingOut(true);
  await logout();
  // Post-logout actions here
};

---

Related Documentation

• Deva SSO - Why use Deva authentication

• OAuth Integration - Technical OAuth flow details

• Authentication Flow - How authentication works

• Login Implementation - Implement login functionality

• Token Management - Understand token lifecycle