# Zoho Authentication WebView

This directory contains the Zoho authentication implementation using React Native WebView.

## Files

- `ZohoAuth.tsx` - Main WebView component for Zoho OAuth authentication
- `ZohoAuthExample.tsx` - Example implementation showing how to use the ZohoAuth component
- `LoginScreen.tsx` - Existing login screen (can be extended to include Zoho auth)

## ZohoAuth Component

The `ZohoAuth` component provides a WebView-based authentication flow for Zoho services.

### Features

- ✅ WebView-based OAuth flow
- ✅ Error handling and retry functionality
- ✅ Loading states and user feedback
- ✅ Theme integration with the app's design system
- ✅ TypeScript support with proper type definitions
- ✅ Responsive design with proper styling

### Usage

```tsx
import React, { useState } from 'react';
import { Modal } from 'react-native';
import ZohoAuth from './ZohoAuth';

const MyComponent = () => {
  const [showZohoAuth, setShowZohoAuth] = useState(false);

  const handleAuthSuccess = (authData) => {
    console.log('Auth successful:', authData);
    // Handle successful authentication
    setShowZohoAuth(false);
  };

  const handleAuthError = (error) => {
    console.error('Auth failed:', error);
    // Handle authentication error
    setShowZohoAuth(false);
  };

  return (
    <>
      <Button title="Login with Zoho" onPress={() => setShowZohoAuth(true)} />
      
      <Modal visible={showZohoAuth} animationType="slide">
        <ZohoAuth
          onAuthSuccess={handleAuthSuccess}
          onAuthError={handleAuthError}
          onClose={() => setShowZohoAuth(false)}
        />
      </Modal>
    </>
  );
};
```

### Configuration

Before using the component, you need to configure your Zoho OAuth credentials:

1. **Update the configuration in `ZohoAuth.tsx`:**

```typescript
const ZOHO_CONFIG = {
  CLIENT_ID: 'YOUR_ZOHO_CLIENT_ID',           // Your Zoho OAuth app client ID
  REDIRECT_URI: 'YOUR_REDIRECT_URI',          // Your app's redirect URI
  SCOPE: 'ZohoProjects.projects.READ,ZohoProjects.tasks.READ,ZohoProjects.timesheets.READ',
  RESPONSE_TYPE: 'code',
  ACCESS_TYPE: 'offline',
  PROMPT: 'consent',
};
```

2. **Set up your Zoho OAuth application:**
   - Go to [Zoho Developer Console](https://api-console.zoho.com/)
   - Create a new OAuth application
   - Set the redirect URI to match your app's scheme (e.g., `com.yourapp://oauth/callback`)
   - Copy the Client ID to the configuration

3. **Configure deep linking in your app:**
   - Add URL scheme handling to your app's configuration
   - Ensure the redirect URI matches your app's scheme

### Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `onAuthSuccess` | `(authData: ZohoAuthData) => void` | No | Callback when authentication succeeds |
| `onAuthError` | `(error: string) => void` | No | Callback when authentication fails |
| `onClose` | `() => void` | No | Callback when user closes the auth flow |

### Auth Data Structure

```typescript
interface ZohoAuthData {
  accessToken: string;      // OAuth access token
  refreshToken?: string;    // OAuth refresh token (if available)
  expiresIn?: number;       // Token expiration time in seconds
  scope?: string;           // Granted scopes
  tokenType?: string;       // Token type (usually 'Bearer')
}
```

### Error Handling

The component handles various error scenarios:

- Network connectivity issues
- Invalid OAuth configuration
- User cancellation
- Zoho API errors
- WebView loading errors

All errors are passed to the `onAuthError` callback with descriptive error messages.

### Styling

The component uses the app's theme system and automatically adapts to light/dark modes. It includes:

- Consistent color scheme
- Proper spacing and typography
- Loading indicators
- Error states with retry options
- Responsive design

### Security Considerations

- The component uses OAuth 2.0 authorization code flow
- Authorization codes should be exchanged for access tokens on your backend server
- Never store sensitive tokens in the app's local storage without encryption
- Use secure storage solutions for token persistence

### Example Integration

See `ZohoAuthExample.tsx` for a complete example of how to integrate the ZohoAuth component into your app, including:

- Modal presentation
- Success/error handling
- UI state management
- User feedback

## Dependencies

- `react-native-webview` - For the WebView component
- `react-native-vector-icons` - For icons
- `@shared/styles/useTheme` - For theme integration

## Next Steps

1. Configure your Zoho OAuth credentials
2. Set up deep linking in your app
3. Implement backend token exchange
4. Add token storage and refresh logic
5. Integrate with your app's authentication flow
