Estou fazendo um pequeno projeto para aprender sobre ReactJS e estou utilizando a API Open Weather. Quero saber qual a melhor forma de proteger minha chave de API quando eu der push no GitHub e ser possível fazer o deploy da aplicação utilizando a Vercel.
Utilizar váriaveis de ambiente (.env) sejam elas locais ou em alguma plataforma. Tanto o github quanto a Vercel, possuem sistemas para cadastrar as chaves secretas que você não deseja manter expostas.
Github:
Entre no repositório e vá em Settings > Secrets and variables
Vercel:
Navegue até um projeto e vá em Settings > Environment Variables
Atenção que váriaveis dentro do .env nem sempre estarão seguras, tudo que roda do lado do cliente pode ser inspecionado de alguma forma.
O pessoal deu boas sugestões de como proteger sua chave da API, mas queria fazer um adendo, como você tá no frontend, você não consegue esconder totalmente a sua chave, ainda é possível pegar ela de diversas formas.
mano, pega tua chave e exporta ela pra um documento. Esse documento tu coloca no .gitignore e pronto. salva ela como uma variavel e exporta essa variavel, acho que isso deve fuincionar no react
para isso você utiliza variáveis de ambiente, que ficam armazenadas no .env e esse arquivo tem que ser colocado no .gitignore
Não exponha essa chave no frontend. De forma nenhuma. Se é uma chave privada, deixe-a privada. Se você quer fazer requisições com ela você precisa colocá-la no backend. Se você colocar nas variáveis de ambiente elas ficarão públicas. Tudo no frontend é público.
Olha, eu uso um arquivo .env, coloco ele no .gitignore como o sluki falou, e utilizo como váriavel de ambiente na vercel, onde normalmente subo os meus projetos em React. Não sei ao certo se é a forma correta de fazer mas eu vi em alguma video aula.