Os aplicativos da Web modernos contam com APIs externas para funcionalidade adicional. Algumas APIs usam identificadores como chaves e segredos para associar solicitações a um aplicativo específico. Essas chaves são confidenciais e você não deve enviá-las para o GitHub, pois qualquer pessoa pode usá-las para enviar uma solicitação à API usando sua conta.

Este tutorial ensinará como armazenar e acessar chaves de API com segurança em um aplicativo React.

Adicionando variáveis ​​de ambiente em um aplicativo CRA

UMA Reagir o aplicativo que você cria usandocriar-reagir-aplicativo suporta variáveis ​​de ambiente prontas para uso. Ele lê variáveis ​​que começam com REACT_APP e as disponibiliza por meio de process.env. Isso é possível porque o pacote dotenv npm vem instalado e configurado em um aplicativo CRA.

Para armazenar as chaves de API, crie um novo arquivo chamado .env no diretório raiz do aplicativo React.

Em seguida, prefixe o nome da chave de API com REACT_APP assim:

REACT_APP_API_KEY="your_api_key"

Agora você pode acessar a chave de API em qualquer arquivo no aplicativo React usando process.env.

const API_KEY = processo.env. REACT_APP_API_KEY

Certifique-se de adicionar .env ao arquivo .gitignore para evitar que o git o rastreie.

Por que você não deve armazenar chaves secretas em .env

Tudo o que você armazena em um arquivo .env está disponível publicamente na compilação de produção. O React o incorpora nos arquivos de compilação, o que significa que qualquer pessoa pode encontrá-lo inspecionando os arquivos do seu aplicativo. Em vez disso, use um proxy de back-end que chame a API em nome de seu aplicativo de front-end.

Armazenando variáveis ​​de ambiente no código de back-end

Conforme mencionado acima, você deve criar um aplicativo de back-end separado para armazenar variáveis ​​secretas.

Por exemplo, o O endpoint da API abaixo busca dados de um URL secreto.

const apiURL = processo.env. API_URL
app.get('/data', assíncrono (req, res) => {
const resposta = aguardam buscar (apiURL)
const dados = resposta.json()
	res.json({dados})
})

Chame esse endpoint de API para buscar e usar os dados no front-end.

const dados = aguardam buscar('http://backend-url/data')

Agora, a menos que você envie o arquivo .env para o GitHub, a URL da API não ficará visível em seus arquivos de compilação.

Usando Next.js para armazenar variáveis ​​de ambiente

Outra alternativa é usar Next.js. Você pode acessar variáveis ​​de ambiente privado na função getStaticProps().

Essa função é executada durante o tempo de compilação no servidor. Portanto, as variáveis ​​de ambiente que você acessa dentro desta função estarão disponíveis apenas no ambiente Node.js.

Abaixo está um exemplo.

exportarassíncronofunçãogetStaticProps() {
const res = aguardam buscar (process.env. API_URL)
const dados = res.json()
Retorna {adereços: { dados }}
}

Os dados estarão disponíveis na página via props, e você pode acessá-los da seguinte forma.

funçãoCasa({ dados }) {
Retorna (
<div>
//renderiza os dados
</div>
 );
}

Ao contrário do React, você não precisa prefixar o nome da variável com nada e pode adicioná-lo ao arquivo .env assim:

API_URL=https://secret-url/de3ed3f

Next.js também permite que você crie endpoints de API no páginas/api pasta. O código nesses endpoints é executado no servidor, para que você possa mascarar segredos do front-end.

Por exemplo, o exemplo acima pode ser reescrito na pages/api/getData.js arquivo como uma rota de API.

exportarpredefiniçãoassíncronofunçãomanipulador(req, res) {
const resposta = aguardam buscar (process.env. API_URL)
const dados = resposta.json()
Retorna res.json({dados})
}

Agora você pode acessar os dados retornados através do /pages/api/getData.js ponto final.

Mantendo as chaves de API secretas

Não é aconselhável enviar APIs para o GitHub. Qualquer pessoa pode encontrar suas chaves e usá-las para fazer solicitações de API. Ao usar um arquivo .env não rastreado, você evita que isso aconteça.

No entanto, você nunca deve armazenar segredos confidenciais em um arquivo .env em seu código front-end porque qualquer pessoa pode vê-lo quando inspecionar seu código. Em vez disso, busque os dados no lado do servidor ou use Next.js para mascarar variáveis ​​privadas.