# @connect-xyz/auth-react

A React SDK that enables frontend React applications to seamlessly integrate with the Connect Auth product.

Connect Auth provides a secure, customizable authentication flow for crypto deposits. Learn more in the [Connect Auth documentation](https://docs.zerohash.com/docs/auth).

## Requirements

- React 18.0.0 or higher
- React DOM 18.0.0 or higher

## Installation

```bash
npm install @connect-xyz/auth-react
```

## Getting Started

Follow these simple steps to integrate Connect Auth into your React application:

### 1. Import the Auth Component

```tsx
import { Auth } from '@connect-xyz/auth-react';
```

### 2. Add the Auth Component to Your App

```tsx
function App() {
  const jwt = 'your-jwt-token'; // Obtain this from your backend authentication

  return (
    <Auth
      jwt={jwt}
      env="production" // or "sandbox" for testing
      theme="auto" // 'auto' (default), 'light', or 'dark'
    />
  );
}
```

### 3. Configure Event Callbacks (Optional)

Listen to events from the Auth SDK to handle user interactions:

```tsx
function App() {
  const jwt = 'your-jwt-token';

  const handleError = ({ errorCode, reason }) => {
    console.log('Auth error occurred:', errorCode, 'Reason:', reason);
  };

  const handleClose = () => {
    console.log('Auth widget closed');
  };

  const handleDeposit = ({ data }) => {
    console.log('Deposit data:', data);
  };

  const handleEvent = ({ type, data }) => {
    console.log('Auth event:', type, 'Data:', data);
  };

  const handleLoaded = () => {
    console.log('Auth widget loaded and ready');
  };

  return (
    <Auth
      jwt={jwt}
      env="production"
      theme="auto" // 'auto' (default), 'light', or 'dark'
      onError={handleError}
      onClose={handleClose}
      onDeposit={handleDeposit}
      onEvent={handleEvent}
      onLoaded={handleLoaded}
    />
  );
}
```

For detailed information about callback events and their payloads, see the [Auth SDK Callbacks documentation](https://docs.zerohash.com/docs/auth-standalone#4-organization-frontend-listens-to-auth-sdk-callbacks).

## Complete Example

Here's a full example of integrating Connect Auth into your React application:

```tsx
import React from 'react';
import { Auth } from '@connect-xyz/auth-react';

function App() {
  // JWT token should be obtained from your backend
  const jwt = 'your-jwt-token';

  // Choose environment: "production" for live apps, "sandbox" for testing
  const environment = 'production';

  return (
    <div className="App">
      <h1>My Crypto App</h1>

      <Auth
        jwt={jwt}
        env={environment}
        theme="auto" // 'auto' (default), 'light', or 'dark'
        onError={({ errorCode, reason }) => {
          console.log('Error:', errorCode, 'Reason:', reason);
        }}
        onClose={() => {
          console.log('Auth widget closed');
        }}
        onDeposit={({ data }) => {
          console.log('Deposit successful:', data);
        }}
        onEvent={({ type, data }) => {
          console.log('Event type:', type, 'Event data:', data);
        }}
        onLoaded={() => {
          console.log('Auth widget loaded and ready');
        }}
      />
    </div>
  );
}

export default App;
```

## API Reference

### Auth Component Props

| Prop        | Type                              | Required | Default        | Description                                    |
| ----------- | --------------------------------- | -------- | -------------- | ---------------------------------------------- |
| `jwt`       | `string`                          | Yes      | -              | JWT token for authentication with Connect Auth |
| `env`       | `"production" \| "sandbox"`       | No       | `"production"` | Target environment                             |
| `theme`     | `"auto" \| "light" \| "dark"`     | No       | `"auto"`       | Theme mode for the interface                   |
| `onError`   | `({ errorCode, reason }) => void` | No       | -              | Callback for error events                      |
| `onClose`   | `() => void`                      | No       | -              | Callback when the widget is closed             |
| `onDeposit` | `({ data }) => void`              | No       | -              | Callback for deposit received                  |
| `onEvent`   | `({ type, data }) => void`        | No       | -              | Callback for general events                    |
| `onLoaded`  | `() => void`                      | No       | -              | Callback when the widget is loaded and ready   |

## More Information & Support

For comprehensive documentation or support about Connect Auth, visit our [ Documentation Page](https://docs.zerohash.com/).