insforge 0.3.2 → 1.2.10

package/frontend/src/features/auth/helpers.tsx

@@ -0,0 +1,200 @@
+import { ReactElement } from 'react';
+import Github from '@/assets/logos/github.svg?react';
+import Google from '@/assets/logos/google.svg?react';
+import Microsoft from '@/assets/logos/microsoft.svg?react';
+import Discord from '@/assets/logos/discord.svg?react';
+import LinkedIn from '@/assets/logos/linkedin.svg?react';
+import Facebook from '@/assets/logos/facebook.svg?react';
+import X from '@/assets/logos/x.svg?react';
+import type { OAuthProvidersSchema } from '@insforge/shared-schemas';
+
+export enum AuthTab {
+  USERS = 'users',
+  AUTH_METHODS = 'auth-methods',
+  CONFIGURATION = 'configuration',
+}
+
+export interface OAuthProviderInfo {
+  id: OAuthProvidersSchema;
+  name: string;
+  icon: ReactElement;
+  description: string;
+  setupUrl: string;
+}
+
+export const oauthProviders: OAuthProviderInfo[] = [
+  {
+    id: 'google',
+    name: 'Google OAuth',
+    icon: <Google className="w-6 h-6" />,
+    description: 'Configure Google authentication for your users',
+    setupUrl: 'https://console.cloud.google.com/apis/credentials',
+  },
+  {
+    id: 'github',
+    name: 'GitHub OAuth',
+    icon: <Github className="w-6 h-6 dark:text-white" />,
+    description: 'Configure GitHub authentication for your users',
+    setupUrl: 'https://github.com/settings/developers',
+  },
+  {
+    id: 'microsoft',
+    name: 'Microsoft OAuth',
+    icon: <Microsoft className="w-6 h-6" />,
+    description: 'Configure Microsoft authentication for your users',
+    setupUrl: 'https://portal.azure.com/',
+  },
+  {
+    id: 'discord',
+    name: 'Discord OAuth',
+    icon: <Discord className="w-6 h-6 text-[#5765F2] dark:text-white" />,
+    description: 'Configure Discord authentication for your users',
+    setupUrl: 'https://discord.com/developers/applications',
+  },
+  {
+    id: 'linkedin',
+    name: 'LinkedIn OAuth',
+    icon: <LinkedIn className="w-6 h-6 text-[#0A66C2] dark:text-[#0A66C2]" />,
+    description: 'Configure LinkedIn authentication for your users',
+    setupUrl: 'https://www.linkedin.com/developers/apps',
+  },
+  {
+    id: 'facebook',
+    name: 'Facebook OAuth',
+    icon: <Facebook className="w-6 h-6" />,
+    description: 'Configure Facebook authentication for your users',
+    setupUrl: 'https://developers.facebook.com/apps',
+  },
+  {
+    id: 'x',
+    name: 'X OAuth',
+    icon: <X className="w-6 h-6 text-black dark:text-white" />,
+    description: 'Configure X authentication for your users',
+    setupUrl: 'https://developer.x.com/en/portal/dashboard',
+  },
+];
+
+/**
+ * AI prompts for implementing auth components
+ */
+export const getAuthImplementationPrompt = (baseUrl: string) => {
+  return `
+# Add InsForge Authentication to Your Application
+The \`@insforge/react\` package provides **complete authentication solution for React applications**. Use deployed auth pages (built-in auth) or custom UI components—works with Vite.
+**Scope:** All AI-generated advice or code related to InsForge must follow these guardrails. We don't support other frameworks or libraries.
+
+## Quick start
+
+### Step 1: Create New React Project (Skip if you already have a project)
+
+\`\`\`bash
+npm install @insforge/react@latest
+\`\`\`
+
+### Step 2: Set Environment Variables
+
+\`\`\`bash .env
+VITE_INSFORGE_BASE_URL=${baseUrl}
+VITE_INSFORGE_ANON_KEY=your-anon-key-here
+\`\`\`
+
+### Step 3: Setup Provider
+
+Wrap your app with \`InsforgeProvider\` in the root:
+
+\`\`\`tsx src/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { InsforgeProvider } from '@insforge/react';
+import App from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <InsforgeProvider baseUrl="${baseUrl}">
+      <App />
+    </InsforgeProvider>
+  </StrictMode>,
+);
+\`\`\`
+
+import { SignInButton, SignUpButton, SignedIn, SignedOut, UserButton, useUser } from '@insforge/react';
+
+export default function Home() {
+  const { user } = useUser();
+
+  return (
+    <div>
+      <SignedOut>
+        <SignInButton />
+        <SignUpButton />
+      </SignedOut>
+
+      <SignedIn>
+        <UserButton />
+        <h1>Welcome, \${user?.email}!</h1>
+      </SignedIn>
+    </div>
+  );
+}
+\`\`\`
+
+## Next Steps
+
+### Hooks
+
+#### \`useAuth()\`
+
+Access authentication state:
+
+\`\`\`tsx
+import { useAuth } from '@insforge/react';
+
+function LoginButton() {
+  const { isSignedIn, isLoaded } = useAuth();
+  
+  if (!isLoaded) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {isSignedIn ? 'Welcome!' : 'Sign In'}
+    </div>
+  );
+}
+\`\`\`
+
+**Returns:**
+
+- \`isSignedIn\` - Boolean auth state
+- \`isLoaded\` - Boolean loading state
+
+#### \`useUser()\`
+
+Access current user data:
+
+\`\`\`tsx
+import { useUser } from '@insforge/react';
+
+function UserProfile() {
+  const { user, isLoaded } = useUser();
+
+  if (!isLoaded) return <div>Loading...</div>;
+  if (!user) return <div>Not signed in</div>;
+
+
+  return (
+    <div>
+      <p>Id: \${user.id}</p>
+      <p>Email: \${user.email}</p>
+      <p>Name: \${user.name}</p>
+      <img src={user.avatarUrl} alt="Avatar" />
+    </div>
+  );
+}
+\`\`\`
+
+**Returns:**
+
+- \`user\` - User object with id, email, name, avatarUrl
+- \`isLoaded\` - Boolean loading state
+`;
+};

