Expo and firebase cloud functions - firebase

Edit:
I Solved the Problem by changing import '#firebase/functions' to import 'firebase/functions'
I'm creating an app using expo and firebase.
I trying to add Cloud functions to be callable in my app.
My code is the following in my FirebaseApi.js
import * as firebase from 'firebase'
import '#firebase/functions'
const firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
}
export default class Firebase {
static auth;
static database;
static storage;
static functions;
static EmailAuthProvider;
static init() {
firebase.initializeApp(firebaseConfig);
Firebase.auth = firebase.auth();
Firebase.auth.setPersistence(firebase.auth.Auth.Persistence.LOCAL);
Firebase.EmailAuthProvider = firebase.auth.EmailAuthProvider;
Firebase.database = firebase.database();
Firebase.storage = firebase.storage();
Firebase.functions = firebase.functions();
}
}
First i encountered the error that firebase.functions() is undefiend, which lead me to the following article on here: Implement callable cloud functions in Firebase client app
But this solution doesn't seem to work with firebase.
I did call npm install --save #firebase/functions and in my package.js #firebase/functions is insalled.
But when trying to build the app it states
Unable to resolve #firebase/functions" from ".//js/firebase/firebaseAPI.js"
Am i doing something wrong, or is there maybe a problem using Firebase Cloud functions with expo?

The solution in the link was almost right.
For me, I needed to ditch the #.
So, instead of
import '#firebase/functions'
you need
import 'firebase/functions'

Related

WebConfig doesn't return measurementId

I am trying to enable firebase analytics in my existing firebase project. The project is a static React website that only uses Firebase hosting.
Following this get start tutorial, I am getting the following error in my console:
Ignored "config" command. Invalid arguments found
Searching how to solve this problem, I found this comment and checked that my webConfig get request is not returning the measurementId. However I couldn't find any info about how to correct it.
//firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics} from "firebase/analytics";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "{ApiKey}",
authDomain: "{projectId}.firebaseapp.com",
projectId: "{projectId}",
storageBucket: "{projectId}.appspot.com",
messagingSenderId: "{messagingSenderId}",
appId: "{appId}",
measurementId: "{measurementId}",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const analytics = getAnalytics(app);
WebConfig call (Http 200, Get):
response:
{
"projectId": "{projectId}",
"appId": "{appId}",
"storageBucket": "{projectId}.appspot.com",
"authDomain": "{projectId}.firebaseapp.com",
"messagingSenderId": "{messagingSenderId}"
}
Is there any config that I am missing? what should I do to make it work?
There could be something wrong with the stream for your web app that’s why the measurementId is not being configured. You could try to unlink and relink to your Google Analytics integration which usually resolves any broken integration. Make sure that the currently linked GA property is the one you’re going to use for relinking to avoid losing your data.

Nuxt + Firebase - Correct way to handle environment variables

I have been trying to develop a fully functional, reusable firebase authentication app however after looking online at multiple different solutions, I have developed the below which works perfectly but from my understanding there is no way to protect the API keys/sensitive data? Is there anyway to use environment variables on the plugins/firebase.js file?
The nuxt/firebase docs suggests declaring them within the nuxt.config.js file? But when following the docs and trying to install firebase & #nuxtjs/firebase I keep running into errors. NPM error when I am trying to install #nuxtjs/firebase
Is there any definitive/working best practise to follow when working with Nuxt & Firebase?
~plugins/firebase.js
import firebase from 'firebase/app';
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
const firebaseConfig = {
apiKey: "xxxx",
authDomain: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};
firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''
export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()
export default firebase
~/plugins/fireauth.js
import { auth } from '~/plugins/firebase.js'
export default (context) => {
const { store } = context
return new Promise((resolve, reject) => {
auth.onAuthStateChanged(user => {
console.log(user);
store.dispatch('setUser', user)
resolve(user)
}, err => {
reject(err)
})
})
}
Update to #Kissu
The environment variables are now working as per #kissu's comments below - however the app is now crashing because the initializeApp() is not being run.
Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
~/plugins/firebase.js
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'
export default ({ $config }) => {
const firebaseConfig = {
apiKey: $config.firebaseConfig.apiKey,
authDomain: $config.firebaseConfig.authDomain,
projectId: $config.firebaseConfig.projectId,
storageBucket: $config.firebaseConfig.storageBucket,
messagingSenderId: $config.firebaseConfig.messagingSenderId,
appId: $config.firebaseConfig.appId
}
!firebase.apps.length ? firebase.initializeApp(firebaseConfig) : ''
}
export const auth = firebase.auth()
export const google = new firebase.auth.GoogleAuthProvider()
export const storage = firebase.storage()
Resources:
https://firebase.nuxtjs.org/
https://dev.to/drewclem/building-user-accounts-with-nuxt-vuex-and-firebase-2o6l
In your Firebase Config, you can use local environment variables (from your .env file) using process.env.VUE_APP_:
// ~/plugins/firebase.js
const firebaseConfig = {
apiKey: process.env.VUE_APP_FIREBASE_apiKey,
authDomain: process.env.VUE_APP_FIREBASE_authDomain,
projectId: process.env.VUE_APP_FIREBASE_projectId,
storageBucket: process.env.VUE_APP_FIREBASE_storageBucket,
messagingSenderId: process.env.VUE_APP_FIREBASE_messagingSenderId,
appId: process.env.VUE_APP_FIREBASE_appId,
measurementId: process.env.VUE_APP_FIREBASE_measurementd,
};
But be sure to set your Variables in your .env file like this:
// ~/.env
// NOTE: THIS FILE IS NOT COMMITTED TO CODE REPOSITORY / GITHUB AND SHOULD BE IGNORED BY DEFAULT IN YOUR `.gitignore` FILE
// NOTE: For Vue.js environment variables, you must prefix them with `VUE_APP_`
VUE_APP_FIREBASE_apiKey=
VUE_APP_FIREBASE_authDomain=
VUE_APP_FIREBASE_projectId=
VUE_APP_FIREBASE_storageBucket=
VUE_APP_FIREBASE_messagingSenderId=
VUE_APP_FIREBASE_appId=
VUE_APP_FIREBASE_measurementId=
Where after the = you put your secret keys and ID's. NOTE: Be sure to leave NO SPACE between the = and your key. For example:
VUE_APP_FIREBASE_apiKey=YOUR.KEY.HERE
...
You can read more documentation on VUE_APP Environment Variables here: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
This .env file should not be committed to Github, or your code repository. Instead, set these variables on your production environment. For example, if you are using Netlify or Heroku, you will want to set Environment Variables with the EXACT same names like VUE_APP_FIREBASE_apiKey and set its value to be equal to your Key.
If using Netlify, set your Environment Variables in your Build & Deploy Site Settings:
https://app.netlify.com/sites/{{YOUR_SITE_HERE}}/settings/deploys#environment

