Troubles with my Firebase-integration inside my Vue.js App - firebase

Currently I'm trying to implement firebase into my Vue.js App. I set up Vue.js using the Vue CLI, installed firebase as well as vuefire and bootstrap-vue, now I tried to get some data I inserted into my db manually but somehow I don't get any data from firebase. I'm quite new to Vue.js so this might be a beginners error but I don't really know what to do right now.
I don't know if it matters but I plan on using vuex later on, so I installed that as well, I've followed a tutorial on how to set up Vue.js, in there she is using a local js file as a database, I got it all set up but now I want to use Firebase as my database.
I think it would be a bit to much if I post every file thats relevant for this in here so I created a GitHub Repository with all the files, but here is the part where I think the problem might be:
<b-table striped hover :items="clients"></b-table>
{{ clients }}
import { db } from '#/environment/firebase'
export default {
data () {
return {
clients: [],
systems: []
}
},
firestore: {
clients: db.collection('clients'),
systems: db.collection('systems')
}
}
somehow Vue.js doesn't pull the data correctly. I thought this might have something to do with an authentication error from firebase but my console doesn't show any errors neither does my console where I'm running the npm run serve and at this point I don't really know what to do anymore.
It's also possibly that my error is in my inegrationfile of firebase since I just copied the one from the Get started page from vuefire:
import firebase from 'firebase'
import firebaseConfig from './firebaseConfig'
// Get a Firestore instance
export const db = firebase.initializeApp(firebaseConfig).firestore()
// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { TimeStamp, GeoPoint } = firebase.firestore
export { TimeStamp, GeoPoint }
But, as I said, I don't really know what my error is here since from my understanding everything should work up to this point..

In your main.js you included twice:
import './plugins/bootstrap-vue'
without including the vuefire.js plugin file.

Related

Error: Could not load the default credentials (Firebase function to firestore)