package/frontend/src/features/auth/hooks/useAnonToken.ts

@@ -0,0 +1,30 @@
+import { useQuery } from '@tanstack/react-query';
+import { anonTokenService } from '@/features/auth/services/anonToken.service';
+
+interface UseAnonTokenOptions {
+  enabled?: boolean;
+}
+
+export function useAnonToken(options: UseAnonTokenOptions = {}) {
+  const { enabled = true } = options;
+
+  const {
+    data: tokenData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['anon-token'],
+    queryFn: () => anonTokenService.generateAnonToken(),
+    enabled,
+    staleTime: 30 * 60 * 1000, // Cache for 30 minutes since token never expires
+  });
+
+  return {
+    accessToken: tokenData?.accessToken,
+    message: tokenData?.message,
+    isLoading,
+    error,
+    refetch,
+  };
+}

package/frontend/src/features/auth/hooks/useAuthConfig.ts

@@ -0,0 +1,48 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AuthConfigSchema, UpdateAuthConfigRequest } from '@insforge/shared-schemas';
+import { authConfigService } from '../services/config.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+export function useAuthConfig() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+
+  // Query to fetch auth configuration
+  const {
+    data: config,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery<AuthConfigSchema>({
+    queryKey: ['auth-config'],
+    queryFn: () => authConfigService.getConfig(),
+  });
+
+  // Mutation to update auth configuration
+  const updateConfigMutation = useMutation({
+    mutationFn: (config: UpdateAuthConfigRequest) => authConfigService.updateConfig(config),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['auth-config'] });
+      showToast('Authentication configuration updated successfully', 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to update authentication configuration', 'error');
+    },
+  });
+
+  return {
+    // Data
+    config,
+
+    // Loading states
+    isLoading,
+    isUpdating: updateConfigMutation.isPending,
+
+    // Errors
+    error,
+
+    // Actions
+    updateConfig: updateConfigMutation.mutate,
+    refetch,
+  };
+}

package/frontend/src/features/auth/hooks/useOAuthConfig.ts

@@ -5,14 +5,15 @@ import {
   CreateOAuthConfigRequest,
   UpdateOAuthConfigRequest,
   ListOAuthConfigsResponse,
+  OAuthProvidersSchema,
 } from '@insforge/shared-schemas';
