The Process of Hiding API keys in JavaScript is crucial for securing our application and preventing unauthorized access. API Keys should not be exposed in client-side code because anyone can view the source code and misuse the keys. The primary goal is not accessible to end users.

Prerequisites

• JavaScript
• NodeJS

Using Environment Variables

Using environment variables involves storing sensitive information like API keys on the server side rather than in the client-side code. This approach ensures the API key remains hidden and secure. The server-side application accesses the API key via environment variables and uses it to make requests to third-party services. The front end then interacts with the server-side application through an API endpoint, which handles the communication with the third-party service using the secured API key. This method prevents exposure of the API key to the client, enhancing security.

Example: Create dotenv and save the API key Information in that.

.env File

API_KEY=GFG$ARTICLES@#1234

server.js

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const app = express();
const PORT = 3000;

// Load the API key from environment variables
const API_KEY = process.env.API_KEY;

app.get('/api/data', async (req, res) => {
    try {
        const response = await axios.get(`https://thirdpartyapi.com/data?key=${API_KEY}`);
        res.json(response.data);
    } catch (error) {
        res.status(500).send('Error fetching data');
    }
});

app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});