¿Cómo ocultar sus claves API del público en ReactJS?

Una clave API (interfaz de programación de aplicaciones) es un identificador único que se utiliza para autenticar a un usuario, desarrollador o programa de llamada a una API. Sin embargo, normalmente se utilizan para autenticar un proyecto con la API en lugar de un usuario humano.

Y al usar los servicios en línea muchas veces, estas claves caen en las manos equivocadas, lo que puede ser muy peligroso para el propietario original. Por lo tanto, mantener segura la clave API es muy importante para evitar que termine en el lugar equivocado.

Una de las prácticas más comunes para asegurar la clave API cuando se usa ReactJS es ocultar la clave API usando variables env . Cree un archivo .env en su directorio raíz y cree una variable env usando el prefijo REACT_APP . Por ejemplo, como se muestra a continuación:

REACT_APP_KEY = hello_world

Nota: La declaración debe ser exacta, sin espacios intermedios.

Ahora, puede usar la clave usando el objeto process.env importando el archivo a su archivo App.js. Y antes de enviar el código a GitHub o Heroku, elimine el archivo .env y use el sistema de administración de claves de la plataforma.

Pasos para mantener seguras sus claves API:

1. Creación de un archivo .env: simplemente cree un archivo con nombre .env en el directorio raíz de su proyecto React como se muestra a continuación:
   
2. Creación de variables env en un archivo .env: con el prefijo REACT_APP, cree sus propias variables env y asigne la clave como se muestra a continuación:

   Nombre de archivo: .env

   REACT_APP_API_KEY = Your_api_key
   
   
   // Example
   REACT_APP_API_KEY = 6341454121

   Nota: asegúrese de no usar ningún espacio intermedio, ya que puede causar errores.

3. Agregue el archivo .env a su archivo .gitignore: esto evita que Github envíe el archivo .env a un repositorio remoto. Evite enviar sus claves API a un repositorio público.
   Nombre de archivo: .gitignore

   # API keys
   .env
   
   # Bower dependency directory (https://bower.io/)
   bower_components
   
   # node-waf configuration
   .lock-wscript
   ...

4. Acceso a la clave API: se puede acceder fácilmente a la clave API utilizando el objeto process.env . Simplemente importe el archivo a su archivo principal y acceda a él usando process.env.your_key_name.

   Nombre de archivo: App.js

   import React, { Component } from 'react';
   import './App.css';
   
   // Accessing your defined KEYS in .env file
   console.log(process.env.REACT_API_KEY)
   
   // Rest of your program
   function App()
   { ... }

Ahora, está listo para usar los servidores en línea para enviar su código sin preocuparse de que sus claves se hagan públicas.