Como proteger minha chave de API?

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

Acredito que a melhor forma para isso seria usando um gerenciador de chaves (AWS Secrets Manager/Google Cloud Key Management) pra salvar a chave e usar a API deles pra manter esse contato.

Dá uma olhada aqui e vê se serve para o seu caso.

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.