Skip to content

Add React Native setup instructions for encrypted channels #2935

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add React Native setup instructions for encrypted channels #2935

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions src/pages/docs/channels/options/encryption.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,24 @@ Other attributes of messages and presence messages, such as event `name` and `cl

The key that's in use at any given time is known by the SDK. The Ably service only knows that a given message payload was encrypted, not the key used to encrypt it. When accessing messages using the history feature, it is the caller's responsibility to ensure that the correct key is configured for the channel before the history request is made.

<If lang="javascript">
Copy link
Contributor

@m-hulbert m-hulbert Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally this would should be React, and we'd provide some relevant sample code in the blocks.

<Aside data-type='note'>
To use encrypted channels in a React Native project, you’ll need to complete several additional setup steps.

React Native does **not** provide cryptographic primitives out of the box. Ably relies on the well-documented **WebCrypto** interfaces instead. In particular, Ably uses:

- `crypto.subtle.importKey`
- `crypto.subtle.encrypt`
- `crypto.subtle.decrypt`

Ably also depends on `TextDecoder` (Expo provides this by default; for bare React Native you’ll need to install it manually, e.g. [text-encoding](https://www.npmjs.com/package/text-encoding)) and `randomBytes`.

We recommend the following polyfills:
- `@react-native-module/randombytes` — for `randomBytes`
- `react-native-quick-crypto` — for WebCrypto (`crypto.subtle`)
</Aside>
</If>

## Encrypt a channel <a id="encrypt"/>

Set the `cipher` property to enable message encryption by passing a [`CipherParams`](/docs/api/realtime-sdk/encryption#cipher-params) object that contains at least a secret `key`.
Expand Down