Using OpenAI's API in React without exposing your API key with Gateweaver

OpenAI's API is a powerful tool for building AI-powered applications. However, using the API directly in a client-side application, like a React app, can expose your API key to potential attackers. To ensure the security of your API key, it is recommended to route requests through a backend server, as outlined in OpenAI's Best Practices for API Key Safety.

If you don't have a backend server or prefer not to set one up just to handle requests to the OpenAI API, you can use Gateweaver. This API Proxy allows you to route requests through a secure server without writing any backend code.

In this tutorial, we'll show you how to use OpenAI's API in a React app without exposing your API key by using Gateweaver to proxy requests to the API. We will build a simple React app where users can ask questions and receive answers, utilizing the OpenAI Node.js library client-side while securely routing API requests through Gateweaver to protect your API key.

The complete source code for this tutorial is available on GitHub.

Prerequisites

Before you begin, make sure you have the following:

• An OpenAI API key. You can get one by signing up for an account on the OpenAI website.
• You have purchased credits on OpenAI to use the API.
• Node.js installed on your machine.
• Basic knowledge of React and JavaScript.

Set up the React App

Create a new React app

First, let's create a new react app using vite. We'll be using vite's typescript template for this tutorial.

npm create vite@latest openai-react -- --template react-ts

Start the React development server

Next, navigate to the newly created openai-react folder and start the development server:

cd openai-react
npm install
npm run dev

You should now see the react app running on http://localhost:5173.

Set up Gateweaver

Install Gateweaver CLI

Next, let's install the Gateweaver CLI tool, which we will use to configure and run the API Proxy.

npm install -D @gateweaver/cli

We install the CLI tool as a dev dependency as we only need it during development. For production, you will most likely want to use the Gateweaver Docker image. You can find out more about deploying Gateweaver to production in the Deployment Documentation.

Configure Gateweaver

Next, let's create a folder called proxy in our project where we will store our Gateweaver configuration files.

mkdir proxy

Inside the proxy folder, create a new file called gateweaver.yml. This file will contain the configuration for our API Proxy.

policyDefinitions:
  cors:
    origin: "${CLIENT_URL}"

endpoints:
  - path: "/openai"
    target:
      url: "https://api.openai.com/v1"
    request:
      headers:
        Content-Type: "application/json"
        Authorization: "Bearer ${OPENAI_API_KEY}"
    policies:
      - cors

In the gateweaver.yml file, we define a single endpoint called /openai that proxies requests to the OpenAI API. We set the Authorization header to include our OpenAI API key, which is stored in an environment variable called OPEN_AI_API_KEY, which we will define in the next step. We also include a CORS policy to allow requests from our React app.

Set up server environment variables

To define the environment variables referenced in the gateweaver.yml file, create a .env.gateweaver file in the proxy folder. Make sure to add this file to your .gitignore file to avoid committing sensitive data to your repository.

OPENAI_API_KEY=YOUR_OPENAI_API_KEY
CLIENT_URL=http://localhost:5173

In this file replace YOUR_OPENAI_API_KEY with your actual OpenAI API key, and set the CLIENT_URL to http://localhost:5173 to match the URL of your React app running locally.

Start the Gateweaver server

Before we start the Gateweaver development server, let's add a script to the package.json file to make it easier to run the server.

{
  "scripts": {
    "proxy": "cd proxy && gateweaver start -w"
  }
}

This script changes the directory to the proxy folder and runs the gateweaver start -w command, which starts the Gateweaver development server in watch mode on port 8080.

Now, let's start the Gateweaver development server by running the following command in a separate terminal window from the one running the React app:

npm run proxy

The Gateweaver server should now be running on http://localhost:8080, and be ready to proxy requests to the OpenAI API.

Use OpenAI API in React

Now that we have Gateweaver set up to proxy requests to the OpenAI API, let's update our React app to use the API through the proxy.

Set up client environment variables

First, let's add the API Proxy URL to our React app as an environment variable so we can use it later in our code. To do this in a Vite project, create a .env.local file in the root of your project and add the following line:

VITE_PROXY_URL=http://localhost:8080

Install the OpenAI Node.js client library

