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.
  

‍

Life often takes us down unexpected paths, leading to new opportunitiesand discoveries. My journey from being a physics teacher to becoming a no-codesoftware developer is a story of embracing change and leveraging my technicalbackground in new ways.

The Beginning: A Passion for Physics and Teaching

My journey started with a strong foundation in physics. While preparingfor the Public Service Commission (PSC) exams, I also taught physics—a subjectI had always excelled in and enjoyed deeply. Teaching allowed me to share myknowledge and passion with students, helping them grasp complex concepts anddevelop a love for science.

A Technical Background and Growing Interest in Software

With a B.Tech degree, I always had a technical bent of mind & I hada solid technical background that gave me a basic understanding of variousengineering principles. Despite my focus on physics, I was always intrigued bythe world of software development. This interest led me to pursue a diplomacourse where I learned the fundamentals of programming languages and webdevelopment. The course sparked a new interest in me, blending my logicalthinking with the creativity required in software development.

Discovering No-Code: A New Direction

While exploring job opportunities in the tech field, I came across theconcept of no-code development. No-code platforms offer the ability to buildapplications without deep programming knowledge, making software developmentmore accessible to people with various backgrounds. This was particularlyappealing to me, given my basic programming skills and desire to createsomething meaningful without getting into the complexities of traditionalcoding.

The Transition to No-Code

Transitioning from teaching physics to becoming a no-code developerrequired a shift in mindset and a commitment to learning new skills. I started exploringno-code (we web) platforms, building small projects, and understanding howthese tools could solve real-world problems. My technical background andproblem-solving skills from teaching physics proved to be valuable assets inthis new field.

What I love about no-code development is the freedom it gives me tobring ideas to life quickly and efficiently. The transition has allowed me tocombine my technical knowledge with creativity, making software development afulfilling new chapter in my career.

Embracing the Future

Today, as a no-code software developer, I’m excited about the endlesspossibilities this field offers. My journey from physics to softwaredevelopment has taught me that it's never too late to explore new interests andpivot in your career. With the right mindset and willingness to learn, you cantransition into any field you're passionate about, just as I did. I've learnedthat it's never too late to pivot, to explore new interests, and to carve out anew path for yourself.