Hive Tutorials Auth Login Keychain React Fullstack | english/spanish

Saludos Hivers, por aca les traigo una nueva entrega para seguir con los tutoriales de Hive & React. En este articulo veremos como crear algo en el reino de lo que llamamos Fullstack y trata de como autenticar usando Hive Keychain.

Link al repositorio principal del tutorial completo >> aqui <<

🧩 Proceso de Inicio de Sesión con Hive Keychain

1. Instalación de Hive Keychain
   El usuario instala la extensión Hive Keychain en su navegador compatible.

2. Importación de la Cuenta Hive
   Se importan las claves privadas del usuario en la extensión para habilitar la firma de transacciones.

3. Interfaz de Inicio de Sesión
   La aplicación presenta un botón o formulario para que el usuario inicie sesión con su nombre de usuario de Hive.

4. Generación de Mensaje Único
   La aplicación genera un mensaje único, como una marca de tiempo, para prevenir ataques de repetición.

5. Solicitud de Firma con Hive Keychain
   Se utiliza la función requestSignBuffer para solicitar al usuario que firme el mensaje a través de Hive Keychain.

6. Firma del Mensaje
   El usuario aprueba la solicitud en la extensión, que firma el mensaje con su clave privada de publicación.

7. Envío al Servidor para Verificación
   La aplicación envía el nombre de usuario, el mensaje y la firma al servidor backend para su verificación.

8. Obtención de Clave Pública desde la Blockchain
   El servidor recupera la clave pública de publicación del usuario desde la blockchain de Hive.

9. Verificación de la Firma
   El servidor utiliza la clave pública para verificar que la firma corresponde al mensaje original.

10. Confirmación de Autenticación Exitosa
    Si la firma es válida, el servidor responde afirmativamente, y el usuario es considerado autenticado.

Este proceso garantiza una autenticación segura y descentralizada sin necesidad de compartir contraseñas o claves privadas directamente con la aplicación.

English at the bottom

Frontend: Cliente

🛠️ Configuración del Proyecto

• Crear el Proyecto con Vite
• Creamos la carpeta para el client y nos movemos a la carpeta:
  mkdir client && cd client
• Ejecuta el siguiente comando para crear un nuevo proyecto con Vite y React utilizando TypeScript:

npm create vite@latest . -- --template react-ts

Instalar Dependencias Adicionales

• Instalemos keychain-helper para ayudarnos a interactuar con la Hive Keychain
  npm i keychain-helper
• Creamos una carpeta dentro de /src/ y la llamamos components y dentro creamos el archivo Login.tsx:

import React from 'react';
import {KeychainHelper} from 'keychain-helper';

const Login: React.FC = () => {
  const handleLogin = async () => {
    const username = prompt('Ingrese su nombre de usuario de Hive:');
    if (!username) return;

    const message = `Autenticación con Hive Keychain - ${new Date().toISOString()}`;
    KeychainHelper.requestLogin(username,message, async (keychainResponse) => {
        if(keychainResponse.success){
            //continue to send info to backend for verification.
            const responseBE = await fetch('http://localhost:6001/verify', {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({
                    username, message, signature: keychainResponse.result
                }),
            });
            if(responseBE.status === 200){ //{ success: true, message: 'Firma válida' }
                const result = await responseBE.json();
                if(result.success && result.message === "Firma válida"){
                    alert('Autenticado con exito! Ahora puedes codificar las rutas protegidas y demas!');
                }else{
                    console.log('No se autentico: ',{result});
                }
            }
        }else{
            console.log({keychainResponse}); 
        }
    });
  }; 

  return (
    <div>
      <h2>Iniciar Sesión con Hive Keychain</h2>
      <button onClick={handleLogin}>Iniciar Sesión</button>
    </div>
  );
};

export default Login;

• Usamos login en App.tsx y podemos remover todo el codigo por defecto, nos quedaria asi:

import './App.css'
import Login from './components/Login'

function App() {
  return (
    <>
      <Login />
    </>
  )
}

export default App

• Iniciamos la App(Ojo el servidor ya debe estar corriendo) y usamos:
  npm run dev
• Deberias ver algo como esto al ejecutar tu frontend:

Nota: Hive Keychain debe estar instalado para poder interactuar con la firma del mensaje. Mas info aca: https://hive-keychain.com/

Backend: servidor

Nota importante: siempre que veas una linea de comandos con multiples comandos, puedes ejecutar 1 por una y asi sabras lo que cada una hace o simplemente corre todo a la vez.

🔐 Implementación del Backend

