API Key || How to hide API key in react project

API Key || How to hide API key in react project


First,  make .env file outside of your src folder.

Then, add
Prefix or Naming convention is mendatory like REACT_APP_

REACT_APP_WEATHER_API_KEY=123456
or
REACT_APP_NOT_SECRET_CODE=431644457453553
or
REACT_APP_NOT_SECRET_CODE='431644457453553'

Before commit, you should exclude this .env file so find .gitignore file and add .env.

Now you're free to go.

Don't forget to add .env in .gitignore file.

Added:

How to use env variables in your code:

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
console.log(process.env.REACT_APP_WEATHER_API_KEY;

Note Error:-
env variable is undefined.
 How do I fix it?
In order to read env variables,
restart your server.


.......................................................................................................................................................................................................
 FaceBook Login

https://github.com/keppelen/react-facebook-login

import React, { Component } from 'react'
import FacebookLogin from 'react-facebook-login';


const BASE_URL = process.env.REACT_APP_NOT_SECRET_CODE
console.log(process.env.REACT_APP_NOT_SECRET_CODE)

class App extends Component {
  render() {
    return (
      <>
        <FacebookLogin
          appId={BASE_URL}
          autoLoad={true}
          fields="name,email,picture"
          onClick={componentClicked}
          callback={responseFacebook}

        />

      </>
    )
  }
}
export default App