[PR #25310] feat: implement trigger plugin authentication UI #31006

Closed
opened 2026-02-21 20:48:39 -05:00 by yindo · 0 comments
Owner

Original Pull Request: https://github.com/langgenius/dify/pull/25310

State: closed
Merged: Yes


Part of #24196

Summary

Implements trigger plugin frontend authentication UI integration with support for OAuth 2.0 and API Key authentication methods. This PR provides the complete user interface and workflow for trigger plugin authentication.

Frontend Changes

New Components:

  • AuthMethodSelector: Authentication method selector with OAuth and API Key options
  • OAuthClientConfigModal: OAuth client configuration modal with dynamic form fields
  • ApiKeyConfigModal: API Key configuration modal with credential input and validation
  • form-helpers.ts: Form utility functions for data sanitization and validation

Modified Files:

  • workflow-panel/index.tsx: Fixed authentication status check logic to properly validate credential_type !== 'unauthorized'
  • node-auth-factory.tsx: Enhanced OAuth flow handling and error notifications
  • use-oauth.ts: Improved OAuth callback processing with success/failure state handling
  • workflow.ts: Added internationalization text for all UI components

Technical Features:

  • Dynamic form generation based on provider schemas (no hardcoded fields)
  • Complete TypeScript type definitions and type safety
  • Form validation and error handling mechanisms
  • React Query state management and caching
  • Full internationalization support

Known Issues

1. OAuth Authentication Issue

Problem: OAuth flow fails because frontend sends masked credentials (client_id: "cl_***") instead of real values to backend.

  • Frontend credential masking replaces actual values with *** placeholders
  • Backend receives masked client_id and constructs invalid GitHub authorization URLs
  • GitHub authorization fails due to invalid client_id=cl_*** parameter

2. API Key Authentication Issue

Problem: API Key authentication completes create + verify steps but cannot complete build step.

  • repository parameter is required but has no default value (default: null)
  • Cannot provide valid repository during authentication phase
  • Results in subscription_builder existing but no final subscription record
  • Frontend checks /subscriptions/list which returns empty, causing authentication state to appear as "not authenticated"

Current Status

  • Frontend authentication UI is complete and functional
  • Authentication status detection logic is fixed
  • OAuth flow blocked by credential masking issue
  • API Key flow blocked by required parameter issue

Both authentication methods require backend fixes to complete the subscription creation process and properly display parameter configuration forms.

Screenshots

Before After
No authentication UI Complete OAuth/API Key selection interface

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/25310 **State:** closed **Merged:** Yes --- Part of [#24196](https://github.com/langgenius/dify/issues/24196) ## Summary Implements trigger plugin frontend authentication UI integration with support for OAuth 2.0 and API Key authentication methods. This PR provides the complete user interface and workflow for trigger plugin authentication. ### Frontend Changes **New Components:** - `AuthMethodSelector`: Authentication method selector with OAuth and API Key options - `OAuthClientConfigModal`: OAuth client configuration modal with dynamic form fields - `ApiKeyConfigModal`: API Key configuration modal with credential input and validation - `form-helpers.ts`: Form utility functions for data sanitization and validation **Modified Files:** - `workflow-panel/index.tsx`: Fixed authentication status check logic to properly validate `credential_type !== 'unauthorized'` - `node-auth-factory.tsx`: Enhanced OAuth flow handling and error notifications - `use-oauth.ts`: Improved OAuth callback processing with success/failure state handling - `workflow.ts`: Added internationalization text for all UI components **Technical Features:** - Dynamic form generation based on provider schemas (no hardcoded fields) - Complete TypeScript type definitions and type safety - Form validation and error handling mechanisms - React Query state management and caching - Full internationalization support ### Known Issues #### 1. OAuth Authentication Issue **Problem**: OAuth flow fails because frontend sends masked credentials (`client_id: "cl_***"`) instead of real values to backend. - Frontend credential masking replaces actual values with `***` placeholders - Backend receives masked `client_id` and constructs invalid GitHub authorization URLs - GitHub authorization fails due to invalid `client_id=cl_***` parameter #### 2. API Key Authentication Issue **Problem**: API Key authentication completes `create` + `verify` steps but cannot complete `build` step. - `repository` parameter is required but has no default value (`default: null`) - Cannot provide valid repository during authentication phase - Results in `subscription_builder` existing but no final `subscription` record - Frontend checks `/subscriptions/list` which returns empty, causing authentication state to appear as "not authenticated" ### Current Status - ✅ Frontend authentication UI is complete and functional - ✅ Authentication status detection logic is fixed - ❌ OAuth flow blocked by credential masking issue - ❌ API Key flow blocked by required parameter issue Both authentication methods require backend fixes to complete the subscription creation process and properly display parameter configuration forms. ## Screenshots | Before | After | |--------|-------| | No authentication UI | Complete OAuth/API Key selection interface | ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:48:39 -05:00
yindo closed this issue 2026-02-21 20:48:39 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#31006