I am attempting to write an onCall function for Firebase Cloud Functions that performs advanced querying tasks on a firestore database (i.e. checking a text query up against AutoML natural lang to get a category, etc) but I keep running into a problem trying to query the database from the function:
Error getting documents :: Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
at GoogleAuth.getApplicationDefaultAsync (/srv/node_modules/google-auth-library/build/src/auth/googleauth.js:161:19)
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:229:7)
Function:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const db = admin.firestore();
exports.query = functions.https.onCall((data, context) => {
const text = data.text;
var results = [];
const promise = db.collection('providers').get()
promise.then((snapshot) => {
console.log('marker');
snapshot.forEach((doc) => {
results.push({id: doc.id, data: doc.data()});
});
console.log('yessir');
return {results: results};
}).catch((err) => {
console.log('Error getting documents :: ', err)
console.log('nosir');
return {results: "no results"};
});
});
Longer output:
Function execution started
Function execution took 8ms, finished with status code: 200
Error getting documents :: (etc, same error)
nosir
Example 2 (no change in running):
Function execution started
Function execution took 1200 ms, finished with status code: 200
marker
yessir
I can't figure out where this problem is coming from or how to resolve it.
Any help?
Regards.
What I first did to solve it was add my firebase admin sdk key to my project.
I downloaded it at
https://console.firebase.google.com/u/0/project/**YOUR_PROJECT_ID**/settings/serviceaccounts/adminsdk
then at admin.initializeApp(); I changed to:
admin.initializeApp({
credential: admin.credential.cert(require('../keys/admin.json'))
});
My folder structure is
├── key
│ ├── admin.json
├── src
│ ├── index.ts
HOWEVER, a better practice and safer approach, as some mentioned already:
You could use environment variables to store your credentials, this way you won't commit it to a repository such as Github, keep it safer from safety breaches and won´t make it hardcoded.
Depending on your project and where you'll deploy it there's a different way to do it.
There are many tutorials around on how to create and access env variables (like this one), but you could use a name it like the example below:
GOOGLE_APPLICATION_CREDENTIALS="/home/admin.json"
I had the same error "Could not load the default credentials".
The error occured after updating my project dependencies with npm update.
More precisely firebase-admin and firebase-functions.
Before update:
"dependencies": {
"#google-cloud/firestore": "^1.3.0",
"firebase-admin": "~7.0.0",
"firebase-functions": "^2.2.0"
}
After update:
"dependencies": {
"#google-cloud/firestore": "^1.3.0",
"firebase-admin": "^8.6.0",
"firebase-functions": "^3.3.0"
}
I added the serviceAccountKey.json to my project and changed the imports with the code provided at the service account setting of my firebase project.
From :
var admin = require('firebase-admin')
admin.initializeApp()
To:
var admin = require('firebase-admin');
var serviceAccount = require('path/to/serviceAccountKey.json');
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: 'https://my-project.firebaseio.com'
});
See #Fernando Rocha's answer below to access the account setting of your firebase project.
#aldobaie's answer helped me figure out what was going on for my use case. For those who are not looking to add async/await to all their calls, remember that the firestore calls return promises, so prepending them with return has the same effect.
In my case:
function doSomething(...) {
return admin.firestore().collection(...).doc(...).get()
.then((doc) => {...})
.catch(err => {...})
}
module.exports = functions.firestore.document('collection/{docId}').onWrite((change, context) => {
return doSomething()
})
I think the accepted answer goes against Firebase's recommend configuration. The function environment has access to admin credentials already, and passing your key in the code is not recommended.
I do it like this:
const functions = require('firebase-functions')
const admin = require('firebase-admin')
admin.initializeApp(functions.config().firebase)
I ran into the same problem myself. Sometimes the function works and many times it would through the Error: Could not load the default credentials error.
The problem I believe have been solved by watching for the Callbacks. You have to keep the function running until the callbacks have been called using the await and async prefixes.
Firebase Cloud Functions don't allow the access to the processor through callbacks once it's been terminated! That's why we get the Error: Could not load the default credentials error.
So, whenever you have a .then() function prefix it with await and prefix the function it's inside it with async and prefix any call to the function with await.
async function registerUser(..) {
...
await admin.firestore().collection(..)...
...
}
I hope this helps you out!
Another option is to set the service account key in an environmental variable instead of setting it with a call to firebaseAdmin.initializeApp({ credential }).
Linux
export GOOGLE_APPLICATION_CREDENTIALS="[PATH]"
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/[FILE_NAME].json"
Windows PowerShell
$env:GOOGLE_APPLICATION_CREDENTIALS="[PATH]"
$env:GOOGLE_APPLICATION_CREDENTIALS="C:\Users\username\Downloads\[FILE_NAME].json"
Postscript: An even better option might be to use the local emulator suite.
Alright, so I had this error as well and spent a frustrated few days going over multiple sites, articles, videos, etc to try and figure out the cause of this problem so I could get an adequate answer for both myself and everyone else who is struggling.
There are answers to this question in this thread already. However, I tried following most of them to no avail. Some have security issues and others are just too vague to follow. I decided to post a thorough answer which also addresses the security issues you would have if you followed some of the other answers.
Alright now that I've gotten that out of the way lets get started!
First of all your going to need to go to this link - Getting started with authentication
You should see this in the center of your screen -
Next, click on the button I've marked in green. This will bring you to the create service account key page.
You should see a similar screen to the below image -
For the Service Account option, select new service account.
Create a name for your service account. This is not important, name it whatever you like.
For the role option select Project -> Owner
Finally, select JSON option for key type and then hit create.
This should create and download a .json file. Place this file somewhere smart and safe. I created a folder called 'credentials' in the root of my project and placed it in there.
Also I renamed the file to something more readable. While this isn't necessary, following good file/folder naming and structuring practices is important and I would advise you to rename it to something more readable.
(Its important to note that this file is personal and should not be included in any github repositories/firebase production/etc. This file is for you and you alone!)
Next open a command prompt window and type in the following command -
set GOOGLE_APPLICATION_CREDENTIALS=C:\Users\Username\Path\To\File\filename.json
This will create an environment variable that is linked securely to your credentials which firebase will recognize and use when you make calls to authenticate yourself.
(Note - This is the command for windows. If your using mac/linux go to the 'Getting started with Authentication' page mentioned earlier to get the appropriate command for your operating system)
There you go, the issue should now be fixed. If anyone has any further questions or problems feel free to comment below and i'll do my very best to help you. I know how frustrating it can be to be stuck with an error like this.
I hope this helps someone at the very least. Happy Programming.
C.Gadd
I do not want to use #Fernando solution even though there is nothing wrong.
I have prd and non-prd environment. I use firebase use command to push the changes to the correct environment. When I deploy, firebase uses the default service account. Also I do not want to have the keys in the project folder or in my git repo.
The way I solved might not work for others, but want to share here.
The issue came to me when I updated the permission of the firebase project to give a viewer with editor permission. I made that person the owner and rolled back to editor. It went away. It is not justifying as a fix, but worked for me and I do not have to download the key.
Instead of setting serviceAccountKey.json file, you can first set .env values from it and then use those:
import * as firebaseAdmin from "firebase-admin";
const adminCredentials = {
credential: firebaseAdmin.credential.cert({
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
privateKey: JSON.parse(process.env.FIREBASE_PRIVATE_KEY || ""),
}),
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
};
if (!firebaseAdmin.apps.length) {
firebaseAdmin.initializeApp(adminCredentials);
}
const firestore = firebaseAdmin.firestore();
Old answer:
This is a known bug in Firebase. see the progress here: https://github.com/firebase/firebase-tools/issues/1940
However, meantime there are few options to resolve this:
1 Explicitly passed via code
var admin = require("firebase-admin");
var serviceAccount = require("path/to/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://your-app.firebaseio.com"
});
Not recommended this hard-coding. This json file will not be accessible on server.
2 Passed via GOOGLE_APPLICATION_CREDENTIALS
I'd recommend this way, set environmental variable:
GOOGLE_APPLICATION_CREDENTIALS=path/to/serviceAccountKey.json
For windows: (considering json is at your root path of project.
using powershell:
$env:GOOGLE_APPLICATION_CREDENTIALS='serviceAccountKey.json'
using NPM script: (notice no space before &&)
"serve": "set GOOGLE_APPLICATION_CREDENTIALS=serviceAccountKey.json&& npm run start",
(for some reason cross-env didn't work)
3 Available at a well-known filesystem path due to gcloud
by installing gcloud sdk and running gcloud auth application-default login
4 Available from the Compute Engine metadata API when running on GCP
I had same problem in firebase Error: "Could not get default credentials."
Then go to firebase console and go to project setting, where you can find Service Accounts option. Click there and you will see the Generate new private key under your project setting.
Copy code for your project language and add it to your project file.
var admin = require("firebase-admin");
var serviceAccount = require("path/to/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://your-database-url-that-is-given-under-admin-sdk-snippets"
});
After Generating the key you will have option to download. and put it in the project folder. Also set path var serviceAccount = require("path/to/serviceAccountKey.json");
That's it your are ready.
None of above.
You may just:
firebase login - It will open browser login
As soon as you do login, returnto console and run:
firebase init - It will run as successfull.
I had the same issue.
Go on your settings page on Firebase => Service and Account.
Firebase Setting 1. Parameters 2. Account 3. Download the file and rename it [admin.json]
Copy the code and paste it
Requires 'admin.json' and paste, and run Firebase deploy.
admin.initializeApp(functions.config().firebase);
also works.
This error can also occur when the cloud function is not terminated properly.
Whenever you write a cloud function make sure you return promise after the cloud function processing is over, so that cloud function knows that your process is complete.
If you don't return promise then there might be chances where your cloud function might terminate before the processing is complete.
You can refer this to know how to terminate the cloud function.
Terminate cloud functions
Download your firebase service account into your project and reference it like this:
<code>
var admin = require("firebase-admin");
var serviceAccount = require("path/to/serviceAccountKey.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "<database-url>"
});
</code>
For those who come here from a serp trying to figure out why their google cloud function fails with:
Error: Could not load the default credentials. Browse to
https://cloud.google.com/docs/authentication/getting-started for more
information. at GoogleAuth.getApplicationDefaultAsync
but none of the above helped, you can try to update all(?) of your #google/whatever dependencies:
npm i -E #google/firestore#latest. Then rebuild, deploy, try again. It happened to me a few times recently and this worked.
I just had the same problem. To solve it, just update your node packages by npm update inside your project-dir/functions/ directory. Finally, deploy again.
On MacOS I had to do the following:
export GOOGLE_APPLICATION_CREDENTIALS=/Users/myname/serviceAccountKey.json
I was getting credential error because the locally running functions emulator could not securely talk to firebase auth running in production.
Google Cloud Reference
For those who still get the same problem event after downloading account key and using it inside your code, make sure it is inside your functions folder.
One thing it's a bit difficult to find in the docs is the firebase-admin SDK only uses the emulators when environment variables tell it to. If you use the service account JSON key as described in some answers here, firebase-admin will talk to prod (on Google Cloud) rather than the emulated version, even if everything else you're doing is on the emulators.
Since most likely you would rather use the emulators for local testing, here's how I set my environment variables in Mac ~/.zshrc:
export GCLOUD_PROJECT="your-project-id"
export FIRESTORE_EMULATOR_HOST=localhost:8080
export FIREBASE_AUTH_EMULATOR_HOST=localhost:9099
export FIREBASE_DATABASE_EMULATOR_HOST=localhost:9000
The GCLOUD_PROJECT id could be your project id, but apparently any id will work as long as it is a well-formed Firebase project id, so these same environment variables can be used to test all your projects on the Firebase emulators. Try setting these environment variables first for emulator use before you try any of the other solutions.
Another oddity is firebase emulators:start needs these environment variables set, but firebase emulators:exec sets them automagically. When you are in a CI scenario :exec is the better choice, but when actively running tests as you write code having the emulators stay up and running with :start is a faster loop and you'll need the environment variables for it to work properly. By having these in environment variables, your code won't need to change at all when deployed to the Cloud.
I just had this issue and fixed it with
firebase login

