@object-ui/auth 0.1.0 → 3.0.0

package/README.md

@@ -0,0 +1,115 @@
+# @object-ui/auth
+
+Authentication system for Object UI — AuthProvider, guards, login/register forms, and token management.
+
+## Features
+
+- 🔐 **AuthProvider Context** - Wrap your app with authentication state and methods
+- 🛡️ **AuthGuard** - Protect routes and components from unauthenticated access
+- 📝 **Pre-built Forms** - LoginForm, RegisterForm, and ForgotPasswordForm ready to use
+- 👤 **UserMenu** - Display authenticated user info with sign-out support
+- 🔑 **Auth Client Factory** - `createAuthClient` for pluggable backend integration
+- 🌐 **Authenticated Fetch** - `createAuthenticatedFetch` for automatic token injection
+- 🎯 **Type-Safe** - Full TypeScript support with exported types
+
+## Installation
+
+```bash
+npm install @object-ui/auth
+```
+
+**Peer Dependencies:**
+- `react` ^18.0.0 || ^19.0.0
+- `react-dom` ^18.0.0 || ^19.0.0
+
+## Quick Start
+
+```tsx
+import { AuthProvider, useAuth, AuthGuard } from '@object-ui/auth';
+import { createAuthClient } from '@object-ui/auth';
+
+const authClient = createAuthClient({
+  provider: 'custom',
+  apiUrl: 'https://api.example.com/auth',
+});
+
+function App() {
+  return (
+    <AuthProvider client={authClient}>
+      <AuthGuard fallback={<LoginPage />}>
+        <Dashboard />
+      </AuthGuard>
+    </AuthProvider>
+  );
+}
+
+function Dashboard() {
+  const { user, signOut } = useAuth();
+  return (
+    <div>
+      <p>Welcome, {user?.name}</p>
+      <button onClick={signOut}>Sign Out</button>
+    </div>
+  );
+}
+```
+
+## API
+
+### AuthProvider
+
+Wraps your application with authentication context:
+
+```tsx
+<AuthProvider client={authClient}>
+  <App />
+</AuthProvider>
+```
+
+### useAuth
+
+Hook for accessing auth state and methods:
+
+```tsx
+const { user, session, signIn, signOut, signUp, isAuthenticated, isLoading } = useAuth();
+```
+
+### AuthGuard
+
+Protects children from unauthenticated access:
+
+```tsx
+<AuthGuard fallback={<LoginForm />}>
+  <ProtectedContent />
+</AuthGuard>
+```
+
+### LoginForm / RegisterForm / ForgotPasswordForm
+
+Pre-built authentication form components:
+
+```tsx
+<LoginForm onSuccess={() => navigate('/dashboard')} />
+<RegisterForm onSuccess={() => navigate('/welcome')} />
+<ForgotPasswordForm onSuccess={() => navigate('/check-email')} />
+```
+
+### UserMenu
+
+Displays current user info with avatar and sign-out:
+
+```tsx
+<UserMenu />
+```
+
+### createAuthenticatedFetch
+
+Creates a fetch wrapper that injects auth tokens into DataSource requests:
+
+```tsx
+const authedFetch = createAuthenticatedFetch({ getToken: () => session.token });
+```
+
+## License
+
+MIT

package/dist/AuthProvider.d.ts

@@ -9,6 +9,13 @@ import React from 'react';
 import type { AuthProviderConfig } from './types';
 export interface AuthProviderProps extends AuthProviderConfig {
     children: React.ReactNode;
+    /**
+     * Whether authentication is enabled.
+     * When false, the provider will skip authentication checks and treat all users as authenticated.
+     * Useful for development or demo environments where the server doesn't have authentication enabled.
+     * @default true
+     */
+    enabled?: boolean;
 }
 /**
  * Authentication context provider.
@@ -22,6 +29,13 @@ export interface AuthProviderProps extends AuthProviderConfig {
  *   <App />
  * </AuthProvider>
  * ```
+ *
+ * @example With disabled auth (development mode)
+ * ```tsx
+ * <AuthProvider authUrl="/api/auth" enabled={false}>
+ *   <App />
+ * </AuthProvider>
+ * ```
  */
-export declare function AuthProvider({ authUrl, client: externalClient, onAuthStateChange, children, }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AuthProvider({ authUrl, client: externalClient, onAuthStateChange, enabled, children, }: AuthProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AuthProvider.d.ts.map

package/dist/AuthProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAwB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EAAE,cAAc,EACtB,iBAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,2CAmKnB"}
+{"version":3,"file":"AuthProvider.d.ts","sourceRoot":"","sources":["../src/AuthProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAwB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIxE,MAAM,WAAW,iBAAkB,SAAQ,kBAAkB;IAC3D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,MAAM,EAAE,cAAc,EACtB,iBAAiB,EACjB,OAAc,EACd,QAAQ,GACT,EAAE,iBAAiB,2CAqLnB"}

package/dist/AuthProvider.js

@@ -21,16 +21,40 @@ import { createAuthClient } from './createAuthClient';
  *   <App />
  * </AuthProvider>
  * ```
+ *
+ * @example With disabled auth (development mode)
+ * ```tsx
+ * <AuthProvider authUrl="/api/auth" enabled={false}>
+ *   <App />
+ * </AuthProvider>
+ * ```
  */
-export function AuthProvider({ authUrl, client: externalClient, onAuthStateChange, children, }) {
+export function AuthProvider({ authUrl, client: externalClient, onAuthStateChange, enabled = true, children, }) {
     const client = useMemo(() => externalClient ?? createAuthClient({ baseURL: authUrl }), [externalClient, authUrl]);
     const [user, setUser] = useState(null);
     const [session, setSession] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
-    const isAuthenticated = user !== null && session !== null;
-    // Load session on mount
+    // If auth is disabled, automatically set as authenticated with a guest user
+    const isAuthenticated = enabled
+        ? user !== null && session !== null
+        : true;
+    // Load session on mount (only if auth is enabled)
     useEffect(() => {
+        if (!enabled) {
+            // When auth is disabled, set a guest user and mark as loaded
+            setUser({
+                id: 'guest',
+                email: 'guest@local',
+                name: 'Guest User',
+            });
+            setSession({
+                token: 'guest-token',
+                expiresAt: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
+            });
+            setIsLoading(false);
+            return;
+        }
         let cancelled = false;
         async function loadSession() {
             try {
@@ -55,7 +79,7 @@ export function AuthProvider({ authUrl, client: externalClient, onAuthStateChang
         }
         loadSession();
         return () => { cancelled = true; };
-    }, [client]);
+    }, [client, enabled]);
     // Notify on auth state changes
     useEffect(() => {
         onAuthStateChange?.({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/auth",
-  "version": "0.1.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Authentication system for Object UI with AuthProvider, useAuth hook, AuthGuard, and form components.",
@@ -26,11 +26,11 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@object-ui/types": "0.5.0"
+    "@object-ui/types": "3.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.13",
-    "react": "^19.1.0",
+    "@types/react": "19.2.13",
+    "react": "19.2.4",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   },