DEV Community: Gideon Iyinoluwa Owolabi

How to encrypt and decrypt data between a standalone react application and a Laravel application using Rsa encryption

Gideon Iyinoluwa Owolabi — Tue, 12 Sep 2023 07:01:18 +0000

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!

How to Implement a single sign-on feature(SSO) across sub-domains on the web using Javascript cookies

Gideon Iyinoluwa Owolabi — Thu, 02 Feb 2023 16:31:39 +0000

Implementing a single sign-on (SSO) feature across sub-domains on the web can help streamline the user authentication process and provide a seamless user experience. In this article, I will discuss how to implement a simple SSO feature using JavaScript cookies.

JavaScript cookies are small text files that are stored on the user's computer by the web browser. They can be used to store small amounts of data,such as user preferences or login information.

In this tutorial implementation, we are using cookies to store the user's login token, which is generated by the server after the user's credentials have been verified. This token can then be sent back to the server on subsequent requests to verify that the user is still logged in.

The "domain" parameter in the document.cookie string is responsible for allowing the cookie to be shared across multiple sub-domains. By setting the domain to .example.com, the cookie will be accessible from any sub-domain of example.com, such as www.example.com or api.example.com. This is what makes the single sign-on feature possible, as the user only needs to log in once and their login status will be maintained across all of the sub-domains.

In this way, cookies provide a simple and convenient way to store and share data between different pages and sub-domains on a website. However, it's important to be aware of the security implications of storing sensitive information in cookies, as they can be easily accessed by malicious actors. To mitigate these risks, it's recommended to use secure cookies and to encrypt any sensitive information stored in them.

To implement SSO using cookies, follow these steps:

1. Create a login page: Create a login page on the primary domain or any other domain (e.g. example.com, auth.example.com) that users can access to log in. This page should have a form that accepts the user's credentials and sends a request to the server to verify the information.

2. Verify user credentials: On the server, verify the user's credentials by comparing them to the values stored in a database. If the credentials are valid, generate a unique token for the user and store it in the database.

3. Set a cookie: If the user's credentials are valid, set a cookie on their device with the token as its value. The cookie should be set to the root domain (e.g. .example.com) so that it can be accessed from all sub-domains.

4. Verify the cookie on each sub-domain: On each sub-domain, check for the presence of the cookie. If the cookie exists and its value is valid, the user is considered to be logged in.

5. Log out the user: To log out the user, simply delete the cookie from their device.

Here is an example of how to implement the above steps in javascript with each step broken down into its own code section:

// Step 1: Create a login page

// Submit the login form
function submitLoginForm() {
  // Get the user's credentials from the form
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;

  // Send a request to the server to verify the credentials
  fetch("/verify-credentials", {
    method: "POST",
    body: JSON.stringify({ username, password }),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(response => response.json())
    .then(data => {
      // Step 2: Verify the user's credentials
      if (data.token) {
        // Step 3: Set the cookie
        setCookie("token", data.token);

        // Redirect the user to the home page
        window.location.href = "/home";
      } else {
        // Show an error message if the credentials are invalid
        document.getElementById("error").innerHTML = "Invalid username or password";
      }
    });
}

// Step 3: Set the cookie
function setCookie(name, value) {
  document.cookie = `${name}=${value}; domain=.example.com; path=/;`;
}

// Step 4: Verify the cookie on each sub-domain
function checkCookie() {
  const token = getCookie("token");
  if (token) {
    // The user is logged in
  } else {
    // The user is not logged in
  }
}

// Get the value of a cookie
function getCookie(name) {
  const cookies = document.cookie.split(";");
  for (let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split("=");
    if (cookieName.trim() === name) {
      return cookieValue;
    }
  }
  return null;
}

// Step 5: Log out the user
function logout() {
  document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.example.com";
}

Please like and leave a comment if you find this useful. Thank you😊

How to handle Image file uploads with multer in nodejs

Gideon Iyinoluwa Owolabi — Tue, 11 Oct 2022 08:58:00 +0000

In this tutorial, we are going to walk through the process of creating an image file upload functionality in nodejs using multer and mkdirp package.

Note

This tutorial assumes you are familiar with express and nodejs and that you have your expressjs application up and running if not please refer to the article here

Steps

1.Install the following packages multer for file upload and mkdirp for creating multilevel directories.

2.We will create two files multer-config.js and fileupload.route.js.

multer-config.js

This is a middleware that will contain the logic for uploading an image. This middleware makes use of the mkdirp package to create the path to where the image file will be stored. We also added a fileFilter function to check that the file to be uploaded is an image

const multer = require("multer");
 const mkdirp = require("mkdirp");
 const MIME_TYPES = {
  "image/jpg": "jpg",
  "image/jpeg": "jpg",
  "image/png": "png",
  "image/gif": "gif",
};

const dir = "public/storeowners/uploads/images";

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    mkdirp(dir)
      .then((data) => callback(null, dir))
      .catch((e) => callback(e, dir));
  },
  filename: (req, file, callback) => {
    const name = file.originalname.split(" ").join("_");
    const extension = MIME_TYPES[file.mimetype];
    callback(null, Date.now() + "." + extension);
  },
});

const fileFilter = (req, file, cb) => {
  if (!MIME_TYPES[file.mimetype]) {
    cb("File must be an image", false);
  } else {
    cb(null, true);
  }
};

module.exports = multer({
  storage: storage,
  limit: {
    fileSize: 2000000,
  },
  fileFilter,
}).single("image");

fileupload.route.js

This will contain the route for handling http request from the client.

const express = require("express");
const router = express.Router();
const uploadImage = require("./multer-config.js"); //import the multerconfig

//create a post route to handle http request for file upload 
router.post("/", uploadImage, (req, res) => {
  if (req.file) {
    return res.status(200).json({
      success: true,
      message: "Image uploaded!",
    });
  }

  return res.status(400).json({
    success: false,
    error: "Image upload failed!",
  });
});

module.exports = router;

App.js

This the entry point of our application, here we would do the final setup to ensure the application is working

const express = require("express");
const app = express();
//import the fileupload route
const fileuploadRoute = require("./fileupload.route.js");
const cors = require("cors");

app.use(cors());
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.static("./public"));

//setup the file upload route
app.use("/api/uploadimage", fileuploadRoute);

//start listen on port 3000 or any port you prefer
app.listen(3000, () => {
  console.log("server is listening on port 3000");
});

Now we can make a post request to the endpoint to upload your image file

localhost:3000/api/uploadimage

Happy Coding