<center>![hive_auth_client_hac.jpg](https://images.ecency.com/DQmdaJ7DcsnGpNGrwyAvD9huk52tqj2R7wzKqXHvNKetHZR/hive_auth_client_hac.jpg)</center>

As I got some free time lately I decided to use it for the HIVE community either in publishing open source tools for application developers on HIVE or for personal & professional projects on HIVE.

After the [HIVE Nodes Checker](/hive-139531/@mintrawa/hive-nodes-checker-version-0-hive-139531) it's time to introduce the Hive Authentication Client (HAC)

# Hive Authentication Client (HAC)

Hive Authentication Client (HAC) is a password-less users authentication, sign and broadcast transactions for the [HIVE Blockchain](https://hive.io/) through the [Hive Authentication Services (HAS)](/hive-139531/@arcange/hive-authentication-services-proposal) or the [Hive Keychain Browser Extension (KBE)](/hive/@keychain/hive-keychain-proposal-3-dhf).

Authentications and transactions are performed by the wallet supporting the HAS protocol or the Hive Keychain Browser Extension without communicating the private key, which thus remains secure. The results of each operation are sent by subscription (RxJS).

Hive Authentication Client (HAC) manages previous connections as well through encrypted data in the localStorage. 

In order to save time on the learning curve of the HIVE blockchain, some operations exist in short versions too (e.g. `hacFollowing`, `hacTransfer`, `hacDelegation`...).

Big thank to @arcange who is the originator of the Hive Authentication Services (HAS) and to @stoodkev for his work to make the HIVE Keychain wallet compatible with the HAS protocol 👍

**Hive Authentication Services (HAS)**

Manage the WebSocket connection to the HAS and all communication with it. Support reconnection to another HAS WebSocket server in case of failure.

HAS documentation: https://docs.hiveauth.com/

**Hive Keychain Browser Extension (KBE)**

Manage the communication with the Hive Keychain Browser Extension if present

KBE documentation: https://github.com/stoodkev/hive-keychain

## Github & NPM

- https://github.com/Mintrawa/hive-auth-client
- https://www.npmjs.com/package/@mintrawa/hive-auth-client

<center><div class="phishy"><sub>**Like the Hive Authentication Services (HAS) this package remains in BETA!**</sub></div></center> 

<center>![screenshot_2022_01_20_031705.jpg](https://images.ecency.com/DQmUYxCCyWzPd1VbNcAwmtsnyrdXTMn1C6ytRju8abMjYpp/screenshot_2022_01_20_031705.jpg)</center>

## Use case example (extremely basic)

I propose to show you how the Hive Authentication Client (HAC) works through a short Angular app example, which will be more meaningful.

Our application will allow us to connect to the HIVE blockchain via HAS or KBE and to proceed to some transactions like Upvote for witness and Follow/Unfollow.

For a more complete example, you can go there :
https://github.com/Mintrawa/hac-tutorial

## Angular example

### Initialize

create a new angular project

```bash
$  ng new hac-tutorial
```
<sub>*choose yes for routing option and, CSS or SCSS.*</sub>

Install the dependencies we will need for this tutorial

```bash
~/hac-tutorial$  npm i --save ng-qrcode @mintrawa/hive-auth-client
```
### Edit

open the project directory with your favorite editor

#### angular.json

Due to the usage of CommonJS dependencies, we need to add a section `allowedCommonJsDependencies` in our `angular.json` file after `"scripts": [],`.

```ts
"allowedCommonJsDependencies": [
   "@mintrawa/hive-auth-client",
   "qrcode"
]
```

#### app.module.ts

For the tutorial, we will need to show a QRcode, to do this we will use the [ng-qrcode](https://www.npmjs.com/package/ng-qrcode) package

Open the `app.module.ts` and add the import line `import { QrCodeModule } from 'ng-qrcode';` and in the `import` array add `QrCodeModule,`

#### app.component.ts

In this example, we will do everything from the `app.component.ts`

```ts
import { Component, OnDestroy, OnInit } from '@angular/core';

/** Hive Authentication Client (HAC) */
import {
  HiveAuthClient,
  hacMsg,
  hacUserAuth,
  hacFollowing,
  hacWitnessVote,
} from '@mintrawa/hive-auth-client';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  loader = false;
  voteWitnessLoader = false;
  voteWitnessButton = false;
  followLoader = false;
  followButton = false;
  qrHAS: string | undefined;
  username?: string;
  connected?: string;
  pwd = '520c5c9b-bd58-4253-850a-1fa591a2dabd';

  connect(username: string): void {
    this.loader = true;
    this.username = username;
    hacUserAuth(username, { name: 'HACtutorial' }, this.pwd, {
      key_type: 'active',
      value: 'MyCha11en6e',
    });
  }

  voteWitness(witness: string, approve: boolean): void {
    this.voteWitnessLoader = true;
    this.followButton = true;
    hacWitnessVote(witness, approve);
  }

  follow(account: string, follow: boolean): void {
    this.followLoader = true;
    this.voteWitnessButton = true;
    hacFollowing(account, follow);
  }

  ngOnInit(): void {
    /** Initialize the HIVE auth client */
    HiveAuthClient();

    hacMsg.subscribe((m) => {
      console.log(m);

      /** Received auth_wait => generate the qrCode */
      if (m.type === 'qr_code') {
        /** QRcode data */
        this.qrHAS = (m as any).msg;
      }

      /** Received authentication msg */
      if (m.type === 'authentication') {
        if (!m.error) {
          this.connected = m.msg?.data?.chalenge.slice(0, 12) + '...';
        } else {
          this.loader = false;
          this.qrHAS = null;
          window.alert(`${m.error.msg}`);
        }
      }

      /** Received sign_result */
      if (m.type === 'tx_result') {
        this.voteWitnessLoader
          ? (this.voteWitnessLoader = false)
          : (this.followLoader = false);
        this.voteWitnessButton
          ? (this.voteWitnessButton = false)
          : (this.followButton = false);
        window.alert(`${m.msg?.status} | ${m.msg?.uuid ? m.msg?.uuid : ''}`);
      }
    });
  }

  ngOnDestroy(): void {
    hacMsg.unsubscribe();
  }
}
```

#### app.component.scss

a little touch of style

```css
.flex-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  height: 100vh;
}

.encart {
  border: 2px solid red;
  padding: 20px;
  border-radius: 25px;
}

.loader {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid red;
  width: 16px;
  height: 16px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.operations {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: stretch;
  align-items: flex-start;
  height: 100vh;
  padding: 12px;
}
.item {
  width: 250px;
  height: 80px;
}
```

#### app.component.html

Time to do our HTML.

```html
<div class="flex-container">
  <!-- Login -->
  <div class="encart" *ngIf="!connected && !qrHAS">
    <div>HIVE Username</div>
    <div style="height:6px;"></div>
    <input #username type="text" />
    <div style="height:6px;"></div>
    <button (click)="connect(username.value)" *ngIf="!loader">
      HAS Connect
    </button>
  </div>
  <!-- QRcode -->
  <div class="encart" *ngIf="!connected && qrHAS">
    <div>{{ username }}</div>
    <qr-code
      [value]="'has://auth_req/' + qrHAS"
      [size]="192"
      [errorCorrectionLevel]="'M'"
    ></qr-code>
    <div *ngIf="loader" class="loader"></div>
  </div>
  <!-- Connected => OPERATIONS -->
  <div *ngIf="connected" class="operations">
    <!-- VOTE WITNESS -->
    <div class="encart item">
      <div>VOTE WITNESS</div>
      <div style="height:6px;"></div>
      <div>
        <div>witness: <input #witness type="text" value="mintrawa" /></div>
        <div style="height: 6px;"></div>
        <div *ngIf="!voteWitnessLoader">
          <button
            [disabled]="voteWitnessButton"
            (click)="voteWitness(witness.value, true)"
          >
            APPROVE</button
          >&nbsp;
          <button
            [disabled]="voteWitnessButton"
            (click)="voteWitness(witness.value, false)"
          >
            DISAPPROVE
          </button>
        </div>
        <div class="loader" *ngIf="voteWitnessLoader"></div>
      </div>
    </div>
    <div style="height:12px;"></div>
    <!-- FOLLOWING -->
    <div class="encart item">
      <div>FOLLOWING</div>
      <div style="height:6px;"></div>
      <div>
        <div><input #following type="text" value="mintrawa" /></div>
        <div style="height: 6px;"></div>
        <div *ngIf="!followLoader">
          <button
            [disabled]="followButton"
            (click)="follow(following.value, true)"
          >
            FOLLOW</button
          >&nbsp;
          <button
            [disabled]="followButton"
            (click)="follow(following.value, false)"
          >
            UNFOLLOW
          </button>
        </div>
        <div class="loader" *ngIf="followLoader"></div>
      </div>
    </div>
  </div>
</div>
```
This short example is also available on **Stackblitz**
https://stackblitz.com/edit/angular-ivy-ew73hs

## hac-tutorial

A more complete example is available on **Github** here:
https://github.com/Mintrawa/hac-tutorial

- Mode debug
- Fallback on the first HAS server
- Management previous connections
- Choice between HAS or Keychain
- 1 page for the sign in and 1 for the operations
- 8 operations in easy mode
  - follow/unfollow
  - vote/downvote
  - approve/disapprove Witness
  - transfer
  - transferToVesting
  - withdrawVesting
  - delegation
  - convert (HBD=>HIVE / HIVE=>HBD)
- 1 manual operation (claim discount account)

<hr>

<center><sub>Original photo by [olieman.eth](https://unsplash.com/@moneyphotos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/password?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)</sub></center>

<hr>

<center>

My HIVE witness servers

<center><sub>PRINCIPAL</sub></center> | <center><sub>BACKUP/SEED</sub></center>
------------ | -------------
<sub>CPU:Intel Xeon E3-1270v6</sub> | <sub>CPU: Intel Xeon E3-1230v6</sub>
<sub>4 Cores/8 Threads  3.5 GHz/3.9 GHz</sub> | <sub>4 Cores/8 Threads 3.8 GHz/4.2 GHz</sub>
<sub>RAM: 32GB DDR4 ECC 2133MHz</sub> | <sub>RAM: 32GB DDR4 ECC 2133MHz</sub>
<sub>HDD: 1 To SSD NVMe</sub> | <sub>HDD: 1 To SSD NVMe</sub>

<sub>
Vote for my HIVE witness: [click here (via **HiveSigner**)](https://hivesigner.com/sign/account-witness-vote?witness=mintrawa&approve=1) 
</sub>

</center>