> For the complete documentation index, see [llms.txt](https://mstoreappdocs.gitbook.io/mstoreapp/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mstoreappdocs.gitbook.io/mstoreapp/account-kit-integartion.md).

# Account kit integartion (for ionic 4 app)

1. Login Facebook Developer Account
2. Get Facebook App ID (`APP_ID`) and AccountKit client token (`CLIENT_TOKEN`) - read document on medium to get APP\_ID and `CLIENT_TOKEN`- <https://medium.com/react-native-training/passwordless-authentication-in-react-native-using-facebook-account-kit-part-1-8d83e92077e9>&#x20;
3. Install the plugin in your app

```
cordova plugin add cordova-plugin-accountkit --save --variable APP_ID="123456789" --variable APP_NAME="myApplication" --variable CLIENT_TOKEN="abcdefghijklmnopqrstuvwxyz" --variable API_VERSION="v1.1"
```

&#x20;   4\. Uncomment the code in `../src/app/account/login/login.page.ts` and `../src/app/account/login/register.page.ts`file

```
loginWithPhone(){
    this.phoneLogingInn = true;
    (<any>window).AccountKitPlugin.loginWithPhoneNumber({
        useAccessToken: true,
        defaultCountryCode: "IN",
        facebookNotificationsEnabled: true,
      }, data => {
      (<any>window).AccountKitPlugin.getAccount(
        info => this.handlePhoneLogin(info),
        err => this.handlePhoneLogin(err));
      });
}
handlePhoneLogin(info){
    if(info.phoneNumber) {
        this.api.postItem('phone_number_login', {
                "phone": info.phoneNumber,
            }).subscribe(res => {
            this.status = res;
            if (this.status.errors) {
                this.errors = this.status.errors;
            } else if (this.status.data) {
                this.settings.customer.id = this.status.ID;
                 if (this.platform.is('cordova')){
                    this.oneSignal.getIds().then((data: any) => {
                        this.form.onesignal_user_id = data.userId;
                        this.form.onesignal_push_token = data.pushToken;
                    });
                   this.api.postItem('update_user_notification', this.form).subscribe(res =>{});
                 }
                if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){
                    this.settings.vendor = true;
                }
                this.navCtrl.navigateBack('/tabs/account');
            }
            this.phoneLogingInn = false;
        }, err => {
            this.phoneLogingInn = false;
        });
    } else this.phoneLogingInn = false;
}
handlePhoneLoginError(error){
    this.phoneVerificationError = error;
    this.phoneLogingInn = false;
}
```

&#x20;   5\. Uncomment Login button in `../src/app/account/login/login.page.html` and `../src/app/account/login/register.page.html`file

```
<!--ion-button expand="block" color="{{settings.theme.button}}" shape="round" mode="ios" fill="outline" (click)="loginWithPhone()" [disabled]="phoneLogingInn"><ion-spinner name="dots" color="{{settings.theme.button}}" *ngIf="phoneLogingInn"></ion-spinner><span *ngIf="!phoneLogingInn">{{"Login with OTP"| translate}}</span></ion-button-->
```