# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sdkdocs.deva.me/authentication/login-implementation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.