npm package: @securedevkit/react
Description: Official React SDK for SecureDevKit Authentication Platform
Author: SecureDevKit
Latest version: 1.0.0

# SecureDevKit React SDK

Official React SDK for SecureDevKit Authentication Platform with hooks and context providers.

## Installation

```bash
npm install @securedevkit/react @securedevkit/sdk
```

## Quick Start

### 1. Wrap your app with the provider

```tsx
import { SecureDevKitProvider } from '@securedevkit/react';

function App() {
  return (
    <SecureDevKitProvider
      config={{
        apiKey: 'your-api-key-here',
        baseURL: 'https://api.securedevkit.com/api/v1',
      }}
    >
      <YourApp />
    </SecureDevKitProvider>
  );
}
```

### 2. Use authentication hooks

```tsx
import { useAuth } from '@securedevkit/react';

function LoginPage() {
  const { login, register, isAuthenticated, user, loading, error } = useAuth();

  const handleLogin = async () => {
    try {
      await login({
        email: 'user@example.com',
        password: 'password123',
      });
    } catch (err) {
      console.error('Login failed:', err);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (isAuthenticated) return <div>Welcome, {user?.name}!</div>;

  return (
    <div>
      <button onClick={handleLogin}>Login</button>
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}
```

## Hooks

### `useAuth()`

Provides authentication methods and state.

```tsx
const {
  login,           // (options: LoginOptions) => Promise<void>
  register,        // (options: RegisterOptions) => Promise<void>
  logout,          // () => Promise<void>
  isAuthenticated, // boolean
  user,            // User | null
  loading,         // boolean
  error,           // Error | null
} = useAuth();
```

### `useUser(userId?)`

Get and manage user data.

```tsx
// Get current user
const { user, loading, error, update, refetch } = useUser();

// Get specific user by ID
const { user, loading, error } = useUser('user-id-here');

// Update user
await update({
  name: 'Jane Doe',
  email: 'jane@example.com',
});
```

### `useSecureDevKit()`

Access the underlying SDK instance and tokens.

```tsx
const {
  sdk,          // SecureDevKit instance
  accessToken,  // string | null
  refreshToken, // string | null
  refresh,      // () => Promise<void>
} = useSecureDevKit();
```

## Examples

### Protected Route Component

```tsx
import { useAuth } from '@securedevkit/react';
import { Navigate } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const { isAuthenticated, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!isAuthenticated) return <Navigate to="/login" />;

  return <>{children}</>;
}
```

### User Profile Component

```tsx
import { useUser } from '@securedevkit/react';

function ProfilePage() {
  const { user, loading, update, error } = useUser();

  const handleUpdate = async () => {
    try {
      await update({
        name: 'New Name',
      });
    } catch (err) {
      console.error('Update failed:', err);
    }
  };

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
      <button onClick={handleUpdate}>Update Profile</button>
    </div>
  );
}
```

## License

MIT