'Firebase' connection problem, Same code worked in 'react JS' but not worked in 'react native' projects?

firebase-config.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "**********************************",
authDomain: "***********.firebaseapp.com",
projectId: "***********",
storageBucket: "***********.appspot.com",
messagingSenderId: "*************",
appId: "******************************",
measurementId: "****************",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };
package.json
{
"firebase": "^9.4.0", // latest version
}
It gives this error when running the app
ERROR [2021-11-16T08:33:02.823Z] #firebase/firestore: Firestore (9.4.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
How to solve this error?
For react native.
Consider [https://rnfirebase.io/]. This will help you how to install Firebase in react native. As React Native is a cross platform and runs on native dom therefore you need to link the libraries and also add your bundle and package id in firebase console.
Again DONT WORRY, this link will help you to do everything easily.

React Native: which firebase storage npm package to use?

A learner in React native and Firebase.
Here is my code to intialize firebase storage and fetch url for a storage path:
import { firebase } from '#react-native-firebase/storage';
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const storage = firebase.storage();
let imageRef = firebase.storage().ref('photos/flower.png');
console.log(imageRef);
I expect imageRef to be containing url for the Firebase storage's image file.
But I get the error:
ERROR TypeError: undefined is not an object (evaluating
'_firebase.firebase.storage')
I feel, the error is due to wrong package name import.
Could someone guide me on what is wrong?
I expect imageRef to be containing url for the Firebase storage's image file.
Firstly, you should follow the example in the documentation.
The core documentation also says:
Unlike the Firebase Web SDK, there is no need to manually call the initializeApp method with your project credentials.
So you shouldn't have to call initializeApp at all if you set things up correctly.
ref() returns a Reference type object, which is just a pointer to the file. If you want an HTTPS type URL to download the content of that file, you will need to use its getDownloadURL method to get that.
import storage from '#react-native-firebase/storage';
let imageRef = storage().ref('photos/flower.png');
imageRef.getDownloadURL().then(url => {
console.log(url);
})

TypeError: undefined is not an object (evaluating 'Uo.getRandomValues') Firebase/firestore react-native

I keep getting this error while trying to a access a firestore collection
Here's my firebase config
import Firebase from "firebase";
import "firebase/auth";
import "firebase/firestore";
let config = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
projectId: "xxx",
storageBucket: "xxx.appspot.com",
messagingSenderId: "xxx",
};
let fb = Firebase.initializeApp(config);
let firestore = fb.firestore();
export const db = firestore;
export const auth = fb.auth();
export const firebase = fb;
Import and usage in a component:
import { db } from "./src/plugins/firebase";
db.collection("collection")
.doc(docId)
.collection("subcollection")
.doc(subdocId).set({
some object
})
I've seen similar issues like in: Type Error undefined is not an object (evaluating 'Wu.getRandomValues')
So I downgraded firebase to 7.9.0 but it didn't fix it...
Also this is only happening when running react-native bundle with option --dev false, if --dev true I don't get the error...
I finally made it work... I've tried everything removing firebase deleting package-lock.json clear npm cache and reinstalling firebase#7.8.2 but none of those worked... What worked was switching to Yarn instead of npm... so I just did a yarn add firebase#7.8.2 and it's up and running again.

Resources