Authentication

There are two primary authentication methods for Hero Elements, based on the component type:

  1. API key (React components)
  2. Access Token (Web components)

API key

React component Elements are authenticated by passing the following props to the component:

Copy
Copied
env: 'staging' | 'production',
tenantId: '${practiceGroupId}',
apiKey: '${apiKey}'

Your API key and tenant ID will be provided to you by Hero support during onboarding.

Secure Handling of apiKey

Do not expose your API Key directly. Avoid hard-coding or exposing the API key directly in a pure frontend environment. Exposing sensitive credentials in client-side code can lead to security vulnerabilities, as it can be easily accessed by anyone inspecting your application. The recommended best practices are:

Use a Vault: Consider using a secure vault service to store your API keys. This method allows you to retrieve the keys securely at runtime without exposing them in your client-side code.

Backend endpoint: Another secure approach is to create a backend endpoint for your application. This endpoint can dynamically provide the API key to your frontend based on the session or other security checks. This way, the key is never exposed directly in the frontend and is securely transmitted only when needed.

Example