Title: Secure Data Transmission Using Public and Private Key Cryptography in WeWeb (Frontend) and Xano (Backend)

Introduction In today's digital world, securing sensitive data during transmission is paramount. Cryptography is the science of securing communication and information by converting it into a format that unauthorized parties cannot understand. It enables confidentiality, integrity, and authentication of data, ensuring safe communication across networks.

Cryptography plays a vital role in achieving secure communication by enabling data encryption and decryption. One of the most powerful cryptographic techniques is asymmetric encryption, which uses public and private keys.

In this blog, we'll explore how public and private key cryptography works and demonstrate how to implement it using WeWeb for the frontend and Xano for the backend.

Understanding Encryption and Decryption

Encryption ensures that sensitive data is encoded into a secure format that unauthorized parties cannot read. Decryption is the process of converting the encrypted data back into its original format.

Types of Cryptography

Cryptography can be classified into the following types:

1. Symmetric Cryptography:

1. A single key is used for both encryption and decryption.

2. Example Algorithms: AES, DES.

3. Use Case: Faster encryption for large amounts of data.

2. Asymmetric Cryptography:

1. Uses two keys: public key (for encryption) and private key (for decryption).

2. Example Algorithms: RSA, ECC.

3. Use Case: Secure key exchange and authentication.

3. Hash Functions:

1. Irreversible functions that convert data into a fixed-size hash value.

2. Example Algorithms: SHA-256, MD5.

3. Use Case: Password hashing, digital signatures.

4. Hybrid Cryptography:

1. Combines symmetric and asymmetric cryptography.

2. Example: RSA for key exchange and AES for encrypting large data.

Symmetric vs Asymmetric Encryption

1. Symmetric Encryption: A single key is used for both encryption and decryption.

1. Example: AES (Advanced Encryption Standard)

2. Limitation: Key sharing becomes a challenge.

2. Asymmetric Encryption: Uses two keys:

1. Public Key: Used for encryption.

2. Private Key: Used for decryption.

3. Example: RSA (Rivest-Shamir-Adleman)

Asymmetric encryption solves the problem of securely sharing keys. It is widely used in web communication, including HTTPS.

Why Use Public and Private Key Cryptography?

• Secure Communication: Data sent over the network is encrypted.

• Authentication: Verifies the identity of the sender.

• Integrity: Ensures the data is not tampered with during transmission.

For our implementation, we'll encrypt data on the WeWeb frontend and decrypt it on the Xano backend.

Step 1: Setting Up Public and Private Keys

We will use the RSA algorithm for asymmetric encryption. You can generate a pair of public and private keys using libraries like jsrsasign (used in WeWeb) or tools like OpenSSL.

Generate Keys:

• Use the jsrsasign library for generating keys.

• Store the public key on the frontend and the private key securely on the backend.

Step 2: Frontend Implementation in WeWeb

WeWeb supports adding custom JavaScript code via NPM plugins. We'll use the jsrsasign library for encryption and JWT generation.

Install the jsrsasign Library

Add the library via NPM in WeWeb:

npm install jsrsasign.

Generate JWT and Encrypt Data

Here is the custom JavaScript function to generate a JWT in the WeWeb workflow:

import { KJUR } from "jsrsasign";

function generateJWT() {
const oHeader = { alg: 'RS256', typ: 'JWT' };
   
   const currentTime = KJUR.jws.IntDate.get('now');
   
   const oPayload = {
      email: variables.email, // Replace with actual variable reference
      password: variables.password // Replace with actual variable reference
   };
   
   const sHeader = JSON.stringify(oHeader);
   const sPayload = JSON.stringify(oPayload);
   
   const privateKey = context.workflow[''].result; // Fetch private key securely
   try {
       const sJWT = KJUR.jws.JWS.sign(null, sHeader, sPayload, privateKey);
       return sJWT;
   } catch (error) {
       console.error("JWT generation failed:", error);
       return null;
   }
}const token = generateJWT();
return token;

This function generates a signed JWT using the RS256 algorithm and includes the user email and password as the payload.

Sending JWT to Xano

Send the generated JWT to Xano using WeWeb's built-in API integration.

Step 3: Backend Implementation in Xano

On the Xano backend, we'll verify and decode the JWT using the JWT Decode function. Xano's built-in JWT decode functionality allows you to provide the RSA public key for verification.

Using Xano's JWT Decode Function

1. Go to your Xano API endpoint.

2. Use the JWS Decode function to verify and decode the JWT sent from the frontend.

3. Provide the RSA public key as an input.

Steps in Xano:

• Input: Encrypted JWT sent from the frontend.

• Key: RSA Public Key (generated earlier).

• Output: Decoded payload (email, password, etc.).

Xano will automatically validate the JWT and extract the payload.

Step 4: Testing the End-to-End Flow

1. Frontend (WeWeb): Use the generateJWT function to sign and send a JWT.

2. API Call: Send the JWT to the Xano backend.

3. Backend (Xano): Decode the JWT using the public key.

4. Response: Confirm that the decoded payload matches the original input.

Sample Data Flow

• Payload (Frontend): { email: "test@example.com", password: "secure123" }

• Generated JWT: "eyJhb...kdk="

• Decoded Payload (Backend): { email: "test@example.com", password: "secure123" }

Security Best Practices

1. Never expose your private key: The private key must remain secure on the backend.

2. Validate Data: Always validate incoming encrypted data to avoid malicious payloads.

3. Use HTTPS: Ensure the communication channel between frontend and backend is encrypted.

4. Environment Variables: Store keys securely in environment variables.

5. Key Rotation: Regularly rotate public and private keys to enhance security.

Conclusion

By combining the jsrsasign library on the frontend (WeWeb) and Xano's JWT decode functionality with the RSA public key, you can securely implement public and private key cryptography. This approach ensures safe data transmission, protecting sensitive information from unauthorized access.

Key Takeaways:

• Use the jsrsasign library in WeWeb for RSA encryption and JWT generation.

• Verify and decode JWSs in Xano using the RSA public key.

• Follow security best practices for key management and secure API communication.

Next Steps:

• Explore hybrid encryption (RSA + AES) for better performance.

• Use signed JWS tokens for secure user authentication.
  

‍