Can't get rid of message When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use

I'm trying to use Firebase in my web project, and I can't understand how it works. I do:
import app from "firebase/app"; //1
import firebase from 'firebase'; //2
console.log(app === firebase); //3
it outputs true.
If I use 2 string my code to get data from firebase works and I get message about not using proper SDK in production
If I use 1 string I get an error from:
app.initializeApp(firebaseConfig);
const db = app.firestore();
Uncaught TypeError:
firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.firestore is not a
function
Please help me to sort out how to fix this.
I've got it, webpack is in charge. It wraps imported modules, that's why they are equal. Though, don't know how to optimize my module loads using webpack and firebase simultaneously.

React Native - Jest testing with firebase

I am a newbie in Firebase. I have read that it is good to unit test as you go. So this is what I have been trying to do lately. I currently have a problem when trying to test render on a class that uses Firebase. This is the following code I have been trying to fix:
import 'react-native';
import React from 'react';
import MainTab from '../../components/MainTab';
import Enzyme from 'enzyme';
import renderer from 'react-test-renderer';
it('renders correctly', () => {
const tree = renderer.create(
<MainTab/>
).toJSON();
expect(tree).toMatchSnapshot();
});
However, I am getting the following error on the test when trying to obtain the current user's id from firebase:
Has anyone stumbled into this error before? P.S. Don't go hard on me if this is something really vacuous, just trying to learn.
1. signInWithEmailAndPassword
signInWithEmailAndPassword(email, password) returns
firebase.Promise containing non-null firebase.User
Asynchronously signs in using an email and password.
This method will be deprecated and will be updated to resolve with a
firebase.auth.UserCredential as is returned in
firebase.auth.Auth#signInAndRetrieveDataWithEmailAndPassword.
For now, the implementation for this method is in below:
firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
// user signed in
// - user.displayName
// - user.email
// - user.uid // <---- the user's unique ID
})
You can see firebase.User properties here:
https://firebase.google.com/docs/reference/js/firebase.User
You can read more details about this question here https://stackoverflow.com/a/39959002/3332734
2. For your case...
If you need to test the email/password authentication, I suggest you to use a firebase "dev" project and testing with user credentials for this dev firebase project.
Be careful, don't store your UID for other tests!
Firebase dont't provides a test for authentication yet.
3. Firebase beta to 1.0 version
Easier unit testing using a new firebase-functions-test npm module that simplifies writing unit tests.
See more about it in:
Launching Cloud Functions for Firebase v1.0
Firebase SDK for Cloud Functions Migration Guide: Beta to version 1.0
I hope I have been useful!

