> For the complete documentation index, see [llms.txt](https://sdkdocs.deva.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sdkdocs.deva.me/authentication/login-implementation.md).

# Login Implementation

## How It Works

The Deva SDK provides the `useDeva` hook that handles the entire authentication flow. When you call the `login` function, it automatically initiates the secure OAuth login process.

***

## Implementation

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

function LoginButton() {
  const { login, isAuthenticated, isReady } = useDeva();

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

  if (isAuthenticated) {
    return <div>Already logged in</div>;
  }

  return <button onClick={login}>Login with Deva</button>;
}
```

***

## What Happens When User Clicks Login

1. **Clear Previous State** - Any existing authentication state is cleared
2. **Generate PKCE Challenge** - SDK creates a secure code verifier and challenge
3. **Redirect to Deva** - User is taken to Deva's login page with authentication parameters
4. **User Authenticates** - User logs in and grants permissions
5. **Return to App** - User is redirected back with an authorization code
6. **Token Exchange** - SDK automatically exchanges the code for access tokens
7. **Authenticated** - User is now logged in and `isAuthenticated` becomes `true`

This entire process is handled automatically by the SDK. Learn more about the [OAuth Authorization](/authentication/oauth-integration.md#authorization-flow) flow.

***

## useDeva Hook Properties

```tsx
const {
  login,           // Function to initiate login
  isAuthenticated, // Boolean - true if user is logged in
  isReady,        // Boolean - true when SDK is initialized
  user,           // User profile data (null if not logged in)
  accessToken     // Access token for API calls (null if not logged in)
} = useDeva();
```

***

## Best Practices

**Check isReady** Always check `isReady` before rendering login UI to avoid showing the button before the SDK is initialized.

**Handle Loading States** Show a loading indicator while `isReady` is false.

**Conditional Rendering** Only show the login button when `isAuthenticated` is false.

***

## Related Documentation

* [Deva SSO](/authentication/deva-sso.md) - Why use Deva authentication
* [OAuth Integration](/authentication/oauth-integration.md) - Technical OAuth flow details
* [Authentication Flow](/core-concepts/authentication-flow.md) - How authentication works
* [Logout Handling](/authentication/logout-handling.md) - Implement logout functionality
* [Token Management](/authentication/token-management.md) - Understand token lifecycle