Unleashing Effortless Authentication : Huawei Account Kit feat. React Native - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
HUAWEI Account Kit offers very simple, quick and secure sign in and authorization functionalities which help many developers to implement hassle free and quick sign in functionalities for their applications.
HUAWEI Account Kit offers services on different parameters as
Quick and Standard
Massive user base and global services
Secure, reliable, and compliant with international standards
Quick sign-in to apps
Development Overview
Prerequisite
1. Must have a Huawei Developer Account
2. Must have a Huawei phone with HMS 4.0.0.300 or later
3. React Native environment with Android Studio, Node Js and Visual Studio code.
Major Dependencies
1. React Native CLI : 2.0.1
2. Gradle Version: 6.0.1
3. Gradle Plugin Version: 3.5.2
4. React Native Account Kit SDK : 5.0.0.300
5. React-native-hms-account kit gradle dependency
6. AGCP gradle dependency
7. Enable Auth Services
Preparation
1. Create an app or project in the Huawei app gallery connect.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Describes the Step 1.0
Describes the Step 1.1
2. Provide the SHA Key and App Package name of the project in App Information Section and enable the required API.
Describes the Step 2.0
Describes the Step 2.1
Describes the Step 2.2
Describes the Step 2.3: Enable Account Kit Api on Manage Api page
Describes the Step 2.4: Put SHA signature generated using Android Studio
Describes the Step 2.5: Download agc services file and paste it under App folder of the project.
3. Create a react native project, use the below command
Code:
“react-native init project name”
4. Download the React Native Account Kit SDK and paste it under Node Modules directory of React Native project.
5. Enable Auth services
Describes the Step 5.1: Redirect to Auth Services and enable the required authorization service.
Describes the Step 5.2: copy the App ID and App Secret from “My Apps “ page and paste them here.
Tips
1. agconnect-services.json is not required for integrating the hms-ads-sdk.
2. Run below command under project directory using CLI if you cannot find node modules.
Code:
“npm install” & “npm link”
Integration
1. Configure android level build.gradle
Add to buildscript/repositories and allprojects/repositories
Code:
maven {url 'http://developer.huawei.com/repo/'}
2. Configure app level build.gradle. (Add to dependencies)
Code:
Implementation project (“: react-native-hms-ads”)
3. Linking the HMS Account Kit Sdk.
Run below command in the project directory
Code:
react-native link react-native-hms-account
Development Process
Once sdk is integrated and ready to use, add following code to your App.js file which will import the API’s present.
Import the SDK
Sign In
Sign Out
Testing
Import the SDK
Add below line of code in the app.js file
Code:
import RNHMSAccount from "react-native-hms-account";
Sign In
To sign in, create a signInData object and set the field values. Then invoke the signIn method of the HMSAccount module, setting the signInData object as the argument. If the sign in is successful, an AuthHuaweiId object will be returned, an exception object is returned otherwise.
Add below code on the “SIGN IN” button click
Code:
const onSignIn = () => {
let signInData = {
huaweiIdAuthParams:
RNHMSAccount.HmsAccount
.CONSTANT_HUAWEI_ID_AUTH_PARAMS_DEFAULT_AUTH_REQUEST_PARAM,
scopes: [RNHMSAccount.HmsAccount.SCOPE_ID_TOKEN],
};
RNHMSAccount.HmsAccount.signIn(signInData)
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};
Sign Out
To sign out, invoke the signOut method of the HMSAccount module. The promise is resolved if the sign in is successful, is rejected otherwise.
Add below code on the “SIGN OUT” button click.
Code:
const onSignOut = () => {
RNHMSAccount.HmsAccount.signOut()
.then((response) => {
logger(JSON.stringify(response));
})
.catch((err) => {
logger(err);
});
};
Testing
Run the below command to build the project
Code:
React-native run-android
Upon successful build, run the below command in the android directory of the project to create the signed apk.
Code:
gradlew assembleRelease
Results
References
https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/introduction-0000001050725712
Conclusion
Adding SignIn and SignOut functionalities seems easy.

---

thanks. very helpful.

---

Useful sharing, thanks!!