Beginner: Guideline to Integrate Huawei Mobile Services Account Kit using React Native
Tags: javascript, beginners, reactnative, huaweiaccountkit
Published: 2022-03-16 04:49:56

**Introduction**
In this article, I will be integrating Huawei Account Kit in an Application.

**Account Kit**
Account Kit provides you with simple, secure and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.

**React Native**
React Native helps you create real and exciting mobile apps with the help of JavaScript only, which is supportable for both android and iOS platforms.
Just code once, and the React Native apps are available for both iOS and Android platforms which helps to save development time.
React Native is a framework that builds a hierarchy of UI components to build the JavaScript code.
It uses the same fundamental UI building blocks as regular iOS and Android apps.

**Requirements**
1. Any operating system (MacOS, Linux and Windows).
2. Must have a Huawei phone with HMS 4.0.2.300 or later.
3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
4. Minimum API Level 21 is required.
5. Required EMUI 9.0.0 and later version devices.

**Integrate HMS Dependencies**

- First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a [Huawei ID](https://developer.huawei.com/consumer/en/doc/start/registration-and-verification-0000001053628148).
- Create a project in android studio, refer [Creating an Android Studio Project.](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#1)
- Generate a SHA-256 certificate fingerprint.
- To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code.
Or use cmd as explained in [SHA256 CODE](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#3)
- Create an App in [AppGallery Connect](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#0).
- Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81qi53i7r08s61zm70w1.png)

- Enter SHA-256 certificate fingerprint and click Save, as follows.

 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bkuflmqfo88mi3nmbjcp.png)

- Click Manage APIs tab and enable Account Kit.

React Native Project Preparation

- Environment set up, refer below link.
     https://reactnative.dev/docs/environment-setup

- Create project using below command.

```
react-native init project name
```

- Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project. If you cannot find node modules run below command under project directory using CLI.

```
“npm install” & “npm link”
```
 

- Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories

```
maven {url 'http://developer.huawei.com/repo/'} 
```

- Configure app level build.gradle. (Add to dependencies)

```
Implementation project (“:react-native-hms-account”)
```

- Linking the HMS Account Kit Sdk.
Run below command in the project directory

```
react-native link react-native-hms-account
```

- Add below permissions to Android.manifest file.

```
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
```
 

**Development**

Account Kit provides APIs for normal sign-in, silent sign-in, sign-out, and authorization revoking. Create a UI in your Android Studio project. An example is shown in the following figure.

 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mm7p9q84c0uffj3broz8.png)
 

- 
signIn()
    Sign In securely to the application using Huawei ID.

```
import HMSAccount, {
    HMSAuthParamConstants,
    HMSAuthRequestOptionConstants,
} from "react-native-hms-account";
 
let signInData = {
  huaweiIdAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
  authRequestOption: [
    HMSAuthRequestOptionConstants.ID_TOKEN,
    HMSAuthRequestOptionConstants.EMAIL,
  ],
};
HMSAccount.signIn(signInData)
  .then((response) => {
    console.log(response);
  })
  .catch((err) => {
    console.log(err);
  });
```

 

- 
signOut()
     Signing out securely using the signOut() method.

```
HMSAccount.signOut()
    .then(() => {
    console.log("signOut -> Success")
    })
    .catch((err) => {
        console.log(err)
    });
```

- 
silentSignIn()
    With silent sign-in, users can sign in without using their credentials for consecutive sign-ins


```
import HMSAccount, { HMSAuthParamConstants } from "react-native-hms-account";
 
let silentSignInData = {
    huaweiIdAuthParams: HMSAuthParamConstants.DEFAULT_AUTH_REQUEST_PARAM,
};
HMSAccount.silentSignIn(silentSignInData)
    .then((response) => {
        console.log(response)
    })
    .catch((err) => {
        console.log(err)
});
```
   

- 
cancelAuthorization()
    Revoking authorization is intended to increase security by forcing the users to use sign-in credentials while signing in.


```
HMSAccount.cancelAuthorization()
    .then(() => {
    console.log("cancelAuthorization -> Success")
    })
    .catch((err) => {
        console.log(err)
    });
```
 

- 
HMSReadSMSManager
    Read SMS manager is a service that listens to verification code SMS events.


```
import { HMSReadSMSManager } from "react-native-hms-account";
HMSReadSMSManager.smsVerificationCode()
    .then((response) => {
        console.log(response)
    })
    .catch((err) => {
        console.log(err)
    });
```
 

Testing
 Run the android App using the below command.

```
react-native run-android
```

**Result**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87y0tifjxp0h5dv9d5oh.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l56jne4a0dvwzhpjf3ip.PNG)


**Conclusion**
In this article, we have learnt that how to integrate HMS Account Kit using React Native. HMS Toolkit helps us to Connects users from a wide range of devices, including phones, tablets, and smart displays. It serves over 900 million users from 190+ countries and regions worldwide and supports 70+ Languages. It guarantees two-factor authentication, real-time risk prediction, and GDPR compliance.

**Reference**
Account Kit: [Documentation](https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001051086206)
Account Kit: [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101583005582480166)