Chef-ai-project: Keeping API Tokens Safe in React

Today I ran into a small but important problem in my React project. I’m building an app where you enter a list of ingredients, and an AI (Mistral) suggests a recipe.
At first, I just hardcoded my Hugging Face API token in ai.js like this:
const hf = new HfInference("MY_TOKEN_HERE");
It worked locally… but GitHub blocked my push 😅. Apparently, secret scanning doesn’t like exposed tokens.
What I Did
Environment variables
I created a .env file:
VITE_HF_API_KEY=your_huggingface_token_here
and added it to .gitignore. Now the token is private and safe.
Using it in Vite/React
const hf = new HfInference(import.meta.env.VITE_HF_API_KEY);
Calling the AI safely
I made an async function to get recipes and added error handling:
export async function getRecipeFromMistral(ingredientsArr) {
// join ingredients, call AI, return recipe
}
Takeaway
Even small projects are a great way to practice security and good habits. I learned that environment variables + .gitignore keep secrets safe while letting the app work normally.
Little wins like this make me feel more confident as a developer 😄.