Im trying to implement Firebase dynamic links into my react native app. I'm using expo dev since it clearly states here that Expo Go does not support firebase.
However when running const link = await dynamicLinks().getInitialLink() I keep getting Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()
Where am I supposed to initialize it? It's a bit hard to find documentation or any mention of initializing firebase for a react native app, all I can find is for a web and I'm missing a lot of the config params.
I did setup my app.json according to the these docs
Any help is highly appreciated.
It turns out my firebase config was missing non optional items, once I filled them out I initialized my app like so
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
} else {
firebase.app(); // if already initialized, use that one
}
and the config min required is
export const firebaseConfig = {
apiKey: "my key",
projectId: "my project id",
appId:"my app id",
databaseURL:"my db url",
messagingSenderId:"my id",
storageBucket:"bucket"
};
Related
This question already has answers here:
Is it safe to expose Firebase apiKey to the public?
(10 answers)
Closed last month.
I'm looking for a secure way to handle API keys in my NextJS web app using Firebase.
I see the suggestion to "hide" the keys in an ENV file then make sure of the variables by calling something like process.env.NEXT_PUBLIC_MYSUPERSECRETKEY. This will still reveal the key in the source code when it renders on the client browser.
...
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
}
...
I tried to use the process.env.FIREBASE_API_KEY (with the .env.local file defining FIREBASE_API_KEY) form to keep the variable server-side but Firebase throws an error:
FirebaseError: Firebase: Error (auth/invalid-api-key).
I looked at some code on GitHub and saw people were defining the ENV in the next.config.js file but that has the same result of showing on the client-side as well:
next.config.js
module.exports = {
env: {
API_KEY: process.env.FIREBASE_API_KEY,
},
}
.env.local
FIREBASE_API_KEY="XXX"
firebaseApp.js
...
const firebaseConfig = {
apiKey: process.env.FIREBASE_API_KEY,
...
https://nextjs.org/docs/api-reference/next.config.js/environment-variables
When you choose a hosting platform, for example we will use vercel.
You will more than likely point vercel towards your GitHub repo for it to build the application from.
When configuring the project on vercel, in the project settings there will be fields to enter your environment variables into. This will take care of the potential security issue you are seeing.
See here: https://nextjs.org/docs/basic-features/environment-variables
It's been a little while since I've created a React Native project and I just started a new one today. I've gotten firebase set up, installed react-native-dotenv, and created a .env file with all of my firebase project variables. I've triple checked to be sure the apiKey is correct (I copy pasted it when I created the firebase project anyway), and the last time I've done something like this that was all I needed to do to get it to work. So here's what I have:
firebase.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
// Firebase changed up how it works since v9
// https://travis.media/how-to-use-firebase-with-react/
const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APPID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID,
};
const firebase = initializeApp(firebaseConfig);
export const firestore = getFirestore(firebase);
export const auth = getAuth()
My .env file is the root directory of my project has the matching variables. The last time I did this it worked just fine. Now, I found this documentation: https://firebase.google.com/docs/functions/config-env explaining how to use .env in your firebase environment. However, after setting up the appropriate firebase-tools, running firebase init Firestone, and the firebase deploy --only functions, it starts to work but then fails informing me that I need to be on the Blaze plan in order to do any of that. I am sure I'm probably overcomplicating the situation, but if I'm not then that means you have to jump on the paid plan just to be able to keep your apiKey in a secure location in your code? There must be something I'm missing.
I had the same issue here but I fixed it with the installation of react-native-dotenv
https://www.npmjs.com/package/react-native-dotenv
This wasn't a problem before and is currently not a problem in my production deployment. But now I get this response when I start up my dev environment and try google OAuth signin:
"API key not valid. Please pass a valid API key."
This is my firebase setup:
// firebase.js
import "firebase/auth";
import firebase from "firebase/app";
if (typeof window !== "undefined" && !firebase.apps.length) {
firebase.initializeApp({
apiKey: process.env.NEXT_PUBLIC_API_KEY,
authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_PROJECTID
})
firebase.initializeApp(firebaseConfig);
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
}
export { firebase };
// .env.local
NEXT_PUBLIC_API_KEY=<private>
NEXT_PUBLIC_AUTH_DOMAIN=<private>
NEXT_PUBLIC_PROJECTID=<private>
When looking at the http request made from both environments, there are two differences in the urls:
deployed: https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key=(api key)=(some random number)
development: https://www.googleapis.com/identitytoolkit/v3/relyingparty/getProjectConfig?key=(api key)=(some random number)
The api keys are exactly the same but the (some random number) are different. I don't know if this reveals anything but that's all I can see that's different. I'm not sure as to what happened because this was working before both in dev and in the deployed version. Now it just works only in the deployed.
I am trying to firebase to emulate locally for testing a react native app I am working on with expo. To that end I am trying to set the host of the functions and firestore to the proper port on local host.
After many iterations I finally found a weird combination of imports and calls that did not error. However, when I tried to run it with expo my App came up as a blank screen with no errors.
I am pretty lost at this point and the firebase documentation is confusing.
This is my current index.js:
import firebase from "firebase"
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/app';
const config = {
//config info
};
const fb = firebase.initializeApp(config);
const firestore = firebase.firestore();
const functions = firebase.functions();
if(__DEV__){
firestore.settings({
host : "localhost:9000",
ssl : false
});
functions.useFunctionsEmulator("http://localhost:5001");
}
const auth = fb.auth();
export { auth, functions, firestore }
The imports are very weird and I don't understand them but I got them from another stack overflow thread and it was the only thing that made it even get to the end of the file. Is there something very obvious I am missing about setting up the local emulator?
the issue you may be having with using the Local Emulator Suite and Expo together is that that "localhost" refers to the device you're using. If you're testing on a physical device, you need to point Firebase to the running instance on your computer. I wrote up a short explainer on it here:
https://dev.to/haydenbleasel/using-the-firebase-local-emulator-with-expo-s-managed-workflow-5g5k
I was able to get this to work on my machine via:
import * as firebase from 'firebase';
import '#firebase/firestore';
import '#firebase/functions';
const firebaseConfig = { /* config data */ }
firebase.initializeApp(firebaseConfig);
firebase.firestore().settings({ host: "localhost:8080", ssl: false });
firebase.functions().useFunctionsEmulator('http://localhost:5001');
In your attempt, I think your problem might be the the way you declared:
const fb = firebase.initializeApp(config);
and then forgot to use the initialized fb -- and instead you used firebase again.
try changing these lines:
const firestore = firebase.firestore();
const functions = firebase.functions();
to this:
const firestore = fb.firestore();
const functions = fb.functions();
or just use the firebase class directly instead of setting to a variable.
Edit:
I noticed that I actually had my firestore store host value set incorrectly so I edited it above - I had added http:// to the beginning but that's not what you want for that parameter.
Note - If you want to see exactly what your dev env is doing when trying to connect to your local firestore, add this line:
firebase.firestore.setLogLevel('debug');
I'm not exactly sure it's your only problem. But for firebase functions to work in an emulator using your android or iphone you need to change
functions.useFunctionsEmulator("http://localhost:5001") to
firebase.functions().useFunctionsEmulator("http://10.0.2.2:5001");
it's for an android emulator only. It's the IP adress of the device you need to reach.
This article does a good job of showing you how to get the right debugger host IP dynamically (if you're running Expo Go on a mobile phone).
basically, it all comes down to:
const origin = Constants.manifest.debuggerHost?.split(":").shift() || "localhost";
firebase.auth().useEmulator(`http://${origin}:9099/`);
firebase.firestore().useEmulator(origin, 8080);
firebase.functions().useEmulator(origin, 5001);
I am trying to create a flutter application which connects to firestore to store and retrieve data. from the flutter cloud_firestore plugin docs, i can see that i need some values to configure it.
final FirebaseApp app = await FirebaseApp.configure(
name: 'test',
options: const FirebaseOptions(
googleAppID: '1:79601577497:ios:5f2bcc6ba8cecddd',
gcmSenderID: '79601577497',
apiKey: 'AIzaSyArgmRGfB5kiQT6CunAOmKRVKEsxKmy6YI-G72PVU',
projectID: 'flutter-firestore',
),
);
I know how to fetch the gcmSenderID, apiKey and projectID, but i am not able to understand how to get the googleAppID.
Please advice
final Firestore firestore = new Firestore(app: app);
as #martin-zeitler suggested, the id is availabile in the downloaded google-services.json file.
thanks for pointing it out.
Login to firebase --> cog wheel next to Project Overview --> Project settings --> scroll down to "Your apps" (add one if missing) --> will show "SDK setup and configuration"
You can get gcmsenderId from this link