SamwithCode

Secure your React App using .evn file 2025

Secure your React App using .env file (2025)

Environment variables help protect sensitive data like API keys, secrets, and URLs. They should never be pushed to GitHub.

📁 Step 1: Create a .env file


REACT_APP_API_KEY=your_secret_api_key
REACT_APP_BASE_URL=https://yourapi.com

⚙️ Step 2: Use variables in your code


const apiKey = process.env.REACT_APP_API_KEY;
const baseUrl = process.env.REACT_APP_BASE_URL;

fetch(`${baseUrl}/data?key=${apiKey}`)
  .then(res => res.json())
  .then(data => console.log(data));

🔐 Important Notes

  • Use REACT_APP_ prefix or React won't recognize it.
  • Never commit your .env file to GitHub.
  • Add .env to your .gitignore file.

🛡️ Add to .gitignore


.env

By using .env files, your sensitive data stays protected and your codebase remains clean and secure. 🔐