Cloud Functions Firebase - create directory in default bucket - typescript

I am trying to write a function that updates a node in database and then create a directory in the default storage bucket.
admin.database().ref('messages').push({ original: original })
.then(() => {
//looking for something like this
//functions.storage.object().mkdir('myFolder');
})
Function samples from firebase docs use const gcs = require('#google-cloud/storage')(); but i am having hard time importing this package using typescript.
importing it this way does not work. instead of having access to gcs.bucket(...) i have access to gcs.Bucket
import * as gcs from '#google-cloud/storage';
I am looking for ways to get this import working or other ways i can use in typescript.
thanks.
Google Cloud Storage does not have a concept of "folders" -- as a pure object store, you can store a file with any arbitrary key. Various UIs (including the Firebase console) look for slashes in the object names to provide a virtual structure, but no actual structure exists.
On the import issue -- as of version 5.2.0 of the Admin SDK, you can just do:
admin.storage().bucket()
to get a reference to the Cloud Storage bucket.

Can Firebase RemoteConfig be accessed from cloud functions

I'm using Firebase as a simple game-server and have some settings that are relevant for both client and backend and would like to keep them in RemoteConfig for consistency, but not sure if I can access it from my cloud functions in a simple way (I don't consider going through the REST interface a "simple" way)
As far as I can tell there is no mention of it in the docs, so I guess it's not possible, but does anyone know for sure?
firebaser here
There is a public REST API that allows you to read and set Firebase Remote Config conditions. This API requires that you have full administrative access to the Firebase project, so must only be used on a trusted environment (such as your development machine, a server you control or Cloud Functions).
There is no public API to get Firebase Remote Config settings from a client environment at the moment. Sorry I don't have better news.
This is probably only included in newer versions of firebase (8th or 9th and above if I'm not mistaken).
// We first need to import remoteConfig function.
import { remoteConfig } from firebase-admin
// Then in your cloud function we use it to fetch our remote config values.
const remoteConfigTemplate = await remoteConfig().getTemplate().catch(e => {
// Your error handling if fetching fails...
}
// Next it is just matter of extracting the values, which is kinda convoluted,
// let's say you want to extract `game_version` field from remote config:
const gameVersion = remoteConfigTemplate.parameters.game_version.defaultValue.value
So parameters are always followed by the name of the field that you defined in Firebase console's remote config, in this example game_version.
It's a mouthful (or typeful) but that's how you get it.
Also note that if value is stored as JSON string, you will need to parse it before usage, commonly: JSON.parse(gameVersion).
Similar process is outlined in Firebase docs.

Resources