Integrate Authenticated Images with API Keys in ReactJS

This tutorial demonstrates how to Authenticated Images with ReactJS through BoltonSea API

Prerequisite

Upload an image into a Media Group

Implementation

Project Setup:

First, create a new React project using Create React App:
npx create-next-app@latest cd my-app
Here are the customised options I used for this tutorial:

✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No
✔ Would ... code inside a `src/` directory? / Yes
✔ Would ... use Turbopack? (recommended)/ Yes
✔ Would ... import alias (`@/*` by default)? … No
✔ Creating a new Next.js app in my-app? Enter

Basic Component (index.js):

Modify src/pages/index.js to create a simple functional component:


import { useState, useEffect } from "react";
import Head from "next/head";
import styles from "@/styles/Home.module.css";
import { getImageData } from "./lib";

// private_url of an image
const AUTH_IMAGE_URL = "https://api.boltonsea.com/media/file/140/2025/10/donut.jpg";

// API_KEY with READ & WRITE Access
const API_KEY = "00-55AA2299DDBB...";

export default function Home() {
  const [previewFile, setPreviewFile] = useState(null);

  useEffect(() => {
    getImageData(AUTH_IMAGE_URL, API_KEY)
    .then((fileContent) => {
      fileContent && setPreviewFile(fileContent);
    });
  }, []);

  return (
    <>
      <Head>
        <title>View Authenticated Images </title>
        <meta name="description" content="View Authenticated Images" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className={`${styles.page}`}>
        <main className={styles.main}>
          <img className={styles.logo} src={previewFile} alt="Donut Images" />
        </main>
      </div>
    </>
  );
}

Library JS File (lib.js):

Create src/pages/lib.js to create a librayr file with functions to make API requests:


// Triggers the API call to the backend service & applying the API_KEY with the request
export async function getImageData(url, api_key) {

  const response = await fetch(url, {
    method: "GET",
    headers: { "X-API-KEY": api_key },
    responseType: "arraybuffer",
  });

  if (!response.ok) {
    console.error(`error: ${response.status}`);
    return null;
  }

  const blob = await response.blob();
  return imageBlobToBase64(blob);
}

// Converts an Image FileStream to Base64Blob
async function imageBlobToBase64(blob) {
  return new Promise((onSuccess, onError) => {
    try {
      const reader = new FileReader();
      reader.onload = function () {
        onSuccess(this.result);
      };
      reader.readAsDataURL(blob);
    } catch (e) {
      onError(e);
    }
  });
}

Running the Application: Start the development server:
npm run dev
Browser Page

Conclusion

The screenshot above has a Chrome Broswer displaying what the HTML image tag with a base64 content as source (src).

The getImageData(url, api_key) function makes an API call by appending the API_KEY in the request, then passes the response's FileStreem blob into function imageBlobToBase64(blob) which converts the blob into a Base64 blog.

Note:

This will open the application in your browser, typically at http://localhost:3000
Replace the API_KEY and AUTH_IMAGE_URL values with values that exist in real world
Security Recommendation: It is recommended not to include API_KEYs at the front-end where users can gain access to your secured keys