@fluxbase/sdk-react 0.1.0-rc.1 → 2026.1.1-rc.10

package/src/use-admin-auth.ts

@@ -1,14 +1,14 @@
-import { useState, useEffect, useCallback } from 'react'
-import { useFluxbaseClient } from './context'
-import type { AdminAuthResponse } from '@fluxbase/sdk'
+import { useState, useEffect, useCallback } from "react";
+import { useFluxbaseClient } from "./context";
+import type { AdminAuthResponse, DataResponse } from "@fluxbase/sdk";
 
 /**
  * Simplified admin user type returned by authentication
  */
 export interface AdminUser {
-  id: string
-  email: string
-  role: string
+  id: string;
+  email: string;
+  role: string;
 }
 
 export interface UseAdminAuthOptions {
@@ -16,44 +16,44 @@ export interface UseAdminAuthOptions {
    * Automatically check authentication status on mount
    * @default true
    */
-  autoCheck?: boolean
+  autoCheck?: boolean;
 }
 
 export interface UseAdminAuthReturn {
   /**
    * Current admin user if authenticated
    */
-  user: AdminUser | null
+  user: AdminUser | null;
 
   /**
    * Whether the admin is authenticated
    */
-  isAuthenticated: boolean
+  isAuthenticated: boolean;
 
   /**
    * Whether the authentication check is in progress
    */
-  isLoading: boolean
+  isLoading: boolean;
 
   /**
    * Any error that occurred during authentication
    */
-  error: Error | null
+  error: Error | null;
 
   /**
    * Login as admin
    */
-  login: (email: string, password: string) => Promise<AdminAuthResponse>
+  login: (email: string, password: string) => Promise<AdminAuthResponse>;
 
   /**
    * Logout admin
    */
-  logout: () => Promise<void>
+  logout: () => Promise<void>;
 
   /**
    * Refresh admin user info
    */
-  refresh: () => Promise<void>
+  refresh: () => Promise<void>;
 }
 
 /**
@@ -78,30 +78,35 @@ export interface UseAdminAuthReturn {
  * }
  * ```
  */
-export function useAdminAuth(options: UseAdminAuthOptions = {}): UseAdminAuthReturn {
-  const { autoCheck = true } = options
-  const client = useFluxbaseClient()
+export function useAdminAuth(
+  options: UseAdminAuthOptions = {},
+): UseAdminAuthReturn {
+  const { autoCheck = true } = options;
+  const client = useFluxbaseClient();
 
-  const [user, setUser] = useState<AdminUser | null>(null)
-  const [isLoading, setIsLoading] = useState(autoCheck)
-  const [error, setError] = useState<Error | null>(null)
+  const [user, setUser] = useState<AdminUser | null>(null);
+  const [isLoading, setIsLoading] = useState(autoCheck);
+  const [error, setError] = useState<Error | null>(null);
 
   /**
    * Check current authentication status
    */
   const checkAuth = useCallback(async () => {
     try {
-      setIsLoading(true)
-      setError(null)
-      const { user } = await client.admin.me()
-      setUser(user)
+      setIsLoading(true);
+      setError(null);
+      const { data, error: apiError } = await client.admin.me();
+      if (apiError) {
+        throw apiError;
+      }
+      setUser(data!.user);
     } catch (err) {
-      setUser(null)
-      setError(err as Error)
+      setUser(null);
+      setError(err as Error);
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [client])
+  }, [client]);
 
   /**
    * Login as admin
@@ -109,52 +114,58 @@ export function useAdminAuth(options: UseAdminAuthOptions = {}): UseAdminAuthRet
   const login = useCallback(
     async (email: string, password: string): Promise<AdminAuthResponse> => {
       try {
-        setIsLoading(true)
-        setError(null)
-        const response = await client.admin.login({ email, password })
-        setUser(response.user)
-        return response
+        setIsLoading(true);
+        setError(null);
+        const { data, error: apiError } = await client.admin.login({
+          email,
+          password,
+        });
+        if (apiError) {
+          throw apiError;
+        }
+        setUser(data!.user);
+        return data!;
       } catch (err) {
-        setError(err as Error)
-        throw err
+        setError(err as Error);
+        throw err;
       } finally {
-        setIsLoading(false)
+        setIsLoading(false);
       }
     },
-    [client]
-  )
+    [client],
+  );
 
   /**
    * Logout admin
    */
   const logout = useCallback(async (): Promise<void> => {
     try {
-      setIsLoading(true)
-      setError(null)
+      setIsLoading(true);
+      setError(null);
       // Clear user state
-      setUser(null)
+      setUser(null);
       // Note: Add logout endpoint call here when available
     } catch (err) {
-      setError(err as Error)
-      throw err
+      setError(err as Error);
+      throw err;
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [])
+  }, []);
 
   /**
    * Refresh admin user info
    */
   const refresh = useCallback(async (): Promise<void> => {
-    await checkAuth()
-  }, [checkAuth])
+    await checkAuth();
+  }, [checkAuth]);
 
   // Auto-check authentication on mount
   useEffect(() => {
     if (autoCheck) {
-      checkAuth()
+      checkAuth();
     }
-  }, [autoCheck, checkAuth])
+  }, [autoCheck, checkAuth]);
 
   return {
     user,
@@ -163,6 +174,6 @@ export function useAdminAuth(options: UseAdminAuthOptions = {}): UseAdminAuthRet
     error,
     login,
     logout,
-    refresh
-  }
+    refresh,
+  };
 }

