hazo_auth 1.0.1 → 1.0.3

package/README.md

@@ -655,6 +655,289 @@ You can also manually invalidate the cache using the API endpoint:
 // Body: { user_id?: string, role_ids?: number[], invalidate_all?: boolean }
 ```
 
+## Profile Picture Menu Widget
+
+The Profile Picture Menu is a versatile component for navbar or sidebar that automatically displays:
+- **When authenticated**: User's profile picture with a dropdown menu containing user info, settings link, logout, and custom menu items
+- **When not authenticated**: Sign Up and Sign In buttons (or a single button, configurable)
+
+### Basic Usage (Recommended)
+
+Use the `ProfilePicMenuWrapper` component which automatically loads configuration from `hazo_auth_config.ini`:
+
+```typescript
+// In your navbar or layout component
+import { ProfilePicMenuWrapper } from "hazo_auth/components/layouts/shared/components/profile_pic_menu_wrapper";
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between p-4">
+      <div>Logo</div>
+      <ProfilePicMenuWrapper 
+        avatar_size="default" // "sm" | "default" | "lg"
+        className="ml-auto"
+      />
+    </nav>
+  );
+}
+```
+
+### Direct Usage (Manual Configuration)
+
+If you prefer to configure the component directly without using the config file:
+
+```typescript
+"use client";
+
+import { ProfilePicMenu } from "hazo_auth/components/layouts/shared/components/profile_pic_menu";
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between p-4">
+      <div>Logo</div>
+      <ProfilePicMenu
+        show_single_button={false}
+        sign_up_label="Sign Up"
+        sign_in_label="Sign In"
+        register_path="/hazo_auth/register"
+        login_path="/hazo_auth/login"
+        settings_path="/hazo_auth/my_settings"
+        logout_path="/api/hazo_auth/logout"
+        avatar_size="default"
+        className="ml-auto"
+      />
+    </nav>
+  );
+}
+```
+
+### Configuration
+
+Configure the Profile Picture Menu in `hazo_auth_config.ini` under the `[hazo_auth__profile_pic_menu]` section:
+
+```ini
+[hazo_auth__profile_pic_menu]
+# Button configuration for unauthenticated users
+# Show only "Sign Up" button when true, show both "Sign Up" and "Sign In" buttons when false (default)
+show_single_button = false
+
+# Sign up button label
+sign_up_label = Sign Up
+
+# Sign in button label
+sign_in_label = Sign In
+
+# Register page path
+register_path = /hazo_auth/register
+
+# Login page path
+login_path = /hazo_auth/login
+
+# Settings page path (shown in dropdown menu when authenticated)
+settings_path = /hazo_auth/my_settings
+
+# Logout API endpoint path
+logout_path = /api/hazo_auth/logout
+
+# Custom menu items (optional)
+# Format: "type:label:value_or_href:order" for info/link, or "separator:order" for separator
+# Examples:
+#   - Info item: "info:Phone:+1234567890:3"
+#   - Link item: "link:My Account:/account:4"
+#   - Separator: "separator:2"
+# Custom items are added to the default menu items (name, email, separator, Settings, Logout)
+# Items are sorted by type (info first, then separators, then links) and then by order within each type
+custom_menu_items = 
+```
+
+### Component Props
+
+#### `ProfilePicMenuWrapper` Props
+
+- `className?: string` - Additional CSS classes
+- `avatar_size?: "sm" | "default" | "lg"` - Size of the profile picture avatar (default: "default")
+
+#### `ProfilePicMenu` Props
+
+- `show_single_button?: boolean` - Show only "Sign Up" button when true (default: false)
+- `sign_up_label?: string` - Label for sign up button (default: "Sign Up")
+- `sign_in_label?: string` - Label for sign in button (default: "Sign In")
+- `register_path?: string` - Path to registration page (default: "/hazo_auth/register")
+- `login_path?: string` - Path to login page (default: "/hazo_auth/login")
+- `settings_path?: string` - Path to settings page (default: "/hazo_auth/my_settings")
+- `logout_path?: string` - Path to logout API endpoint (default: "/api/hazo_auth/logout")
+- `custom_menu_items?: ProfilePicMenuMenuItem[]` - Array of custom menu items
+- `className?: string` - Additional CSS classes
+- `avatar_size?: "sm" | "default" | "lg"` - Size of the profile picture avatar (default: "default")
+
+### Custom Menu Items
+
+You can add custom menu items to the dropdown menu. Items are automatically sorted by type (info → separator → link) and then by order.
+
+**Menu Item Types:**
+
+1. **Info** - Display-only text (e.g., phone number, department)
+   - Format: `"info:label:value:order"`
+   - Example: `"info:Phone:+1234567890:3"`
+
+2. **Link** - Clickable menu item that navigates to a URL
+   - Format: `"link:label:href:order"`
+   - Example: `"link:My Account:/account:4"`
+
+3. **Separator** - Visual separator line
+   - Format: `"separator:order"`
+   - Example: `"separator:2"`
+
+**Example Configuration:**
+
+```ini
+[hazo_auth__profile_pic_menu]
+# Add custom menu items
+custom_menu_items = info:Phone:+1234567890:3,separator:2,link:My Account:/account:4,link:Help:/help:5
+```
+
+This will create a menu with:
+1. Default items (name, email, separator, Settings, Logout)
+2. Custom info item: "Phone: +1234567890" (order 3)
+3. Custom separator (order 2)
+4. Custom link: "My Account" → `/account` (order 4)
+5. Custom link: "Help" → `/help` (order 5)
+
+Items are sorted by type priority (info < separator < link) and then by order within each type.
+
+### Default Menu Items
+
+When authenticated, the dropdown menu automatically includes:
+- User's name (if available)
+- User's email address
+- Separator
+- Settings link (with Settings icon)
+- Logout link (with LogOut icon, triggers logout action)
+
+### Examples
+
+#### Example 1: Simple Navbar Integration
+
+```typescript
+// app/components/navbar.tsx
+import { ProfilePicMenuWrapper } from "hazo_auth/components/layouts/shared/components/profile_pic_menu_wrapper";
+
+export function Navbar() {
+  return (
+    <header className="border-b">
+      <nav className="container mx-auto flex items-center justify-between p-4">
+        <div className="text-xl font-bold">My App</div>
+        <ProfilePicMenuWrapper />
+      </nav>
+    </header>
+  );
+}
+```
+
+#### Example 2: Custom Styling and Size
+
+```typescript
+// app/components/navbar.tsx
+import { ProfilePicMenuWrapper } from "hazo_auth/components/layouts/shared/components/profile_pic_menu_wrapper";
+
+export function Navbar() {
+  return (
+    <header className="bg-slate-900 text-white">
+      <nav className="container mx-auto flex items-center justify-between p-4">
+        <div className="text-xl font-bold">My App</div>
+        <ProfilePicMenuWrapper 
+          avatar_size="sm"
+          className="bg-slate-800 rounded-lg p-2"
+        />
+      </nav>
+    </header>
+  );
+}
+```
+
+#### Example 3: With Custom Menu Items (Programmatic)
+
+```typescript
+"use client";
+
+import { ProfilePicMenu } from "hazo_auth/components/layouts/shared/components/profile_pic_menu";
+import type { ProfilePicMenuMenuItem } from "hazo_auth/lib/profile_pic_menu_config.server";
+
+export function Navbar() {
+  const customItems: ProfilePicMenuMenuItem[] = [
+    {
+      type: "info",
+      label: "Department",
+      value: "Engineering",
+      order: 3,
+      id: "dept_info",
+    },
+    {
+      type: "separator",
+      order: 2,
+      id: "custom_sep",
+    },
+    {
+      type: "link",
+      label: "Documentation",
+      href: "/docs",
+      order: 4,
+      id: "docs_link",
+    },
+  ];
+
+  return (
+    <nav className="flex items-center justify-between p-4">
+      <div>Logo</div>
+      <ProfilePicMenu
+        custom_menu_items={customItems}
+        avatar_size="default"
+      />
+    </nav>
+  );
+}
+```
+
+#### Example 4: Single Button Mode
+
+```typescript
+// In hazo_auth_config.ini
+[hazo_auth__profile_pic_menu]
+show_single_button = true
+sign_up_label = Get Started
+```
+
+When `show_single_button` is `true`, only the "Sign Up" button is shown for unauthenticated users (no "Sign In" button).
+
+### Behavior
+
+- **Loading State**: Shows a pulsing placeholder while checking authentication status
+- **Unauthenticated**: Shows Sign Up/Sign In buttons (or single button if configured)
+- **Authenticated**: Shows profile picture with dropdown menu
+- **Profile Picture Fallback**: If no profile picture is set, shows user's initials
+- **Logout**: Handles logout action, refreshes auth status, and redirects appropriately
+- **Responsive**: Works well in both navbar and sidebar layouts
+
+### Styling
+
+The component uses TailwindCSS classes and can be customized with:
+- `className` prop for additional styling
+- `avatar_size` prop for different avatar sizes
+- CSS class names prefixed with `cls_profile_pic_menu_*` for targeted styling
+
+Example custom styling:
+
+```css
+/* Target specific elements */
+.cls_profile_pic_menu_avatar {
+  border: 2px solid #3b82f6;
+}
+
+.cls_profile_pic_menu_dropdown {
+  min-width: 200px;
+}
+```
+
 ### Local Development (for package contributors)
 
 - `npm install` to install dependencies.

package/hazo_auth_config.example.ini

@@ -19,6 +19,11 @@ enable_admin_ui = true
 
 # PostgREST configuration (uncomment if using postgrest type)
 # postgrest_url = 
+
+# PostgREST API Key (REQUIRED if PostgREST uses authentication)
+# IMPORTANT: API keys should ONLY be set in environment variables for security
+# Set HAZO_CONNECT_POSTGREST_API_KEY or POSTGREST_API_KEY in your .env file
+# DO NOT put API keys in this config file
 # postgrest_api_key = 
 
 [hazo_auth__register_layout]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_auth",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "files": [
     "src/**/*",
     "public/file.svg",
@@ -101,8 +101,8 @@
     "@types/react-dom": "^18",
     "better-sqlite3": "^12.4.1",
     "cross-env": "^10.1.0",
-    "eslint": "^8",
-    "eslint-config-next": "^14.2.7",
+    "eslint": "^9.0.0",
+    "eslint-config-next": "^16.0.3",
     "eslint-plugin-storybook": "^10.0.6",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/app/api/hazo_auth/resend_verification/route.ts

@@ -52,20 +52,21 @@ export async function POST(request: NextRequest) {
     });
 
     if (!result.success) {
-      logger.warn("resend_verification_failed", {
+      logger.error("resend_verification_failed", {
         filename: get_filename(),
         line_number: get_line_number(),
         email,
         error: result.error,
       });
 
-      // Still return 200 OK to prevent email enumeration attacks
+      // Return error response (500) when email sending fails
+      // This is a technical error, not a security issue, so we can reveal it
       return NextResponse.json(
         {
-          success: true,
-          message: "If an account with that email exists and is not verified, a verification link has been sent.",
+          success: false,
+          error: result.error || "Failed to resend verification email",
         },
-        { status: 200 }
+        { status: 500 }
       );
     }
 

package/src/components/layouts/email_verification/hooks/use_email_verification.ts

@@ -155,10 +155,10 @@ export const use_email_verification = <TClient,>({
       return true;
     }
 
-    const hasEmptyField = Object.values(values).some((fieldValue) => fieldValue.trim() === "");
-    const hasErrors = Object.keys(errors).length > 0;
-    return hasEmptyField || hasErrors;
-  }, [errors, values, isSubmitting]);
+    // Only disable if there are active errors
+    const hasErrors = !!errors[EMAIL_VERIFICATION_FIELD_IDS.EMAIL];
+    return hasErrors;
+  }, [errors, isSubmitting]);
 
   const handleFieldChange = useCallback((fieldId: EmailVerificationFieldId, value: string) => {
     setValues((previousValues) => {
@@ -231,7 +231,13 @@ export const use_email_verification = <TClient,>({
           }),
         });
 
-        const data = await response.json();
+        let data;
+        try {
+          data = await response.json();
+        } catch (jsonError) {
+          // If JSON parsing fails, the response is likely HTML (e.g., error page)
+          throw new Error("Server returned an invalid response. Please try again later.");
+        }
 
         if (!response.ok) {
           throw new Error(data.error || "Failed to resend verification email");

package/src/lib/hazo_connect_instance.server.ts

@@ -38,36 +38,60 @@ export function get_hazo_connect_instance(): HazoConnectAdapter {
   try {
     // Get configuration from hazo_auth_config.ini (falls back to environment variables)
     const config_options = get_hazo_connect_config_options();
+    const logger = create_app_logger();
+    logger.debug("hazo_connect_singleton_attempt", {
+      filename: "hazo_connect_instance.server.ts",
+      line_number: 38,
+      config_options,
+      note: "Attempting to get singleton with these options",
+    });
     return getHazoConnectSingleton(config_options);
   } catch (error) {
+    const logger = create_app_logger();
+    const error_message = error instanceof Error ? error.message : "Unknown error";
+    logger.error("hazo_connect_singleton_failed", {
+      filename: "hazo_connect_instance.server.ts",
+      line_number: 45,
+      error: error_message,
+      error_stack: error instanceof Error ? error.stack : undefined,
+      note: "Falling back to manual singleton implementation",
+    });
+    
     // Fallback: Manual singleton implementation if new API fails
     // This should not happen with the updated package, but kept for safety
     if (!hazoConnectInstance) {
-      // Initialize admin service first (if not already done)
-      if (!isInitialized) {
+      // Get config options to determine database type
+      const config_options = get_hazo_connect_config_options();
+      const db_type = config_options.type;
+      
+      // Only initialize SQLite admin service for SQLite databases
+      if (db_type === "sqlite" && !isInitialized) {
         initializeAdminService({ enable_admin_ui: true });
         isInitialized = true;
       }
       
       // Create the adapter instance (reads from hazo_auth_config.ini)
+      // Note: Despite the name, this function supports both SQLite and PostgREST
       hazoConnectInstance = create_sqlite_hazo_connect_server();
 
       // Note: Database migrations should be applied manually via SQLite Admin UI
       // or through a separate migration script. The token_service has fallback
       // logic to work without the token_type column if migration hasn't been applied.
 
-      // Finalize initialization by getting the admin service.
-      try {
-        getSqliteAdminService();
-      } catch (adminError) {
-        const logger = create_app_logger();
-        const error_message = adminError instanceof Error ? adminError.message : "Unknown error";
-        logger.warn("hazo_connect_instance_admin_service_init_failed", {
-          filename: "hazo_connect_instance.server.ts",
-          line_number: 0,
-          error: error_message,
-          note: "Could not get SqliteAdminService during initialization, continuing...",
-        });
+      // Finalize initialization by getting the admin service (only for SQLite)
+      if (db_type === "sqlite") {
+        try {
+          getSqliteAdminService();
+        } catch (adminError) {
+          const logger = create_app_logger();
+          const error_message = adminError instanceof Error ? adminError.message : "Unknown error";
+          logger.warn("hazo_connect_instance_admin_service_init_failed", {
+            filename: "hazo_connect_instance.server.ts",
+            line_number: 0,
+            error: error_message,
+            note: "Could not get SqliteAdminService during initialization, continuing...",
+          });
+        }
       }
     }
     

package/src/lib/hazo_connect_setup.server.ts

@@ -100,8 +100,10 @@ function get_hazo_connect_config(): {
       hazo_connect_section?.postgrest_url ||
       process.env.HAZO_CONNECT_POSTGREST_URL ||
       process.env.POSTGREST_URL;
+    // API key must only come from environment variables for security
+    // Check multiple possible env var names for compatibility
     const postgrest_api_key =
-      hazo_connect_section?.postgrest_api_key ||
+      process.env.postgrest_api_key ||  // hazo_connect package expects this
       process.env.HAZO_CONNECT_POSTGREST_API_KEY ||
       process.env.POSTGREST_API_KEY;
 
@@ -141,10 +143,13 @@ export function create_sqlite_hazo_connect_server() {
   }
 
   if (config.type === "postgrest") {
+    // Ensure we have a value (empty string if not set, for PostgREST instances without auth)
+    const apiKey = config.postgrestApiKey || "";
+    
     return createHazoConnect({
       type: "postgrest",
       baseUrl: config.postgrestUrl!,
-      apiKey: config.postgrestApiKey,
+      apiKey: apiKey, // Pass empty string if not set
     });
   }
 
@@ -161,6 +166,8 @@ export function get_hazo_connect_config_options(): {
   sqlitePath?: string;
   enableAdminUi?: boolean;
   readOnly?: boolean;
+  postgrestUrl?: string;
+  postgrestApiKey?: string;
 } {
   const config = get_hazo_connect_config();
 
@@ -173,8 +180,15 @@ export function get_hazo_connect_config_options(): {
     };
   }
 
-  // PostgREST is not supported by the singleton API options yet
-  // Return empty object to let it use environment variables
+  if (config.type === "postgrest") {
+    return {
+      type: "postgrest",
+      baseUrl: config.postgrestUrl, // Corrected from postgrestUrl
+      apiKey: config.postgrestApiKey || "", // Corrected from postgrestApiKey and ensured string value
+    };
+  }
+
+  // Fallback: return empty object to let it use environment variables
   return {};
 }
 

package/src/lib/services/email_verification_service.ts

@@ -245,6 +245,12 @@ export async function resend_verification_email(
           error: email_result.error,
           note: "Verification token created but email failed to send",
         });
+        
+        // Return error if email sending failed (this is a technical error, not a security issue)
+        return {
+          success: false,
+          error: email_result.error || "Failed to send verification email",
+        };
       }
     }
 

package/src/middleware.ts

@@ -46,6 +46,7 @@ export async function middleware(request: NextRequest) {
     "/api/hazo_auth/reset_password",
     "/api/hazo_auth/verify_email",
     "/api/hazo_auth/validate_reset_token",
+    "/api/hazo_auth/resend_verification", // Allow resend verification email without auth
     "/api/hazo_auth/me", // Allow /api/hazo_auth/me to be public (returns authenticated: false if not logged in)
     "/hazo_connect/api/sqlite", // SQLite Admin API routes (admin tool, should be accessible)
     "/hazo_connect/sqlite_admin", // SQLite Admin UI page