RSA encryption is a powerful tool for securing data transmission between applications. It relies on a pair of keys - a public key for encryption and a private key for decryption. In this tutorial, I will guide you through implementing RSA encryption to send data securely between a standalone React frontend application and a Laravel backend.
Step 1: Generate RSA Key Pairs
Before we dive into the code, we need to generate the key pairs. You can do this by visiting https://cryptotools.net/rsagen. Keep the private key secure, as it will be used for decryption.
Step 2: Set Up Your Projects
Create two separate projects - a fresh React project for the frontend and a fresh Laravel project for the backend.
Step 3: Install JSEncrypt in React
In your React project, We will make use of https://www.npmjs.com/package/jsencrypt library for encrypting our data. Install JSEncrypt using either of the following commands:
# Using Yarn yarn add jsencrypt # Using npm npm install jsencrypt Step 4: Add encryption Code in app.tsx and form to send encrypted data to laravel backend
import { useRef, useState } from "react"; import JSEncrypt from "jsencrypt"; type Result = { message?: string; data?: { encrypted: string; decrypted: object; }; }; function App() { const nameRef = useRef<HTMLInputElement>(null); const phoneRef = useRef<HTMLInputElement>(null); const [result, setResult] = useState<Result>({}); // Encrypt request data const encryptRequestData = (data: string) => { let KEY = `-----BEGIN PUBLIC KEY----- MIICITANBgkqhkiG9w0BAQEFAAOCAg4AMIICCQKCAgBoLTFCc40LxJcidVs6/WFw // ... [Your public key] -----END PUBLIC KEY-----`; let encryptor = new JSEncrypt(); encryptor.setPublicKey(KEY); return encryptor.encrypt(data); }; const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => { try { e.preventDefault(); setResult({}); if (!nameRef.current?.value || !phoneRef.current?.value) { return; } let data = JSON.stringify({ name: nameRef.current.value, phone: phoneRef.current.value, }); let encrypted_data = encryptRequestData(data); let requestBody = JSON.stringify({ encrypted: encrypted_data, }); const response = await fetch("http://127.0.0.1:8000/api/decrypt-data", { method: "POST", body: requestBody, headers: { "Content-Type": "application/json", }, }); let res = await response.json(); setResult(res); } catch (err) { alert(String(err)); } }; return ( <form onSubmit={onSubmit}> <h2> Simple form to demonstrate Rsa Encryption between a react and laravel application </h2> <label htmlFor="name">Name</label> <br /> <input type="text" name="name" id="name" ref={nameRef} /> <br /> <br /> <label htmlFor="phone">Phone</label> <br /> <input type="tel" name="phone" id="phone" ref={phoneRef} /> <br /> <br /> <button type="submit">Submit</button> <div style={{ maxWidth: "500px", padding: "2px", wordWrap: "break-word" }} > <p>Encrypted: {result.data?.encrypted}</p> <p>Decrypted: {JSON.stringify(result.data?.decrypted)}</p> </div> </form> ); } export default App; Step 5: Install Phpseclib on Laravel
https://packagist.org/packages/phpseclib/phpseclib is a php library that can be used to implement rsa encryption. To install run the command
composer require phpseclib/phpseclib:~3.0 Step 6: Create a private_key.pem file
Create a file in the storage folder of you laravel project and name it private_key.perm. Copy and paste the private key generated into the file and save
Step 6: Navigate into the your routes/api.php file
Navigate into your routes/api.php file and paste in this code
use Illuminate\Http\Request; use Illuminate\Support\Facades\Route; use phpseclib3\Crypt\PublicKeyLoader; use phpseclib3\Crypt\RSA; Route::post("/decrypt-data", function (Request $request) { if (!$request->encrypted) { return response()->json([ 'error' => "Data is empty" ], 400); } $key = PublicKeyLoader::load(file_get_contents(storage_path('private_key.pem'))); $key = $key->withPadding(RSA::ENCRYPTION_PKCS1); $decrypted_data = json_decode($key->decrypt(base64_decode($request->encrypted))); return response()->json([ "message" => "Data Decrypted!", "data" => [ "encrypted" => $request->encrypted, "decrypted" => $decrypted_data ] ]); }); Step 7: Start your React and Laravel development server
#Enter in to the root folder of your react project and start react server npm start #Enter into the root folder of you laravel project and start laravel server php artisan serve Conclusion
With that we have been able to setup encryption and decryption between a react app and a Laravel app. You can find the complete code implementation on this GitHub repository https://github.com/gude1/RSA_ENCRYPTION
If you have any further questions or need additional assistance, don't hesitate to ask. Happy coding!
Top comments (0)