search

IjzerenHein / firestorter

Use Google Firestore in React with zero effort, using MobX 🤘
http://firestorter.com
MIT License
378 stars 50 forks source link

how to put API keys in firebase 'function'? #78

Closed Matt-Hill-83 closed 4 years ago

Matt-Hill-83 commented 5 years ago

Hi, This is really more of a question than an issue. I think Firestorter is really great, but storing my API keys in the client code in store.js seems like a security risk.

Can you suggest how I could adapt the architecture to put these keys somewhere more secure, perhaps in the cloud in a Firebase 'function'? I'm new to all of this, so any help you provide would be greatly appreciated.

Thanks!

jonesnc commented 5 years ago

Hi @Matt-Hill-83,

This is a good question, and has been addressed in a few articles and threads that might be helpful to you:

https://medium.com/@paulbreslin/is-it-safe-to-expose-your-firebase-api-key-to-the-public-7e5bd01e637b https://javebratt.com/hide-firebase-api/ https://groups.google.com/forum/#!msg/firebase-talk/-u2wBWSETds/MWP5BWtnFwAJ

Matt-Hill-83 commented 5 years ago

Thanks so much for your helpful response!

On Tue, Jun 4, 2019, 2:12 PM Nathan Jones notifications@github.com wrote:

Hi @Matt-Hill-83 https://github.com/Matt-Hill-83 ,

This is a good question, and has been addressed in a few articles and threads that might be helpful to you:

https://medium.com/@paulbreslin/is-it-safe-to-expose-your-firebase-api-key-to-the-public-7e5bd01e637b https://javebratt.com/hide-firebase-api/

https://groups.google.com/forum/#!msg/firebase-talk/-u2wBWSETds/MWP5BWtnFwAJ

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/IjzerenHein/firestorter/issues/78?email_source=notifications&email_token=ABFZX4QASLVYPCBTX7KNOIDPY3LEFA5CNFSM4HPVIK5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODW54P7I#issuecomment-498845693, or mute the thread https://github.com/notifications/unsubscribe-auth/ABFZX4X5QP5LMWQNHMCPPTLPY3LEFANCNFSM4HPVIK5A .

thdk commented 4 years ago

If your application is hosted with firebase you can make use of reserved url:

https://firebase.googleblog.com/2017/04/easier-configuration-for-firebase-on-web.html https://firebase.google.com/docs/hosting/reserved-urls

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/7.2.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/7.2.0/firebase-auth.js"></script>
  <script src="/__/firebase/7.2.0/firebase-firestore.js"></script>
</body>

SDK auto-configuration Automatic SDK configuration makes it easy to manage multiple environments (such as dev, staging, and production) from a single codebase. By relying on the reserved Hosting URL, you can deploy the same code to multiple Firebase projects.

In addition to hosting the SDKs themselves, the reserved namespace also provides all of the configuration necessary to initialize the SDK for the Firebase project associated with the Hosting site. This Firebase configuration and SDK initialization is provided by a script that you can include directly:

<!-- Load the Firebase SDKs before loading this file -->
<script src="/__/firebase/init.js"></script>

When you deploy to Firebase or test your app locally, this script automatically configures the Firebase JavaScript SDK for the active Firebase project and initializes the SDK.

If you prefer to control initialization yourself, the Firebase configuration values are also available in JSON form:

fetch('/__/firebase/init.json').then(async response => {
  firebase.initializeApp(await response.json());
});