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

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 flow.

---

useDeva Hook Properties

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 - Why use Deva authentication

• OAuth Integration - Technical OAuth flow details

• Authentication Flow - How authentication works

• Logout Handling - Implement logout functionality

• Token Management - Understand token lifecycle