insforge 0.3.3 → 1.3.0

package/frontend/src/features/ai/services/ai.service.ts

@@ -1,17 +1,17 @@
 import { apiClient } from '@/lib/api/client';
 import {
-  ListModelsResponse,
+  AIModelSchema,
   AIConfigurationSchema,
-  AIConfigurationWithUsageSchema,
   CreateAIConfigurationRequest,
   UpdateAIConfigurationRequest,
   AIUsageSummarySchema,
   AIUsageRecordSchema,
   ListAIUsageResponse,
+  AIConfigurationWithUsageSchema,
 } from '@insforge/shared-schemas';
 
-export class AiService {
-  getModels(): Promise<ListModelsResponse> {
+export class AIService {
+  getModels(): Promise<AIModelSchema[]> {
     return apiClient.request('/ai/models', {
       headers: apiClient.withAccessToken(),
     });
@@ -145,4 +145,4 @@ export class AiService {
   }
 }
 
-export const aiService = new AiService();
+export const aiService = new AIService();

package/frontend/src/features/auth/components/AuthPreview.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import { SignInForm, SignUpForm, ForgotPasswordForm } from '@insforge/react';
+import { useAuthConfig } from '../hooks/useAuthConfig';
+import { useOAuthConfig } from '../hooks/useOAuthConfig';
+
+type AuthView = 'sign-in' | 'sign-up' | 'forgot-password';
+
+export function AuthPreview() {
+  const { config } = useAuthConfig();
+  const { configs: oAuthConfigs } = useOAuthConfig();
+  const [view, setView] = useState<AuthView>('sign-in');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  // Listen to hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1); // Remove the #
+      if (
+        hash === 'preview=sign-in' ||
+        hash === 'preview=sign-up' ||
+        hash === 'preview=forgot-password'
+      ) {
+        setView(hash.replace('preview=', '') as AuthView);
+      }
+    };
+
+    // Set initial view from hash
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  const authConfig = {
+    oAuthProviders: oAuthConfigs.map((provider) => provider.provider) ?? [],
+    passwordMinLength: config?.passwordMinLength ?? 6,
+    requireEmailVerification: !!config?.requireEmailVerification,
+    requireLowercase: !!config?.requireLowercase,
+    requireNumber: !!config?.requireNumber,
+    requireSpecialChar: !!config?.requireSpecialChar,
+    requireUppercase: !!config?.requireUppercase,
+    resetPasswordMethod: config?.resetPasswordMethod ?? ('code' as const),
+    verifyEmailMethod: config?.verifyEmailMethod ?? ('code' as const),
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Preview mode - do nothing
+  };
+
+  const handleOAuthClick = () => {
+    // Preview mode - do nothing
+  };
+
+  return (
+    <div className="w-[400px]">
+      {view === 'sign-in' && (
+        <SignInForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          forgotPasswordUrl="#preview=forgot-password"
+          signUpUrl="#preview=sign-up"
+        />
+      )}
+
+      {view === 'sign-up' && (
+        <SignUpForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          signInUrl="#preview=sign-in"
+        />
+      )}
+
+      {view === 'forgot-password' && (
+        <ForgotPasswordForm
+          email={email}
+          onEmailChange={setEmail}
+          onSubmit={handleSubmit}
+          backToSignInUrl="#preview=sign-in"
+        />
+      )}
+    </div>
+  );
+}

package/frontend/src/features/auth/components/OAuthConfigDialog.tsx

@@ -3,26 +3,36 @@ import { useForm, Controller, useFormState } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { ExternalLink } from 'lucide-react';
-import { Button } from '@/components/radix/Button';
-import { Input } from '@/components/radix/Input';
-import { Switch } from '@/components/radix/Switch';
 import {
+  Button,
+  Input,
+  Switch,
+  CopyButton,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/radix/Dialog';
+} from '@/components';
 import WarningIcon from '@/assets/icons/warning.svg';
-import { CopyButton } from '@/components/CopyButton';
-import { oAuthConfigSchema, OAuthConfigSchema } from '@insforge/shared-schemas';
-import { OAuthProviderInfo } from './AuthMethodTab';
+import {
+  oAuthConfigSchema,
+  OAuthConfigSchema,
+  OAuthProvidersSchema,
+} from '@insforge/shared-schemas';
+import { type OAuthProviderInfo } from '../helpers';
 import { useOAuthConfig } from '@/features/auth/hooks/useOAuthConfig';
 import { getBackendUrl, isInsForgeCloudProject } from '@/lib/utils/utils';
 
 const getCallbackUrl = (provider?: string) => {
   // Use backend API URL for OAuth callback
-  return `${getBackendUrl()}/api/auth/oauth/${provider}/callback`;
+  let backendUrl = getBackendUrl();
+
+  // Check if backend URL contains "localhost" and provider is "x"
+  if (provider === 'x' && backendUrl.includes('localhost')) {
+    backendUrl = backendUrl.replace('://localhost', '://www.localhost');
+  }
+  return `${backendUrl}/api/auth/oauth/${provider}/callback`;
 };
 
 interface OAuthConfigDialogProps {
@@ -63,6 +73,18 @@ export function OAuthConfigDialog({
   const clientId = form.watch('clientId');
   const clientSecret = form.watch('clientSecret');
 
+  // Our Cloud only support shared keys of these OAuth Providers for now
+  const sharedKeyProviders: readonly OAuthProvidersSchema[] = [
+    'google',
+    'github',
+    'discord',
+    'linkedin',
+    'facebook',
+    'apple',
+  ] satisfies readonly OAuthProvidersSchema[];
+  const isSharedKeysAvailable =
+    isInsForgeCloudProject() && provider?.id && sharedKeyProviders.includes(provider.id);
+
   // Use useFormState hook for better reactivity
   const { isDirty } = useFormState({
     control: form.control,
@@ -90,11 +112,11 @@ export function OAuthConfigDialog({
           provider: provider.id,
           clientId: '',
           clientSecret: '',
-          useSharedKey: isInsForgeCloudProject(),
+          useSharedKey: isSharedKeysAvailable,
         });
       }
     }
-  }, [isOpen, provider, providerConfig, form, isLoadingProvider]);
+  }, [form, isLoadingProvider, isOpen, isSharedKeysAvailable, provider, providerConfig]);
 
   const handleSubmitData = (data: OAuthConfigSchema & { clientSecret?: string }) => {
     if (!provider) {
@@ -180,25 +202,27 @@ export function OAuthConfigDialog({
             <form onSubmit={(e) => e.preventDefault()} className="flex flex-col">
               <div className="space-y-6 p-6">
                 {/* Shared Keys Toggle */}
-                <div className="flex items-center justify-start gap-2">
-                  <Controller
-                    name="useSharedKey"
-                    control={form.control}
-                    render={({ field }) => {
-                      return (
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={(value) => {
-                            field.onChange(value);
-                          }}
-                        />
-                      );
-                    }}
-                  />
-                  <span className="text-sm font-medium text-gray-900 dark:text-white">
-                    Shared Keys
-                  </span>
-                </div>
+                {isSharedKeysAvailable && (
+                  <div className="flex items-center justify-start gap-2">
+                    <Controller
+                      name="useSharedKey"
+                      control={form.control}
+                      render={({ field }) => {
+                        return (
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={(value) => {
+                              field.onChange(value);
+                            }}
+                          />
+                        );
+                      }}
+                    />
+                    <span className="text-sm font-medium text-gray-900 dark:text-white">
+                      Shared Keys
+                    </span>
+                  </div>
+                )}
 
                 {useSharedKey ? (
                   /* Shared Keys Enabled */
@@ -292,7 +316,7 @@ export function OAuthConfigDialog({
                     : 'Adding...'
                   : providerConfig
                     ? 'Update'
-                    : 'Add OAuth'}
+                    : 'Add Provider'}
               </Button>
             </DialogFooter>
           </>

package/frontend/src/features/auth/components/UserFormDialog.tsx

@@ -1,18 +1,21 @@
 import React, { useState, useEffect } from 'react';
 import { Mail, Lock, AlertCircle } from 'lucide-react';
-import { authService } from '@/features/auth/services/auth.service';
-import { Button, Input, Label, Alert, AlertDescription } from '@/components';
 import {
+  Button,
+  Input,
+  Label,
+  Alert,
+  AlertDescription,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from '@/components/radix/Dialog';
+} from '@/components';
 import ErrorIcon from '@/assets/icons/error.svg';
 import { useToast } from '@/lib/hooks/useToast';
 import { useUsers } from '@/features/auth/hooks/useUsers';
-import { emailSchema } from '@/lib/utils/validation-schemas';
+import { emailSchema } from '@insforge/shared-schemas';
 import { z } from 'zod';
 
 interface User {
@@ -63,7 +66,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
   const [showValidation, setShowValidation] = useState(false);
 
   const { showToast } = useToast();
-  const { refetch } = useUsers();
+  const { refetch, register } = useUsers();
 
   const isEditing = !!user;
 
@@ -126,7 +129,11 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
         userData.id = user.id;
       }
 
-      await authService.register(userData.email, userData.password || '', userData.name);
+      await register({
+        email: userData.email,
+        password: userData.password || '',
+        name: userData.name,
+      });
       void refetch();
       onOpenChange(false);
       showToast('User created successfully', 'success');

package/frontend/src/features/auth/components/UsersDataGrid.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from 'react';
 import {
+  Badge,
   DataGrid,
   createDefaultCellRenderer,
   type DataGridProps,
   type DataGridColumn,
   type RenderCellProps,
   ConvertedValue,
-} from '@/components/datagrid';
-import { Badge } from '@/components/radix/Badge';
+} from '@/components';
 import { cn } from '@/lib/utils/utils';
 import type { UserSchema } from '@insforge/shared-schemas';
 
@@ -33,12 +33,48 @@ const ProviderIcon = ({ provider }: { provider: string }) => {
           color:
             'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
         };
+      case 'discord':
+        return {
+          label: 'Discord',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
+      case 'linkedin':
+        return {
+          label: 'LinkedIn',
+          color:
+            'bg-blue-100 text-blue-700 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-500',
+        };
+      case 'facebook':
+        return {
+          label: 'Facebook',
+          color:
+            'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-600',
+        };
+      case 'microsoft':
+        return {
+          label: 'Microsoft',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
       case 'email':
         return {
           label: 'Email',
           color:
             'bg-green-100 text-green-700 dark:bg-neutral-800 dark:text-green-300 dark:border-green-500',
         };
+      case 'x':
+        return {
+          label: 'X',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
+      case 'apple':
+        return {
+          label: 'Apple',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
       default:
         return {
           label: provider,
@@ -63,7 +99,7 @@ const ProviderIcon = ({ provider }: { provider: string }) => {
 const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
   const identities = row.identities;
 
-  if (!identities || !Array.isArray(identities) || identities.length === 0) {
+  if (!identities || !Array.isArray(identities) || !identities.length) {
     return <span className="text-sm text-black dark:text-zinc-300">null</span>;
   }
 
@@ -83,7 +119,7 @@ const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
       {uniqueProviders.length > 2 && (
         <Badge
           variant="secondary"
-          className="text-xs bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700"
+          className="text-xs px-2 py-1 bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700 border border-transparent"
         >
           +{uniqueProviders.length - 2}
         </Badge>
@@ -124,7 +160,7 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
     {
       key: 'identities',
       name: 'Identities',
-      width: '1fr',
+      width: '1.5fr',
       resizable: true,
       sortable: true,
       renderCell: IdentitiesCellRenderer,
@@ -137,6 +173,14 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
       sortable: true,
       renderCell: cellRenderers.text,
     },
+    {
+      key: 'emailVerified',
+      name: 'Email Verified',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.boolean,
+    },
     {
       key: 'createdAt',
       name: 'Created',
@@ -160,21 +204,13 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
 export type UsersDataGridProps = Omit<DataGridProps<UserDataGridRow>, 'columns'>;
 
 // Specialized DataGrid for users
-export function UsersDataGrid({
-  emptyStateTitle = 'No users available',
-  emptyStateActionText,
-  onEmptyStateAction,
-  ...props
-}: UsersDataGridProps) {
+export function UsersDataGrid(props: UsersDataGridProps) {
   const columns = useMemo(() => createUsersColumns(), []);
 
   return (
     <DataGrid<UserDataGridRow>
       {...props}
       columns={columns}
-      emptyStateTitle={emptyStateTitle}
-      emptyStateActionText={emptyStateActionText}
-      onEmptyStateAction={onEmptyStateAction}
       showSelection={true}
       showPagination={true}
       showTypeBadge={false}

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

@@ -0,0 +1,5 @@
+export { AuthPreview } from './AuthPreview';
+export { OAuthConfigDialog } from './OAuthConfigDialog';
+export { OAuthEmptyState } from './OAuthEmptyState';
+export { default as UserFormDialog } from './UserFormDialog';
+export { createUsersColumns, UsersDataGrid, type UsersDataGridProps } from './UsersDataGrid';

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

@@ -0,0 +1,208 @@
+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 Apple from '@/assets/logos/apple.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',
+  },
+  {
+    id: 'apple',
+    name: 'Apple OAuth',
+    icon: <Apple className="w-6 h-6 text-black dark:text-white" />,
+    description: 'Configure Apple Sign In for your users',
+    setupUrl: 'https://developer.apple.com/account/resources/identifiers/list',
+  },
+];
+
+/**
+ * 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,
+  };
+}