Mobile and React Native

Chat’s JavaScript libraries are built for browsers. This page says what a mobile or React Native app can use today and what it cannot, so you can plan around it.

Goal

Know which parts of Chat work in a mobile app, and what you must bring yourself.

Prerequisites

A way to sign users in and call your backend’s Chat token route. Sign-in is not part of Chat.
A backend that creates conversations. See Create direct conversations.

Steps

1. Sign users in with the Identity Server

Chat never starts a login. Sign-in for mobile apps belongs to the Identity Server. Follow its mobile guide. Then fetch the Chat token from your backend, as on the web. See Get the user’s Chat token.

2. Use the user client as it is

ccs-chat-user-client uses only the global fetch and has no other runtime dependency, so it has nothing browser-specific to polyfill. Pass your own fetch in the fetch option if your runtime has none.

3. Realtime needs an `EventSource`

ccs-chat-notifications-client opens the stream with EventSource, which is not universally available in a React Native runtime. Pass an implementation in eventSourceFactory. It must follow the standard shape (onopen, onmessage, onerror, readyState, close) and the standard readyState values, because the client treats state 2 as a closed stream. This path is untested by us today.

import { ChatUserClient } from '@central-code-station/ccs-chat-user-client';
import { ChatNotificationsClient, type ChatEventSourceLike } from '@central-code-station/ccs-chat-notifications-client';

// Any EventSource implementation works if it follows the standard shape and readyState values.
declare function createEventSource(url: string): ChatEventSourceLike;
// Your own code: fetch the Chat token from your backend's token route, with an absolute URL.
declare function getChatTokenFromBackend(): Promise<string>;

const context = {
  chatApiUrl: 'https://chat.centralcodestation.com/api/v1',
  tenantId: 'fitness',
  applicationId: 'fitness-app',
  getAccessToken: getChatTokenFromBackend,
};

export const chat = new ChatUserClient(context); // plain fetch, nothing to polyfill

export const live = new ChatNotificationsClient({
  ...context,
  eventSourceFactory: (url) => createEventSource(url),
});

4. Native push is not covered

The /push entry point uses the browser’s service worker and Push API. It does not run in a native app, and no library registers native devices for you. Plan for realtime while the app is open. See Roadmap and limitations.

Verify

Sign in, then call chat.capabilities() and chat.conversations.list(). If both succeed, the token and the context are right. For realtime, send a message from another user and check that your handler runs.

Troubleshooting

You see	Cause	Fix
`no EventSource implementation is available`	The runtime has no `EventSource`.	Pass `eventSourceFactory`.
`no fetch implementation is available`	The runtime has no global `fetch`.	Pass `fetch`.
Token route fails	A relative URL such as `/api/chat-token` does not work in a native app.	Use your backend’s absolute URL.