Next, let's install the OpenAI Node.js client library in our React app to interact with the OpenAI API.

npm install openai

Update the React app

Now, let's update the App.tsx file to make requests to the API Proxy. We will add a simple form where users can input a question, and when they submit the form, we will send the question to the OpenAI API through the API Proxy and display the response on the page.

Here's the updated App.tsx file:

import { useState } from "react";
import OpenAI from "openai";
import "./App.css";

const PROXY_URL = import.meta.env.VITE_PROXY_URL;

const openai = new OpenAI({
  baseURL: `${PROXY_URL}/openai`,
  apiKey: "",
  dangerouslyAllowBrowser: true,
});

const generateMessage = async (userInput: string): Promise<string | null> => {
  const completion = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [
      {
        role: "system",
        content:
          "You are a helpful assistant that is here to answer questions.",
      },
      {
        role: "user",
        content: userInput,
      },
    ],
  });

  return completion.choices[0].message.content;
};

const App = () => {
  const [userInput, setUserInput] = useState("");
  const [message, setMessage] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      const response = await generateMessage(userInput);
      if (!response) {
        throw new Error("Failed to generate message.");
      }

      setMessage(response);
      setUserInput("");
    } catch (error) {
      console.error(error);
      setError("Something went wrong. Please try again.");
    }

    setLoading(false);
  };

  return (
    <div>
      <h1>Ask me a question</h1>
      <div className="content">
        {message ? (
          <>
            <p>{message}</p>
            <button className="reset-button" onClick={() => setMessage("")}>
              Ask another question
            </button>
          </>
        ) : (
          <form className="question-form" onSubmit={handleSubmit}>
            <input
              className="input"
              value={userInput}
              onChange={(e) => setUserInput(e.target.value)}
            />
            <button className="submit-button" disabled={!userInput || loading}>
              {loading ? "Loading..." : "Ask"}
            </button>
            {error && <p className="error-message">{error}</p>}
          </form>
        )}
      </div>
    </div>
  );
};

export default App;

In this updated App.tsx file, we define a function called generateMessage that sends a user's input to the OpenAI API through the API Proxy and returns the response. We then use this function in the handleSubmit function to generate a response to the user's question and display it on the page.

Note that we set the baseURL property of the OpenAI client to the URL of the API Proxy. We also set the apiKey property to an empty string, as we are not using the API key in the front end. Instead, we are sending requests through the API Proxy, which includes the API key in the request headers. We also set dangerouslyAllowBrowser to true to allow the client to be used in the browser, but this is okay since we are using the API Proxy to secure the API key.

Next, let's update the App.css file to add some basic styling to our React app:

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.question-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 500px;
  width: 100%;
}

.input {
  width: 100%;
}

.submit-button {
  margin-top: 1rem;
  background-color: #2e8555;
  color: white;
  opacity: 0.5;
  pointer-events: none;
}

.submit-button:enabled {
  opacity: 1;
  pointer-events: auto;
}

.reset-button {
  background-color: #2e8555;
  color: white;
}

.error-message {
  color: red;
}

Here is what the React app should look like now:

Further Improvements

Even though the API key is no longer exposed, attackers could still abuse the API by sending a large number of requests through the proxy server. To mitigate this risk, you can add rate limiting to the proxy server to prevent abuse. To configure rate limiting in Gateweaver, refer to the Rate Limiting Documentation.

Another way to further secure your application is by adding JWT validation to the proxy server, ensuring that only authenticated users can access the API. To configure this, refer to the JWT Documentation. You can also explore some example configurations of popular providers like Auth0, Firebase, and Supabase for guidance.

Conclusion

In this tutorial, we learned how to use OpenAI's API in a React app without exposing the API key by using Gateweaver to proxy requests to the API. We set up a simple API Proxy and configured it to forward requests to the OpenAI API, with the API key included in the request headers. We then built a React app that allows users to ask questions and receive answers from the OpenAI API securely through the API Proxy.

To find out how to deploy Gateweaver to production and learn more about its features, check out the Gateweaver Documentation. If you found this tutorial helpful, please consider giving the Gateweaver repo a star!