-import { oauthConfigService } from '../services/oauth.service';
+import { oAuthConfigService } from '../services/oauth-config.service';
 import { useToast } from '@/lib/hooks/useToast';
 
 export function useOAuthConfig() {
   const queryClient = useQueryClient();
   const { showToast } = useToast();
-  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+  const [selectedProvider, setSelectedProvider] = useState<OAuthProvidersSchema | null>(null);
 
   // Query to fetch all OAuth configurations
   const {
@@ -22,7 +23,7 @@ export function useOAuthConfig() {
     refetch: refetchConfigs,
   } = useQuery<ListOAuthConfigsResponse>({
     queryKey: ['oauth-configs'],
-    queryFn: () => oauthConfigService.getAllConfigs(),
+    queryFn: () => oAuthConfigService.getAllConfigs(),
   });
 
   // Query to fetch specific provider config
@@ -33,13 +34,16 @@ export function useOAuthConfig() {
     refetch: refetchProvider,
   } = useQuery<OAuthConfigSchema & { clientSecret?: string }>({
     queryKey: ['oauth-config', selectedProvider],
-    queryFn: () => oauthConfigService.getConfigByProvider(selectedProvider ?? ''),
-    enabled: configs && configs.data.some((config) => config.provider === selectedProvider),
+    queryFn: () => oAuthConfigService.getConfigByProvider(selectedProvider ?? ''),
+    enabled:
+      !!selectedProvider &&
+      !!configs &&
+      configs.data.some((config) => config.provider === selectedProvider),
   });
 
   // Mutation to create OAuth configuration
   const createConfigMutation = useMutation({
-    mutationFn: (config: CreateOAuthConfigRequest) => oauthConfigService.createConfig(config),
+    mutationFn: (config: CreateOAuthConfigRequest) => oAuthConfigService.createConfig(config),
     onSuccess: (data) => {
       void queryClient.invalidateQueries({ queryKey: ['oauth-configs'] });
       void queryClient.invalidateQueries({ queryKey: ['oauth-config', data.provider] });
@@ -53,7 +57,7 @@ export function useOAuthConfig() {
   // Mutation to update OAuth configuration
   const updateConfigMutation = useMutation({
     mutationFn: ({ provider, config }: { provider: string; config: UpdateOAuthConfigRequest }) =>
-      oauthConfigService.updateConfig(provider, config),
+      oAuthConfigService.updateConfig(provider, config),
     onSuccess: (data) => {
       void queryClient.invalidateQueries({ queryKey: ['oauth-configs'] });
       void queryClient.invalidateQueries({ queryKey: ['oauth-config', data.provider] });
@@ -66,7 +70,7 @@ export function useOAuthConfig() {
 
   // Mutation to delete OAuth configuration
   const deleteConfigMutation = useMutation({
-    mutationFn: (provider: string) => oauthConfigService.deleteConfig(provider),
+    mutationFn: (provider: string) => oAuthConfigService.deleteConfig(provider),
     onSuccess: (_, provider) => {
       queryClient.removeQueries({ queryKey: ['oauth-configs'] });
       queryClient.removeQueries({ queryKey: ['oauth-config', provider] });
@@ -82,7 +86,7 @@ export function useOAuthConfig() {
 
   // Helper to check if a provider is configured
   const isProviderConfigured = useCallback(
-    (provider: string): boolean => {
+    (provider: OAuthProvidersSchema): boolean => {
       return configs?.data?.some((config) => config.provider === provider) ?? false;
     },
     [configs]
@@ -90,7 +94,7 @@ export function useOAuthConfig() {
 
   // Helper to get config for a specific provider from the list
   const getProviderConfig = useCallback(
-    (provider: string): OAuthConfigSchema | undefined => {
+    (provider: OAuthProvidersSchema): OAuthConfigSchema | undefined => {
       return configs?.data?.find((config) => config.provider === provider);
     },
     [configs]

package/frontend/src/features/auth/hooks/useUsers.ts

@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { authService } from '@/features/auth/services/auth.service';
+import { useState, useCallback } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { userService } from '@/features/auth/services/user.service';
 
 interface UseUsersOptions {
   pageSize?: number;
@@ -11,6 +11,7 @@ interface UseUsersOptions {
 export function useUsers(options: UseUsersOptions = {}) {
   const { pageSize = 20, enabled = true, searchQuery = '' } = options;
   const [currentPage, setCurrentPage] = useState(1);
+  const queryClient = useQueryClient();
 
   // Fetch users data
   const {
@@ -25,8 +26,8 @@ export function useUsers(options: UseUsersOptions = {}) {
         limit: pageSize.toString(),
         offset: ((currentPage - 1) * pageSize).toString(),
       });
-      // Use the auth service to get users with search, backend handles filtering
-      return authService.getUsers(params.toString(), searchQuery);
+      // Use the user service to get users with search, backend handles filtering
+      return userService.getUsers(params.toString(), searchQuery);
     },
     enabled: enabled,
     placeholderData: (previousData) => previousData, // Keep previous data while loading
@@ -35,6 +36,33 @@ export function useUsers(options: UseUsersOptions = {}) {
   // Pagination calculations
   const totalPages = Math.ceil((usersData?.pagination.total || 0) / pageSize);
 
+  // Get single user
+  const getUser = useCallback(async (id: string) => {
+    return await userService.getUser(id);
+  }, []);
+
+  // Get current user
+  const getCurrentUser = useCallback(async () => {
+    return await userService.getCurrentUser();
+  }, []);
+
+  // Register user mutation
+  const registerMutation = useMutation({
+    mutationFn: ({ email, password, name }: { email: string; password: string; name?: string }) =>
+      userService.register(email, password, name),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+
+  // Delete users mutation
+  const deleteUsersMutation = useMutation({
+    mutationFn: (userIds: string[]) => userService.deleteUsers(userIds),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+
   return {
     // Data
     users: usersData?.users || [],
@@ -53,5 +81,15 @@ export function useUsers(options: UseUsersOptions = {}) {
 
     // Operations
     refetch,
+
+    // Service methods
+    getUser,
+    getCurrentUser,
+    register: registerMutation.mutateAsync,
+    deleteUsers: deleteUsersMutation.mutateAsync,
+
+    // Mutation states
+    isRegistering: registerMutation.isPending,
+    isDeleting: deleteUsersMutation.isPending,
   };
 }

package/frontend/src/features/auth/index.ts

@@ -1,9 +1,10 @@
 // Components
 export { UserFormDialog } from './components/UserFormDialog';
-export { UsersTab } from './components/UsersTab';
 
 // Hooks
 export { useUsers } from './hooks/useUsers';
+export { useAnonToken } from './hooks/useAnonToken';
 
 // Services
-export { authService } from './services/auth.service';
+export { userService } from './services/user.service';
+export { anonTokenService } from './services/anonToken.service';