Skip to content

Conversation

@eslachance
Copy link
Contributor

@eslachance eslachance commented Nov 22, 2025

Description

Currently, react-vnc requires a WebSocket URL and handles the connection internally. However, many VNC servers require custom authentication flows (cookie-based auth, token-based auth, MessagePack handshakes, etc.) that must be completed before the VNC protocol can begin.

This enhancement allows users to:

  • Handle authentication outside the component before passing the WebSocket
  • Use cookie-based authentication systems
  • Implement custom handshake protocols
  • Reuse or pool WebSocket connections
  • Integrate with existing authentication infrastructure

API Changes

Added a new optional prop websocket to the VncScreen component:

interface Props {
    url?: string;          // Made optional (was required)
    websocket?: WebSocket; // New prop for pre-authenticated connections
    // ... other props remain unchanged
}
  • Either url or websocket must be provided
  • When websocket is provided, it takes precedence over url
  • Maintains full backward compatibility - existing code using url continues to work unchanged

Implementation Details

  • Updated RFB initialization to accept either URL string or WebSocket instance (noVNC already supports both)
  • Disabled automatic retry logic when using external WebSocket (connection lifecycle is managed externally)
  • Added comprehensive TSDoc comments explaining the use case and providing examples
  • Updated README with usage examples for pre-authenticated WebSocket pattern

Before submitting the PR, please take the following into consideration

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. If you don't have an issue, please create one.
  • Prefix your PR title with feat: , fix: , chore: , docs:, or refactor:.
  • The description should clearly illustrate what problems it solves.
  • Ensure that the commit messages follow our guidelines.
  • Resolve merge conflicts (if any).
  • Make sure that the current branch is upto date with the main branch.

…be pre-authenticated

Currently, `react-vnc` requires a WebSocket URL and handles the connection internally. However, many
VNC servers require custom authentication flows (cookie-based auth, token-based auth, MessagePack
handshakes, etc.) that must be completed before the VNC protocol can begin.
@eslachance
Copy link
Contributor Author

I'll note that this change works already in our local code. The websocket is already pre-existing and re-used for multiple connections through a web interface including SSH and file transfers. Tried to implement novnc directly but that failed miserably, so honestly, patching react-vnc was the easiest course of action. Since it's not a breaking change and just offers more functionality I thought I'd contribute back the change.

As of now we've published the patched version in our internal npm repository, but if this PR is merged and released we'll be able to keep using real-vnc directly from npm, so we get security patches and updates. That would definitely be the preferred course of action :D

@roerohan
Copy link
Owner

@eslachance I really appreciate the contribution! This PR looks good to me, I'll merge it and release a new version.

@roerohan roerohan merged commit 8589e75 into roerohan:main Nov 22, 2025
3 checks passed
@github-actions
Copy link
Contributor

🎉 This PR is included in version 3.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@eslachance
Copy link
Contributor Author

Awesome, thank you very much for the quick turnaround! Just verified updating works perfectly fine in our implementation.
You rock :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants