FireBase + React : How to access api keys stored in Google Cloud inside Firebase app?

Active3 hr before
Viewed126 times

6 Answers


I am developing an application that uses Firebase as a backend and use third party tools achieve data.,Connect and share knowledge within a single location that is structured and easy to search.,I configured my keys GCP, but not sure how to access them in Firebase. Is it a good and achievable solution? I am open to suggestions.

 Pretag team - issue, fix, solve, resolve

Welcome to React Native Firebase! To get started, you must first setup a Firebase project and install the "app" module.,Install the React Native Firebase "app" module to the root of your React Native project with NPM or Yarn:,Once the above steps have been completed, the React Native Firebase library must be linked to your project and your application needs to be rebuilt.

# Using npm
npm install--save @react - native - firebase / app

# Using Yarn
yarn add @react - native - firebase / app
load more v

Now, create a folder called config and inside it, create a new file called environment.js. This file will contain all keys needed to bootstrap and hook Firebase with our application.,In this tutorial, you are going to learn how to integrate Google Cloud Vision API in a React Native application and make use of real-time APIs. You can find the complete code inside this GitHub repo.,In this tutorial, we’ve shown you how to integrate Firebase storage services and use a machine learning API such as Google's Vision API with a React Native and Expo application.

 Pretag team - issue, fix, solve, resolve

.css - vem1e6 {
   color: var (--expo - theme - text -
      default);font - family: expo - brand - mono,
   'Liberation Mono',
   'Courier New',
   'Apple Color Emoji',
   'Segoe UI Emoji',
   'Segoe UI Symbol',
   'Noto Color Emoji';font - size: 13 px;line - height: 20 px;white - space: inherit;padding: 0 px;margin: 0 px;
}.css - vem1e6.code - annotation {
   -webkit - transition: 200 ms ease all;
   transition: 200 ms ease all;
   transition - property: text - shadow, opacity;
   text - shadow: var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px,
      var (--expo - theme - highlight - emphasis) 0 px 0 px 10 px;
}.css - vem1e6.code - annotation: hover {
   cursor: pointer; - webkit - animation: none;animation: none;opacity: 0.8;
}.css - vem1e6.code - hidden {
   display: none;
}.css - vem1e6.code - placeholder {
   opacity: 0.5;
import firebase from 'firebase/app'

// Optionally import the services that you want to use
//import "firebase/auth";
//import "firebase/database";
//import "firebase/firestore";
//import "firebase/functions";
//import "firebase/storage";

// Initialize Firebase
const firebaseConfig = {
   apiKey: 'api-key',
   authDomain: '',
   databaseURL: '',
   projectId: 'project-id',
   storageBucket: '',
   messagingSenderId: 'sender-id',
   appId: 'app-id',
   measurementId: 'G-measurement-id',

load more v

Example: "Is anyone using Firebase with PHP?" The Firebase Slack is the best place to reach out to the Firebase community for a quick chat. ,Example: "Will this database structure work?" Our Google Group is the best place to have a longer conversation with our team via email. ,Example: "How do I cancel a file upload?" StackOverflow is the best place to get help with using Firebase APIs in your code. Make sure you know how to ask a good question to help get a quick response.

 Pretag team - issue, fix, solve, resolve

To handle that create one test Firebase project using different google account (which is under free plan) and use that while you are developing and testing in local environment. In your project you can setup your Firebase config file like this to use different Firebase project based on environment —,That means nobody can simply use our Firebase config file and login or create user in our Firebase project.,If you have ever used Firebase services in your web application development, you are well aware that there is no way to hide Firebase config file from public. I myself also tried quite hard, but failed to find any solution for that. In fact found that by design those config information suppose to be public. Then I was worried anybody knows my Firebase config information can create numerous users in my Firebase project, can easily read write data and ultimately can make my project a mess and I will end up with higher payment for Firebase services usage.

 Pretag team - issue, fix, solve, resolve

Other "access-react" queries related to "FireBase + React : How to access api keys stored in Google Cloud inside Firebase app?"