End-to-End Encryption (E2EE) - React Native

Overview

End-to-end encryption (E2EE) ensures that your media content remains private and secure by encrypting it on the sender's device and decrypting it only on the receiver's device. This prevents intermediaries, including VideoSDK servers, from accessing or modifying the content.

E2EE is particularly important for applications in security-critical domains such as telehealth, finance, and legal services.

How E2EE Works

• E2EE is applied at the room level, where a single shared key encrypts and decrypts all media tracks during a session.
• Participants without the key cannot access the media.
• The entire encryption process is handled client-side. VideoSDK does not access or store any encryption keys.

Key Management & Distribution

You are fully responsible for generating, managing, and securely distributing encryption keys to all participants. VideoSDK never stores, accesses, or transfers your encryption keys.

• Common Key Distribution Approaches:
  • Generate the key on your server when creating a room.
  • Send the key securely along with the room access token.
  • Use HTTPS-secured API calls to fetch the key on the client.

important

⚠️ Ensure that all participants have access to the correct encryption key before joining the room.

Enabling E2EE in VideoSDK React Native

To enable E2EE in VideoSDK for React Native, create a BaseKeyProvider, set the shared key on it, and register it with setKeyProvider() before the room joins:

import { useEffect, useState } from "react";
import {
  BaseKeyProvider,
  RoomProvider,
  setKeyProvider,
} from "@videosdk.live/react-native-sdk";

export default function App() {
  const [isKeyReady, setIsKeyReady] = useState(false);

  useEffect(() => {
    const setUpE2EE = async () => {
      const keyProvider = new BaseKeyProvider();
      keyProvider.setSharedKey("<YOUR-SECURE-KEY>");
      await setKeyProvider(keyProvider);
      setIsKeyReady(true);
    };
    setUpE2EE();
  }, []);

  if (!isKeyReady) return null;

  return (
    <RoomProvider
      config={{
        roomId: "room-id",
        micEnabled: true,
        camEnabled: true,
        participantName: "Test User",
      }}
      token="your-token"
    >
      <RoomView />
    </RoomProvider>
  );
}

warning

Register the key provider with setKeyProvider() before the room joins. A provider registered after the room joins does not encrypt that room. It is used from the next room you join.

• The key provider applies to every room in the app, not to one RoomProvider.
• getKeyProvider() returns the provider you registered, or null.
• setSharedKey() only stores the key on the provider. The key is used once you pass the provider to setKeyProvider(). An empty key throws 3073 ERROR_INVALID_PARAMETER.
• To turn E2EE off for later rooms, call removeKeyProvider(). setKeyProvider(null) rejects with ERROR_INVALID_PARAMETER (3073).
• To use a separate key for each participant instead of one shared key, call setParticipantKey(participantId, key). To remove it, call removeKey(participantId) on the registered provider, or pass null as the key. See the React Native SDK Reference for details.

Track the Encryption State

• onE2EEStateChanged of the useParticipant hook reports EncryptionSuccess when encryption of a participant's media starts. Decryption failures are not reported. A wrong or removed key shows only as the stream going dark.
• After removeKey(participantId), media from that participant stops being decrypted at once.

import { useParticipant } from "@videosdk.live/react-native-sdk";

function ParticipantEncryption({ participantId }) {
  useParticipant(participantId, {
    onE2EEStateChanged: ({ state, kind }) => console.log(kind, state),
  });
  return null;
}

To Check Whether E2EE Is Enabled

Read e2eeEnabled from the useRoom hook. It is true when the provider you registered with setKeyProvider() held a shared key or at least one participant key when the room joined. It is read at join and does not change during the room, and it does not confirm that encryption started. To learn when it starts, use onE2EEStateChanged of useParticipant().

import { useRoom } from "@videosdk.live/react-native-sdk";

const { e2eeEnabled } = useRoom();

console.log("is e2eeEnabled", e2eeEnabled);

Limitations

E2EE only applies to media. It does not apply to:

• Chat messages or metadata
• API calls and signaling data

These communications are still protected by TLS but are not encrypted end-to-end.

info

Recording and transcription features are not supported when End-to-End Encryption (E2EE) is enabled.