package/src/use-auth-config.ts

@@ -0,0 +1,101 @@
+/**
+ * Auth configuration hooks for Fluxbase SDK
+ *
+ * Provides hooks to fetch comprehensive authentication configuration
+ * from the server including signup status, OAuth/SAML providers,
+ * password requirements, and CAPTCHA settings.
+ */
+
+import { useQuery } from "@tanstack/react-query";
+import { useFluxbaseClient } from "./context";
+import type { AuthConfig } from "@fluxbase/sdk";
+
+/**
+ * Hook to get the complete authentication configuration from the server
+ *
+ * Returns all public auth settings in a single request including:
+ * - Signup enabled status
+ * - Email verification requirements
+ * - Magic link availability
+ * - MFA availability
+ * - Password requirements (length, complexity)
+ * - Available OAuth providers (Google, GitHub, etc.)
+ * - Available SAML providers (enterprise SSO)
+ * - CAPTCHA configuration
+ *
+ * Use this to conditionally render UI elements based on server configuration,
+ * such as hiding signup forms when signup is disabled or displaying available
+ * OAuth provider buttons.
+ *
+ * @returns Query result with authentication configuration
+ *
+ * @example
+ * ```tsx
+ * function AuthPage() {
+ *   const { data: config, isLoading } = useAuthConfig();
+ *
+ *   if (isLoading) return <Loading />;
+ *
+ *   return (
+ *     <div>
+ *       {config?.signup_enabled && (
+ *         <SignupForm passwordMinLength={config.password_min_length} />
+ *       )}
+ *
+ *       {config?.oauth_providers.map(provider => (
+ *         <OAuthButton
+ *           key={provider.provider}
+ *           provider={provider.provider}
+ *           displayName={provider.display_name}
+ *           authorizeUrl={provider.authorize_url}
+ *         />
+ *       ))}
+ *
+ *       {config?.saml_providers.map(provider => (
+ *         <SAMLButton
+ *           key={provider.provider}
+ *           provider={provider.provider}
+ *           displayName={provider.display_name}
+ *         />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example Showing password requirements
+ * ```tsx
+ * function PasswordInput() {
+ *   const { data: config } = useAuthConfig();
+ *
+ *   return (
+ *     <div>
+ *       <input type="password" minLength={config?.password_min_length} />
+ *       <ul>
+ *         <li>Minimum {config?.password_min_length || 8} characters</li>
+ *         {config?.password_require_uppercase && <li>One uppercase letter</li>}
+ *         {config?.password_require_lowercase && <li>One lowercase letter</li>}
+ *         {config?.password_require_number && <li>One number</li>}
+ *         {config?.password_require_special && <li>One special character</li>}
+ *       </ul>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useAuthConfig() {
+  const client = useFluxbaseClient();
+
+  return useQuery<AuthConfig>({
+    queryKey: ["fluxbase", "auth", "config"],
+    queryFn: async () => {
+      const { data, error } = await client.auth.getAuthConfig();
+      if (error) {
+        throw error;
+      }
+      return data!;
+    },
+    staleTime: 1000 * 60 * 5, // Cache for 5 minutes (config changes infrequently)
+    gcTime: 1000 * 60 * 60, // Keep in cache for 1 hour
+  });
+}

package/src/use-auth.ts

@@ -2,132 +2,149 @@
  * Authentication hooks for Fluxbase SDK
  */
 
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
-import { useFluxbaseClient } from './context'
-import type { SignInCredentials, SignUpCredentials, User, AuthSession } from '@fluxbase/sdk'
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useFluxbaseClient } from "./context";
+import type {
+  SignInCredentials,
+  SignUpCredentials,
+  User,
+  AuthSession,
+} from "@fluxbase/sdk";
 
 /**
  * Hook to get the current user
  */
 export function useUser() {
-  const client = useFluxbaseClient()
+  const client = useFluxbaseClient();
 
   return useQuery({
-    queryKey: ['fluxbase', 'auth', 'user'],
+    queryKey: ["fluxbase", "auth", "user"],
     queryFn: async () => {
-      const session = client.auth.getSession()
-      if (!session) {
-        return null
+      const { data } = await client.auth.getSession();
+      if (!data?.session) {
+        return null;
       }
 
       try {
-        return await client.auth.getCurrentUser()
+        const result = await client.auth.getCurrentUser();
+        return result.data?.user ?? null;
       } catch {
-        return null
+        return null;
       }
     },
     staleTime: 1000 * 60 * 5, // 5 minutes
-  })
+  });
 }
 
 /**
  * Hook to get the current session
  */
 export function useSession() {
-  const client = useFluxbaseClient()
+  const client = useFluxbaseClient();
 
   return useQuery<AuthSession | null>({
-    queryKey: ['fluxbase', 'auth', 'session'],
-    queryFn: () => client.auth.getSession(),
+    queryKey: ["fluxbase", "auth", "session"],
+    queryFn: async () => {
+      const { data } = await client.auth.getSession();
+      return data?.session ?? null;
+    },
     staleTime: 1000 * 60 * 5, // 5 minutes
-  })
+  });
 }
 
 /**
  * Hook for signing in
  */
 export function useSignIn() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (credentials: SignInCredentials) => {
-      return await client.auth.signIn(credentials)
+      return await client.auth.signIn(credentials);
     },
     onSuccess: (session) => {
-      queryClient.setQueryData(['fluxbase', 'auth', 'session'], session)
+      queryClient.setQueryData(["fluxbase", "auth", "session"], session);
       // Only set user if this is a complete auth session (not 2FA required)
-      if ('user' in session) {
-        queryClient.setQueryData(['fluxbase', 'auth', 'user'], session.user)
+      if ("user" in session) {
+        queryClient.setQueryData(["fluxbase", "auth", "user"], session.user);
       }
     },
-  })
+  });
 }
 
 /**
  * Hook for signing up
  */
 export function useSignUp() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (credentials: SignUpCredentials) => {
-      return await client.auth.signUp(credentials)
+      return await client.auth.signUp(credentials);
     },
