@oxyhq/services 0.1.7 → 0.1.8

package/README.md

@@ -67,7 +67,7 @@ const getWallet = async (userId) => {
 #### Using OxyProvider (Recommended)
 
 ```typescript
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { OxyProvider, useAuth, useUser, useKarma, useWallet } from '@oxyhq/services';
 
 // Wrap your app with OxyProvider
@@ -87,26 +87,65 @@ function AuthenticatedApp() {
   const karma = useKarma();
   const wallet = useWallet();
   
+  // State for login form
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [authStatus, setAuthStatus] = useState(false);
+  
+  // Check authentication status on component mount and when auth changes
+  useEffect(() => {
+    const checkAuth = async () => {
+      const isAuthenticated = await auth.isAuthenticated();
+      setAuthStatus(isAuthenticated);
+      
+      // If authenticated but no user data, fetch the user profile
+      if (isAuthenticated && !auth.user) {
+        await auth.getCurrentUser();
+      }
+    };
+    
+    checkAuth();
+  }, [auth]);
+  
   const handleLogin = async () => {
     const result = await auth.login({
-      username: 'user123',
-      password: 'secure-password'
+      username,
+      password
     });
     
     if (result.success) {
       console.log('Logged in successfully');
+      // User data should be automatically set from the response
+      // which may include a user object directly
     }
   };
 
   return (
     <div>
-      {auth.isAuthenticated ? (
+      {authStatus ? (
         <div>
           <h2>Welcome, {auth.user?.username}</h2>
           <button onClick={auth.logout}>Logout</button>
         </div>
       ) : (
-        <button onClick={handleLogin}>Login</button>
+        <form onSubmit={(e) => {
+          e.preventDefault();
+          handleLogin();
+        }}>
+          <input 
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Username" 
+          />
+          <input 
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password" 
+          />
+          <button type="submit">Login</button>
+        </form>
       )}
     </div>
   );
@@ -118,7 +157,7 @@ export default App;
 #### Direct Usage (Without Provider)
 
 ```typescript
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useAuth, useUser, useKarma, useWallet } from '@oxyhq/services';
 
 function App() {
@@ -147,26 +186,64 @@ function App() {
     getToken: auth.getToken
   });
 
+  // State for login form and auth status
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [authStatus, setAuthStatus] = useState(false);
+  
+  // Check authentication status on component mount and when auth changes
+  useEffect(() => {
+    const checkAuth = async () => {
+      const isAuthenticated = await auth.isAuthenticated();
+      setAuthStatus(isAuthenticated);
+      
+      // If authenticated but no user data, fetch the user profile
+      if (isAuthenticated && !auth.user) {
+        await auth.getCurrentUser();
+      }
+    };
+    
+    checkAuth();
+  }, [auth]);
+
   const handleLogin = async () => {
     const result = await auth.login({
-      username: 'user123',
-      password: 'secure-password'
+      username,
+      password
     });
     
     if (result.success) {
       console.log('Logged in successfully');
+      // User data should be automatically set from the response
     }
   };
 
   return (
     <div>
-      {auth.isAuthenticated ? (
+      {authStatus ? (
         <div>
           <h2>Welcome, {auth.user?.username}</h2>
           <button onClick={auth.logout}>Logout</button>
         </div>
       ) : (
-        <button onClick={handleLogin}>Login</button>
+        <form onSubmit={(e) => {
+          e.preventDefault();
+          handleLogin();
+        }}>
+          <input 
+            type="text"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            placeholder="Username" 
+          />
+          <input 
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="Password" 
+          />
+          <button type="submit">Login</button>
+        </form>
       )}
     </div>
   );
@@ -195,4 +272,48 @@ export default App;
 
 ## License
 
-MIT 
+MIT 
+
+## Authentication Changes (v0.1.7)
+
+### Important Updates
+
+1. **Enhanced Login/Register Response Handling**:
+   - Both `login()` and `register()` functions now support receiving the user object directly in the API response.
+   - If the API returns a user object with the tokens, it will be stored automatically without making an extra `/auth/me` request.
+
+2. **Async Authentication Methods**:
+   - The `isAuthenticated()` method is now asynchronous and returns a Promise.
+   - Use `await auth.isAuthenticated()` to get the current authentication status.
+
+3. **Consistent Token Storage**:
+   - Tokens are stored with consistent keys (`oxy_access_token` and `oxy_refresh_token`).
+   - Token handling supports various storage mechanisms including local storage, session storage, and cookies.
+
+### Migration Guide
+
+When updating from previous versions, make the following changes to your code:
+
+```typescript
+// Before
+if (auth.isAuthenticated) {
+  // User is logged in
+}
+
+// After - with async/await
+const checkAuth = async () => {
+  if (await auth.isAuthenticated()) {
+    // User is logged in
+  }
+};
+
+// After - with useEffect
+useEffect(() => {
+  const checkAuth = async () => {
+    const isAuthenticated = await auth.isAuthenticated();
+    // Update your component state
+  };
+  
+  checkAuth();
+}, [auth]);
+``` 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oxyhq/services",
-    "version": "0.1.7",
+    "version": "0.1.8",
     "description": "Authentication, user management, and karma system for Oxy applications",
     "main": "dist/index.js",
     "module": "dist/index.js",