Authentication

In order to use the features of Sendbird UIKit for React in your client apps, a SendBird instance must be initiated in each client app through user authentication with Sendbird server. UIKit automatically manages the app state and reconnection logic for you. Core features of Sendbird Chat SDK for JavaScript can be used with the withSendBird() high-order component (HOC) as below.

Note : To manually manage connections, extract the connect(), disconnect(), updateUserInfo() functions from the getConnect, getDisconnect, and getUpdateUserInfo in sendBirdSelectors.

The UIKit functions are identical to the Sendbird Chat SDK’s functions, except that instead of returning the callback function, it returns the Promise object instead. To learn more about authentication, refer to the Authentication page of our chat SDK for JavaScript documentation.

import {
    withSendBird,
    sendBirdSelectors
} from "sendbird-uikit";

const MyComponent = props => (
    <button onClick={() => props
        .connect(userId, accessToken)
        .then(user => {...})
        .catch(error => {...})
    } />
);

const CustomComponent = withSendBird(MyComponent,
    state => ({ // Mapping context state to props
        connect: sendBirdSelectors.getConnect(state),
        ...
    })
);

There are two ways to update a user profile:

• Passing a user's nickname and profile URL through the SendBirdProvider.
• Using the withSendBird and sendBirdSelectors.