How to integrate Kinvey in React native application ?

What is Kinvey ?

Every new mobile applications are arriving with new technology in current digital world. It brings new exposure to the end users. In emerging technology, MBaaS also known as Mobile Backend as a service is a modal of providing mobile app developers to link to their applications to a backend cloud storage and APIs are exposed by backend applications while also providing the features such as User management such as Login and Logout , push notifications and others. These are the services provided via SDKs and APIs.

The Key features of Kinvey are serverless code and easier authentication. It is easy for developers to setup, use and operate the cloud backend from their mobile apps.

From the Tech stack perspective, Kinvey is the tool in the mobile backend category.

Reference : https://devcenter.kinvey.com/reactnative/guides

What are the flex services ?

Kinvey Flex is a framework for writing server-side code for your mobile apps. It allows you to create low-code, lightweight Node.js microservices to use for data integrations, authentication, and general-purpose functions. It uses the Flex -SDK

Reference: https://github.com/Kinvey/flex-sdk

Flex services consists the data integrations and custom endpoints and FlexAuth for custom authentication through Mobile Identity Connect (MIC).

Reference: https://devcenter.kinvey.com/reactnative/guides/mobile-identity-connect

To add an backend application in Kinvey console follow the signup process and reference below.

Reference : https://devcenter.kinvey.com/reactnative/guides/getting-started#AddanAppBackend

Integrate Kinvey in ReactNative app; run following command

npm i kinvey-react-native-sdk

Reference: https://www.npmjs.com/package/kinvey-react-native-sdk?activeTab=readme

In App.tsx or in global application level initialise the following values

import * as Kinvey from ‘kinvey-react-native-sdk’;

Kinvey.init({
appKey: 'XXX_S1dl6tvMl',
appSecret: '0t56y9e325235l53b076012346r02457',
instanceId: 'knr-us1',
masterSecret: '245gY65161910r7320549ee6b63e0340'
});

Now, where we have to call the kinvey endpoint in the same page;

PayLoad is RequestBody

getData is endPointName

import * as Kinvey from 'kinvey-react-native-sdk';
import { CustomEndpoint} from 'kinvey-react-native-sdk';

  Kinvey.ping().then((response) => {
    const payload = {
      languageKey: "en"
    };
     const verifyTnc = CustomEndpoint.execute("getData", payload).then((response) => {
          console.log('Kinvey response', response);
      }).catch((error) => {
          console.log('Kinvey error', error);
      });

  }).catch((error) => {
      console.log('Kinvey Ping failed. Response: ${error.description', error);
  });

To Login and Logout through react native application

import * as Kinvey from "kinvey-react-native-sdk";

  Kinvey.ping().then((response) => {
      Kinvey.User.loginWithMICUsingResourceOwnerCredentials(email, pswd, {
        micId: 18c74h9bc82c6732830d3tghrn26b4rt,
      }).then((response: any) => {
          console.log("login response", response);
          navigation.navigate(AppConstants.SIGNUP_SCREEN);
        })
        .catch((error) => {
          console.log("login Error", error);
        });
    }}).catch((error) => {
      setIsMessage(true);
      setIsLoginBtnDisable(true);
      setLoading(false);
  });

 const logout = () => {
    Kinvey.User.logout()
      .then((response: any) => {
        console.log("Logout Successful", response);
      })
      .catch((error) => {
        console.log("Logout Failed", error.debug);
      });
  };

Here, micId, appKey, appSecret, instanceId, masterSecret are found from Kinvey console and endpoint names are.

Any questions for above, feel free to comment in below section,

Thank you :-)

Do not forget to clap the story see you soon in upcoming blog !