LiteRequest/spec/feature-auth.md

Feature Request: Authentication Support

Context: We are upgrading the "LiteRequest" Tauri + Vue application. Currently, it supports Headers, Params, and Body. Goal: Add a dedicated "Auth" tab in the Request Configuration area to support common authentication methods.

1. Functional Requirements

1.1 Supported Auth Types

The user should be able to select one of the following from a dropdown:

1. No Auth (Default)
2. Basic Auth: Inputs for Username and Password.
3. Bearer Token: Input for Token (e.g., JWT).
4. API Key: Inputs for Key, Value, and a selection for Add To ("Header" or "Query Params").

1.2 State Management

• Update stores/requestStore.ts to include an auth state object.
• Structure:

  state: {
    // ... existing state
    auth: {
      type: 'none', // 'none' | 'basic' | 'bearer' | 'api_key'
      basic: { username: '', password: '' },
      bearer: { token: '' },
      apiKey: { key: '', value: '', addTo: 'header' } // addTo: 'header' | 'query'
    }
  }
  

• Persistence: These values should be saved to localStorage along with the request history (careful note: in a real app we would encrypt this, but for this local MVP, plain text storage is acceptable).

2. UI/UX Design

2.1 Request Panel Update

• In RequestPanel.vue, add a new Tab labeled "Auth" (place it first, before "Params").
• Layout:
  • Type Selector: A styled <select> or dropdown menu at the top of the tab content.
  • Dynamic Form:
    • If No Auth: Show a subtle message "This request does not use any authentication."
    • If Basic Auth: Two fields (Username, Password). Password field must use type="password" with a toggle to show/hide.
    • If Bearer Token: One large text area or input for the Token. Prefix it visually with "Bearer ".
    • If API Key: Three inputs: Key (text), Value (text/password), Add To (Radio button or Select).

2.2 Aesthetic Guidelines

• Maintain the Dark Mode (Slate/Zinc) theme.
• Inputs should look identical to the existing inputs in the "Headers" tab (rounded, dark background, border-slate-700).
• Use lucide-vue-next icons (e.g., ShieldCheck icon for the Tab label).

3. Technical Implementation Details

A. Frontend Logic (requestStore.ts & Component)

• The Frontend needs to package this Auth data and send it to the Rust backend.
• Important: Do not manually inject these into the headers list in the frontend UI (to avoid state sync issues). Pass the auth configuration as a separate object to the Rust command.

B. Backend Logic (main.rs)

• Update the execute_request Tauri command signature to accept an auth argument.
• Logic Update:
  • Use reqwest built-in methods:
  • Basic: .basic_auth(username, Some(password))
  • Bearer: .bearer_auth(token)
  • API Key:
    • If addTo == "header": Manually .header(key, value)
    • If addTo == "query": Manually append to the query params.

4. Implementation Steps for AI

Please generate the code updates in the following order:

1. Store Update: Modify stores/requestStore.ts to add the auth state structure.
2. UI Component: Create a new component components/AuthPanel.vue (or code to be added inside RequestPanel.vue) that handles the form switching and inputs.
3. Rust Backend: Update main.rs. Define the Auth struct (using serde::Deserialize) and update the execute_request logic to apply the auth.
4. Integration: Show how to update the execute_request invocation in the frontend to pass this new data.

---

Instruction to AI: Generate the code to implement these Authentication features. Ensure the UI matches the existing modern style (Tailwind CSS).