UIKit React Native v3
UIKit React Native
UIKit
React Native
Home
/
UIKit
/
React Native

Authentication

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


Connect to the Sendbird 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:

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.
    });

Disconnect from the Sendbird server

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 { disconnect } = useConnection();

disconnect();

Retrieve online status of current user

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

const { currentUser } = useSendbirdChat();

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

Register for push notifications

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';

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

<SendbirdUIKitContainer
    platformServices={{ notification: NotificationService }}
/>;

Unregister push notifications

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.

<SendbirdUIKitContainer
    chatOptions={{ enableAutoPushTokenRegistration: false }}
/>

Update user profile

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 { updateCurrentUserInfo } = useSendbirdChat();

const updatedUserWithUrl = await updateCurrentUserInfo('NICKNAME', 'PROFILE_URL');

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