Authentication

In order to use the features of Sendbird UIKit for React Native in your client app, you need to wrap your app in the SendbirdUIKitContainer component. This page explains how to authenticate your user with the server.

Connect a user to the Sendbird server using the connect() method of useConnection() hook with the information you provided. The connect() method also automatically updates the user profile on the server.

With local caching added to Sendbird Chat SDK, the latest user instance may be returned through the promise object even when the user is offline. The local caching functionality stores message and channel data in the local storage and the Sendbird server. As a result, even when a user is not connected to the server, the user information stored in the local cache is returned through the callback along with an error indicating the offline status.

Refer to the code below to see how to connect a user to the Sendbird server:

import { useConnection } from '@sendbird/uikit-react-native';

const Component = () => {
    const { connect } = useConnection();

    connect('USER_ID', { nickname: 'NICKNAME', accessToken: 'ACCESS_TOKEN' })
        .then((_user) => {
            // 1. The user is online and connected to the server.
            // 2. The user is offline but you can access user information stored
            // in the local cache.
        })
        .catch((_err) => {
            // The user is offline and you can't access any user information stored
            // in the local cache.
        });
};

Call the disconnect() method of useConnection() hook if a user requests to log out. If a user has been logged out and thus disconnected from the server, they will no longer receive messages.

const Component = () => {
    const { disconnect } = useConnection();

    disconnect();
}

By calling the useSendbirdChat() hook, you can retrieve the online status of the current user.

import { useSendbirdChat } from '@sendbird/uikit-react-native';

const Component = () => {
    const { currentUser } = useSendbirdChat();

    if (currentUser) {
        // User is online.
    } else {
        // User is offline.
    }
}

Push notifications are a type of notification sent to your user's device when a client app is running in the background. In UIKit for React Native, you can automatically register or unregister push notifications while connecting/disconnecting a user from the server. In order to use the push notification service, you need to register the user's device token to Sendbird sever. To do so, set NotificationServiceInterface in SendbirdUIKitContainer as a platform service as shown in the code below.

import RNFBMessaging from '@react-native-firebase/messaging';
import * as Permissions from 'react-native-permissions';
import { SendbirdUIKitContainer, createNativeNotificationService } from '@sendbird/uikit-react-native';

const NotificationService = createNativeNotificationService({
    messagingModule: RNFBMessaging,
    permissionModule: Permissions,
});

const App = () => {
    return (
        <SendbirdUIKitContainer
            appId={'APP_ID'}
            platformServices={{ notification: NotificationService }}
        />
    );
};

You should unregister a user's push token from the Sendbird server if you don't want to send push notifications to the user. By default, the push token registration is turned on for every user. You can turn it off by setting the enableAutoPushTokenRegistration method to false.

const App = () => {
    return (
        <SendbirdUIKitContainer
            chatOptions={{ enableAutoPushTokenRegistration: false }}
        />
    );
};

When a user first creates an account with a unique ID, UIKit automatically generates a nickname and profileImage based on the specified userId. Through the updateCurrentUserInfo method of useSendbirdChat() hook, you can modify user information and retrieve their online status.

const Component = () => {
    const { updateCurrentUserInfo } = useSendbirdChat();

    const update = async () => {
        const updatedUserWithUrl = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');

        // Or you can update the profile image file.
        const updatedUserWithFile = await updateCurrentUserInfo('NICKNAME', PROFILE_FILE);
    }
}