• Configurar el Servidor con Express
• Ejecutamos uno a uno, estos comandos si iniciamos el proyecto desde cero:

mkdir server 
cd server
npm init -y
npm install express@^4.17.1 cors body-parser dhive
npm install --save-dev typescript @types/express@^4.17.13 @types/node @types/body-parser ts-node nodemon @types/cors

Lo que hicimos fue:

1. Crear el directorio server
2. Nos movemos a server
3. Inicializamos usando npm, eso nos crea un archivo package.json con la informacion por defecto
4. Instalamos dependencias para express que hacen:
   • cors(que nos permite probar el servidor localmente sin uso de https)
   • body-parser(procesar los datos enviados en el "cuerpo" de las peticiones HTTP entrantes)
   • dhive(libreria para interactuar con la HIVE blockchain y funciones utiles)
5. Instalamos ademas dependencias de desarrollo que son tipos y declaraciones necesarias para typescript.

Nota decidi dejar esas versiones para express y sus tipos ya que para versiones mas recientes a veces causa errores en desarrollo.

• Crea un archivo tsconfig.json en la carpeta server con la configuración básica de TypeScript.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
}

Implementar la Ruta de Verificación

En el archivo server/index.ts, implementa una ruta para verificar la firma:

import express, {Request,Response} from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import { Client, PublicKey, Signature, cryptoUtils } from '@hiveio/dhive';

const app = express();
app.use(cors());
app.use(bodyParser.json());

const client = new Client(['https://api.hive.blog']);

app.post('/verify', async (req: Request, res: Response) => {
  // Datos recibidos del cliente
const { username, message, signature: signatureStr } = req.body;

try {
  // Obtener la clave pública del usuario desde la blockchain
  const account = await client.database.getAccounts([username]);
  if (!account || account.length === 0) {
    return res.status(404).json({ error: 'Usuario no encontrado' });
  }

  const publicKeyData = account[0].posting.key_auths[0][0];
  const publicKeyStr = typeof publicKeyData === 'string' ? publicKeyData : publicKeyData.toString();

  // Crear instancias de PublicKey y Signature
  const publicKey = PublicKey.fromString(publicKeyStr);
  const signature = Signature.fromString(signatureStr);

  // Calcular el hash del mensaje
  const messageHash = cryptoUtils.sha256(message);

  // Verificar la firma
  const isValid = publicKey.verify(messageHash, signature);

  if (isValid) {
    res.status(200).json({ success: true, message: 'Firma válida' });
  } else {
    res.status(401).json({ success: false, message: 'Firma inválida' });
  }
} catch (error) {
  console.error('Error al verificar la firma:', error);
  res.status(500).json({ error: 'Error interno del servidor' });
}
});

app.listen(6001, () => {
  console.log('Servidor backend ejecutándose en http://localhost:6001');
});

🧪 Prueba/Puesta en marcha de la Aplicación

• Ejecuta npx ts-node index.ts
  Deberias ver algo como esto en tu consola de VSCode:

Pro-tip

Siempre inicia el backend primero. No necesitas abrir varios editores de VScode, simpelemte, debajo en la seccion de terminales abre al menos 2. Y vas navegando usando los comandos ls cd para moverte a la carpeta client y al server.

De esta manera puede ejecutar cada parte en una consola por separado.

Si todo marcha como debería, al hacer login sucedera esto:

import express, { Request, Response } from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import { Client, PublicKey, Signature, cryptoUtils } from '@hiveio/dhive';

const app = express();
app.use(cors());
app.use(bodyParser.json());

const client = new Client(['https://api.hive.blog']);

app.post('/verify', async (req: Request, res: Response) => {
  const { username, message, signature: signatureStr } = req.body;

  try {
    const account = await client.database.getAccounts([username]);
    if (!account || account.length === 0) {
      return res.status(404).json({ error: 'User not found' });
    }

    const publicKeyData = account[0].posting.key_auths[0][0];
    const publicKeyStr = typeof publicKeyData === 'string' ? publicKeyData : publicKeyData.toString();

    const publicKey = PublicKey.fromString(publicKeyStr);
    const signature = Signature.fromString(signatureStr);

    const messageHash = cryptoUtils.sha256(message);

    const isValid = publicKey.verify(messageHash, signature);

    if (isValid) {
      res.status(200).json({ success: true, message: 'Valid signature' });
    } else {
      res.status(401).json({ success: false, message: 'Invalid signature' });
    }
  } catch (error) {
    console.error('Error verifying signature:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

app.listen(6001, () => {
  console.log('Backend server running at http://localhost:6001');
});