Suggestions

Searching ...

This topic includes details on using end-to-end encryption in the Vonage Video client SDK for React Native:

• Setting the encryption secret
• Events and errors

For an overview of end-to-end encryption, see this topic.

Setting the encryption secret

End-to-end encrypted sessions are created using server APIs (see Enabling encryption using the REST API). To have a React Native client join an end-to-end encrypted session, set the encryptionSecret prop of the OTSession component:

<OTSession
  apiKey="api-key"
  sessionId="session-id"
  token="token"
  encryptionSecret="initial-encryption-secret"
>
  <OTPublisher />
  <OTSubscriber />
</OTSession>

A valid secret is a string between 8 and 256 characters.

You can change the secret by setting the encryptionSecret prop to a property of the React state and changing its value:

<OTSession
  apiKey="api-key"
  sessionId="session-id"
  token="token"
  encryptionSecret={this.state.encryptionSecret}>
>
  <OTPublisher />
  <OTSubscriber />
</OTSession>

Events and errors

Events and errors are essential to managing the behavior of user-driven encryption behavior. End-to-end encryption uses the shared secret model: everyone in the session is expected to use the same secret to encrypt their media and decrypt everyone else's.

The OTSubscriber error() event handler callback is invoked when the subscriber is unable to decode a stream's media due to a mismatched (or unset) encryption secret:

  <OTSubscriber
    eventHandlers={{
      error: event => {
        // Show UI notification.
      },
    }}
  >

The OTSession error() event handler callback is invoked if the client tries to connect to an end-to-end encrypted session that was initialized with an invalid encryption secret (or without specifying an encryption secret). A valid secret is a string between 8 and 256 characters. For the best user experience, the application should catch an invalid user supplied secret before setting the OTSession encryptionSecret prop. In the following example, a session is initialized with an empty (and thus invalid) secret, which causes an error when attempting to connect:

<OTSession
  apiKey="api-key"
  sessionId="session-id"
  token="token"
  encryptionSecret=""
  eventHanders={{
    error: event => {
      // An error event is dispatched if you set an invalid encryption secret
    }
  }}
>
  <OTPublisher />
  <OTSubscriber />
</OTSession>