Password Manager Component

The Password Manager component provides secure password input UI, validation, and integration with keyboard components for password-protected interactions in your Hyperfy world. Think of it as a comprehensive password system that can handle secure input, validation, and seamless integration with virtual keyboards.

Important: This component creates a password input interface that appears when triggered and validates user input against a master password. It works seamlessly with keyboard components to provide secure password input and can emit events on success/failure.

Download Component

What Does It Do?

The Password Manager component is like having a secure password system for your 3D world. You can:

• Create password input UI that appears when triggered
• Validate passwords against a master password you set
• Integrate with virtual keyboards for secure input
• Emit success/failure events for other components to handle
• Sync password UI state across all players in multiplayer environments
• Control password input visibility through events
• Handle secure authentication for protected content

Important: This component creates a floating password input interface that appears when activated. Players input passwords using virtual keyboards, and the component validates them against your master password. It's designed to work seamlessly with keyboard components for secure input.

Video Demo

Watch the Password Manager component in action: password input UI, secure validation, keyboard integration, and synchronized effects across all players.

Properties

Basic Settings

Property	Type	Default	Description
App ID	text	Auto	Unique name for this component (auto-generated)
Node Name	text	""	Required: Name of the 3D object in your scene
Debug Logs	toggle	false	Show detailed information for troubleshooting
Add Collision	toggle	true	Make the object solid (players can't walk through)
Start Visible	toggle	true	Should the object be visible when the scene loads?

Password Manager Settings

Property	Type	Default	Description
Designer Mode	toggle	false	Show password input UI in designer mode for testing
Master Password	text	""	Required: The password that will be validated against user input
Title	text	"Enter Password"	Title displayed in the password input UI

Signal Settings

Property	Type	Default	Description
Receiver ID	text	""	ID for receiving visibility control signals from other components

How Events Work

The Password Manager component listens for events to control password input visibility and emits events when passwords are validated. It also integrates with keyboard components to receive key press events. The component uses its unique App ID (generated by Hyperfy) to identify itself in the event system.

Action Types

Action	Description	Parameters
show-password-input	Show the password input UI	None
hide-password-input	Hide the password input UI	None
validate-password	Validate a password against the master password	password (string)

Emitted Events

The component automatically emits these events when passwords are validated:

Event	Description	Payload
password-success-<appID>	Emitted when password validation succeeds	{ userId, timestamp }
password-error-<appID>	Emitted when password validation fails	{ userId, timestamp }

Keyboard Integration Events

The component listens for these events from keyboard components:

Event	Description	Parameters
keypad-character-<keyboardID>	Adds character to password input	{ character: 'a' }
keypad-backspace-<keyboardID>	Removes last character from password input	None
keypad-enter-<keyboardID>	Triggers password validation	None

Visibility Control Events

The component listens for these events to control password input visibility:

Event	Description	Parameters
visibility-<receiverID>	Controls password input visibility	{ isVisible: true/false }

Common Use Cases

1. Secure Door Access

• Object: A password-protected door
• Event: Player approaches door
• Action: Password input UI appears, door unlocks on success

2. Admin Panel Access

• Object: An admin control panel
• Event: Player needs admin access
• Action: Password input UI shows, admin features unlock on success

3. Treasure Chest Protection

• Object: A valuable item container
• Event: Player interacts with chest
• Action: Password input UI appears, chest opens on success

4. VIP Area Access

• Object: A restricted area entrance
• Event: Player wants to enter VIP area
• Action: Password input UI shows, access granted on success

5. Secure Information Access

• Object: A secure information terminal
• Event: Player needs to access sensitive data
• Action: Password input UI appears, information revealed on success

Step-by-Step Setup

1. Add the Component

• Drag the Password Manager component into your scene
• Select the 3D object you want to associate with password protection

2. Configure Basic Settings

• Set the Node Name to match your 3D object's name
• Choose if the object should Start Visible
• Decide if it should Add Collision (be solid)

3. Set Up Password System

• Enter your Master Password (the code players need to know)
• Set a Title for the password input interface
• Enable Designer Mode for testing during development

4. Configure Signal Settings

• Set Receiver ID for visibility control events
• This ID will be used by other components to control the password UI

5. Integrate with Keyboard Component

• Configure a keyboard component to work with this password manager
• Ensure the keyboard component's events are properly connected
• Test the integration between components

6. Test Your Setup

• Enable Debug Logs to see what's happening
• Test password input and validation
• Check that all players see the same password interface

Tips for Designers

Choosing Good Passwords

• Use memorable but secure passwords
• Consider the theme of your world (e.g., "Dragon2024" for fantasy)
• Avoid overly complex codes that players might forget
• Test passwords with friends to ensure they're reasonable

Planning Your Password System

• Think about when players should see the password UI
• Consider timing and delays for dramatic reveals
• Plan for both single-player and multiplayer scenarios
• Design clear visual cues for password-protected areas

Testing Your Setup

• Always test with multiple players
• Use debug logs to troubleshoot issues
• Test edge cases (what happens if players disconnect?)
• Verify password validation works correctly

Performance Considerations

• Password validation is instant - minimal performance impact
• Consider the impact on player experience
• Test with different screen sizes and devices

Troubleshooting

Password Input Not Showing

• Check that the node is visible
• Verify Receiver ID configuration
• Ensure proper event emission for visibility control
• Test with Designer Mode enabled

Keyboard Not Working

• Verify keyboard component is properly configured
• Check event naming consistency between components
• Test keyboard events independently
• Ensure proper integration between components

Password Validation Not Working

• Ensure Master Password is set correctly
• Check that the password field isn't empty
• Verify the password matches exactly (case-sensitive)
• Use debug logs to see validation attempts

Events Not Triggering

• Check that the event id matches exactly
• Verify the Event Listeners JSON format is correct
• Test with Accept Any Event enabled
• Use debug logs to see event reception

Integration Issues

• Verify keyboard component is properly configured
• Check event naming consistency between components
• Test keyboard events independently
• Ensure proper event flow between components

Best Practices

• Start Simple: Test with basic password validation before adding complexity
• Use Clear Passwords: Make your master password memorable but secure
• Plan for Multiplayer: Consider how password UI affects all players
• Test Integration: Always test keyboard integration thoroughly
• Use Debug Logs: Enable debug mode during development
• Document Your Setup: Keep notes on your password and event configurations
• Design Clear Triggers: Make it obvious when players should see the password UI
• Consider Accessibility: Ensure password UI is accessible to all players
• Test Thoroughly: Always test with multiple players and scenarios
• Provide Fallbacks: Consider fallback input methods for different devices

Security Considerations

• Player Experience: Balance security with usability
• Testing: Always test password validation thoroughly
• Documentation: Keep passwords documented for testing purposes
• Updates: Consider changing passwords if they become compromised
• Access Control: Ensure only authorized players can access protected content

Integration Examples

Keyboard Integration

// Listen for keyboard events
app.on('keypad-character-keyboard123', ({ character }) => {
  // Add character to password input
  passwordInput += character;
});

app.on('keypad-backspace-keyboard123', () => {
  // Remove last character
  passwordInput = passwordInput.slice(0, -1);
});

app.on('keypad-enter-keyboard123', () => {
  // Validate password
  validatePassword(passwordInput);
});

Password Validation Events

// Listen for password validation results
app.on('password-success-password123', ({ userId, timestamp }) => {
  // Password was correct - grant access
  grantAccess(userId);
});

app.on('password-error-password123', ({ userId, timestamp }) => {
  // Password was incorrect - deny access
  denyAccess(userId);
});

Visibility Control

// Show password input
world.emit('visibility-password123', { isVisible: true });

// Hide password input
world.emit('visibility-password123', { isVisible: false });