-    onSuccess: (session) => {
-      queryClient.setQueryData(['fluxbase', 'auth', 'session'], session)
-      queryClient.setQueryData(['fluxbase', 'auth', 'user'], session.user)
+    onSuccess: (response) => {
+      if (response.data) {
+        queryClient.setQueryData(
+          ["fluxbase", "auth", "session"],
+          response.data.session,
+        );
+        queryClient.setQueryData(
+          ["fluxbase", "auth", "user"],
+          response.data.user,
+        );
+      }
     },
-  })
+  });
 }
 
 /**
  * Hook for signing out
  */
 export function useSignOut() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async () => {
-      await client.auth.signOut()
+      await client.auth.signOut();
     },
     onSuccess: () => {
-      queryClient.setQueryData(['fluxbase', 'auth', 'session'], null)
-      queryClient.setQueryData(['fluxbase', 'auth', 'user'], null)
-      queryClient.invalidateQueries({ queryKey: ['fluxbase'] })
+      queryClient.setQueryData(["fluxbase", "auth", "session"], null);
+      queryClient.setQueryData(["fluxbase", "auth", "user"], null);
+      queryClient.invalidateQueries({ queryKey: ["fluxbase"] });
     },
-  })
+  });
 }
 
 /**
  * Hook for updating the current user
  */
 export function useUpdateUser() {
-  const client = useFluxbaseClient()
-  const queryClient = useQueryClient()
+  const client = useFluxbaseClient();
+  const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (data: Partial<Pick<User, 'email' | 'metadata'>>) => {
-      return await client.auth.updateUser(data)
+    mutationFn: async (data: Partial<Pick<User, "email" | "metadata">>) => {
+      return await client.auth.updateUser(data);
     },
     onSuccess: (user) => {
-      queryClient.setQueryData(['fluxbase', 'auth', 'user'], user)
+      queryClient.setQueryData(["fluxbase", "auth", "user"], user);
     },
-  })
+  });
 }
 
 /**
  * Combined auth hook with all auth state and methods
  */
 export function useAuth() {
-  const { data: user, isLoading: isLoadingUser } = useUser()
-  const { data: session, isLoading: isLoadingSession } = useSession()
-  const signIn = useSignIn()
-  const signUp = useSignUp()
-  const signOut = useSignOut()
-  const updateUser = useUpdateUser()
+  const { data: user, isLoading: isLoadingUser } = useUser();
+  const { data: session, isLoading: isLoadingSession } = useSession();
+  const signIn = useSignIn();
+  const signUp = useSignUp();
+  const signOut = useSignOut();
+  const updateUser = useUpdateUser();
 
   return {
     user,
@@ -142,5 +159,5 @@ export function useAuth() {
     isSigningUp: signUp.isPending,
     isSigningOut: signOut.isPending,
     isUpdating: updateUser.isPending,
-  }
+  };
 }