Storing private API keys in React Js

Last updated : August 30, 2022

It is not safe to store private API keys in React Js. If I store my API key in the React web app, the user can view it. Even if I store the API key in .env files, the end user can still view it.

I create a .env file to sore my API key to demonstrate that.


Then my React component uses that key to do an API call.

import { useEffect, useState } from "react"
export const Person = () =>{
  interface ResponseType  {
    userId: number
    id: number
    title: string
    completed: boolean
  const [response, setResponse] = useState<ResponseType>()
  const callApiWithSecretKey = () => {
    .then(data => data.json())
    .then(data => setResponse(data))
  useEffect(() => {

My API call includes the API key from the .env file.

That sounds safe. If I use GIT, it ignores the .env file because the .env file may contain non-public information that I don't want my users to know.

But that's not the case. My users can view my API key by inspecting the network traffic. Press F12 to open up chrome developer tools and use the Network tab to inspect the network traffic. You may need to refresh the page to see the network traffic.

Chrome network inspector
Figure 1: Chrome network inspector
L Raney
By: L Raney
Lance is a software engineer with over 15 years of experience in full-stack software development.

Comments are disabled

No Comments