Skip to content

Refactor auth endpoints and add React frontend#9

Draft
sibapybot wants to merge 13 commits intomainfrom
fix/rfc-compliant-auth-errors
Draft

Refactor auth endpoints and add React frontend#9
sibapybot wants to merge 13 commits intomainfrom
fix/rfc-compliant-auth-errors

Conversation

@sibapybot
Copy link
Member

Changes

This PR introduces two major changes:

  1. Refactor authentication and authorization endpoints to be RFC-compliant and JSON-based

    • Update login endpoint to return JSON responses
    • Update auth endpoint to return JSON responses
    • Add proper error handling with RFC-compliant error responses
    • Remove template-based responses
    • Add CORS support for frontend integration
  2. Add React-based frontend implementation

    • Create new React project with TypeScript
    • Implement login page with form validation
    • Implement authorization page with scope display
    • Add API client with proper error handling
    • Add type definitions for API responses

Technical Details

Backend Changes

  • Convert all HTML template responses to JSON responses
  • Implement RFC-compliant error responses for OAuth 2.0 and OpenID Connect
  • Add CORS middleware to support frontend integration
  • Improve error handling and validation

Frontend Implementation

  • Use Vite for project setup
  • Use Mantine for UI components
  • Use React Router for routing
  • Use Axios for API calls
  • Implement proper type checking with TypeScript

Testing

The changes have been tested manually with the following scenarios:

  • Login with valid credentials
  • Login with invalid credentials
  • Authorization flow with new application
  • Authorization flow with previously authorized application
  • Error handling for various scenarios

Security Considerations

  • CSRF protection is maintained
  • Session management is improved
  • Secure cookie settings are enforced
  • CORS is properly configured
  • Error messages are standardized

Next Steps

  • Add frontend tests
  • Improve error handling
  • Add loading states
  • Improve styling
  • Add accessibility support

Breaking Changes

  • All endpoints now return JSON instead of HTML
  • Frontend applications need to be updated to handle new response formats
  • Template-based responses are removed

Related Issues

  • Fixes #XXX (Replace with actual issue number if applicable)

- Update login endpoint to return JSON responses
- Update auth endpoint to return JSON responses
- Add proper error handling with RFC-compliant error responses
- Remove template-based responses
- Add CORS support for frontend integration
- Update login endpoint to return JSON responses
- Update auth endpoint to return JSON responses
- Add proper error handling with RFC-compliant error responses
- Remove template-based responses
- Add CORS support for frontend integration
@datadog-unipro-tech
Copy link

datadog-unipro-tech bot commented Aug 12, 2025

⚠️ Code Quality    ✅ Code Vulnerabilities    ✅ Libraries

⚠️ Warnings

🛠️ 5 Code quality issues detected

Medium: typescript-best-practices/boolean-prop-naming Consistent naming for boolean props View rule
frontend/src/types/index.ts:8
Medium: typescript-best-practices/triple-slash-reference Avoid triple slash in favor of ES6 import declarations View rule
frontend/src/vite-env.d.ts:1
Medium: typescript-best-practices/no-explicit-any Avoid the any type View rule
frontend/src/pages/AuthorizePage.tsx:26
View all

ℹ️ Info

🛡️ No new code vulnerabilities
📚 No new vulnerable libraries detected

This comment will be updated automatically if new data arrives.
🔗 Commit SHA: 67b96d9 | Docs | Was this helpful? Give us feedback!

}

export interface LoginResponse {
success: boolean;
Copy link

@datadog-unipro-tech datadog-unipro-tech bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 Medium: Code Quality Violation

Prop name (success) doesn't match rule (is|has) (...read more)

Enforces a consistent naming pattern for boolean props.

The pattern is: "^(is|has)[A-Z]([A-Za-z0-9]?)+" to enforce is and has prefixes.

View in Datadog  Leave us feedback  Documentation

nonce: params.get('nonce') || undefined,
});
setAuthData(data);
} catch (error: any) {
Copy link

@datadog-unipro-tech datadog-unipro-tech bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 Medium: Code Quality Violation

Unexpected any. Specify a different type. (...read more)

Do not use the any type, as it is too broad and can lead to unexpected behavior.

View in Datadog  Leave us feedback  Documentation

@@ -0,0 +1 @@
/// <reference types="vite/client" />
Copy link

@datadog-unipro-tech datadog-unipro-tech bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 Medium: Code Quality Violation

Do not use a triple slash reference for vite/client, use 'import' style instead. (...read more)

Use ESM instead of references.

View in Datadog  Leave us feedback  Documentation

success: true,
redirect_url: response.data.redirect_url,
};
} catch (error: any) {
Copy link

@datadog-unipro-tech datadog-unipro-tech bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 Medium: Code Quality Violation

Unexpected any. Specify a different type. (...read more)

Do not use the any type, as it is too broad and can lead to unexpected behavior.

View in Datadog  Leave us feedback  Documentation

nonce: params.get('nonce') || undefined,
});
window.location.href = redirectUrl;
} catch (error: any) {
Copy link

@datadog-unipro-tech datadog-unipro-tech bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟠 Medium: Code Quality Violation

Unexpected any. Specify a different type. (...read more)

Do not use the any type, as it is too broad and can lead to unexpected behavior.

View in Datadog  Leave us feedback  Documentation

openhands-agent and others added 9 commits August 12, 2025 12:50
- Add Node.js container for frontend development
- Configure Vite for Docker environment
- Add CORS and host settings
- Link frontend with backend API
- Update auth endpoint to handle both JSON and redirect responses
- Add content negotiation based on Accept header
- Fix frontend routing with proper basename
- Update CORS settings for better integration
- Add LoginRequest schema for request body validation
- Update login endpoint to use Pydantic model
- Fix CSRF token validation
- Add proper error handling for validation errors
- Add content negotiation based on Accept header
- Update login endpoint to handle both browser and API requests
- Add Accept header to frontend API client
- Fix CSRF token handling
- Forward query parameters from React to API
- Update login function to include query string
- Update CSRF token fetch to include query string
- Fix dependency array in useEffect
openhands-agent and others added 2 commits August 13, 2025 01:54
- Add nginx configuration for single domain
- Update docker-compose to include nginx service
- Update frontend API URL to use relative path
- Update CORS settings for nginx domain
- Fix redirect URLs to be relative
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants