@erikey/react 0.1.0

package/README.md

@@ -0,0 +1,188 @@
+# @auth-ai/sdk
+
+React SDK for Auth.ai - Easy authentication integration for your React applications.
+
+## Installation
+
+```bash
+npm install @auth-ai/sdk
+# or
+pnpm add @auth-ai/sdk
+# or
+yarn add @auth-ai/sdk
+```
+
+## Quick Start
+
+### 1. Wrap your app with AuthProvider
+
+```tsx
+import { AuthProvider } from '@auth-ai/sdk';
+
+function App() {
+  return (
+    <AuthProvider config={{ baseURL: 'https://api.yourapp.com' }}>
+      <YourApp />
+    </AuthProvider>
+  );
+}
+```
+
+### 2. Use authentication hooks
+
+```tsx
+import { useAuth, ProtectedRoute } from '@auth-ai/sdk';
+
+function Dashboard() {
+  const { user, signOut } = useAuth();
+
+  return (
+    <ProtectedRoute>
+      <div>
+        <h1>Welcome, {user?.email}!</h1>
+        <button onClick={signOut}>Sign Out</button>
+      </div>
+    </ProtectedRoute>
+  );
+}
+```
+
+## API Reference
+
+### AuthProvider
+
+Wrap your application with this provider to enable authentication.
+
+```tsx
+<AuthProvider
+  config={{
+    baseURL: 'https://api.yourapp.com',
+    credentials: 'include', // optional
+  }}
+>
+  {children}
+</AuthProvider>
+```
+
+### useAuth()
+
+Access authentication state and methods.
+
+```tsx
+const {
+  user,              // Current user object
+  session,           // Current session
+  isLoading,         // Loading state
+  isAuthenticated,   // Boolean auth status
+  signIn,            // Sign in function
+  signUp,            // Sign up function
+  signOut,           // Sign out function
+  refreshSession,    // Manually refresh session
+} = useAuth();
+```
+
+### useUser()
+
+Get current user data.
+
+```tsx
+const user = useUser();
+
+if (user) {
+  console.log(user.email, user.role);
+}
+```
+
+### useOrganization()
+
+Access organization data and methods.
+
+```tsx
+const {
+  organization,        // Current active organization
+  organizations,       // List of user's organizations
+  switchOrganization,  // Switch to different org
+  isLoading,
+} = useOrganization();
+```
+
+### ProtectedRoute
+
+Protect routes that require authentication.
+
+```tsx
+<ProtectedRoute
+  fallback={<LoginPage />}     // Optional: custom fallback
+  redirectTo="/login"           // Optional: redirect URL
+>
+  <PrivatePage />
+</ProtectedRoute>
+```
+
+## Examples
+
+### Login Form
+
+```tsx
+import { useAuth } from '@auth-ai/sdk';
+import { useState } from 'react';
+
+function LoginForm() {
+  const { signIn } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await signIn(email, password);
+    } catch (error) {
+      console.error('Login failed:', error);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Email"
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <button type="submit">Sign In</button>
+    </form>
+  );
+}
+```
+
+### User Profile
+
+```tsx
+import { useUser } from '@auth-ai/sdk';
+
+function UserProfile() {
+  const user = useUser();
+
+  if (!user) {
+    return <div>Not logged in</div>;
+  }
+
+  return (
+    <div>
+      <h1>{user.name || user.email}</h1>
+      <p>Role: {user.role}</p>
+      <p>Joined: {new Date(user.createdAt).toLocaleDateString()}</p>
+    </div>
+  );
+}
+```
+
+## License
+
+MIT