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
Related
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"
};
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
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 made firebase authentication in my react native app. It works well when I use its 'debugging' mode. Its signs up and logs in perfectly. And makes data operations to firebase real-time database well, too. But it must be working without debugging mode. Without debugging mode it gives this error:
I am curious about the solution. Can anyone help? Btw my device is an android.
I think there's an issue with firebase#5.0.4
On your command line run npm install firebase#5.0.3.
OR
You have to import firebase library as follows as i was having same issue as yours ans following way solved my issue
USE : -
componentWillMount() {
this.intializeFirebase();
}
intializeFirebase() {
/* eslint-disable global-require */ // to disable eslint rule
const firebase = require('firebase');
/* eslint-enable global-require */ // to enable eslint rule
firebase.initializeApp({
apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
projectId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
messagingSenderId: 'xxxxxxxxxxxxxxxxxxxxxx' });
}
Instead of this :-
import firebase from 'firebase';
This will definatley solve your issue.
I did a simple call to ref.once('value', callback). The callback never got called.
Instead I got this error in my Chrome console: Refused to display 'https://console.firebase.google.com/project/project6...redacted...73&parent=http%3A%2F%2Flocalhost%3A8204&pfname=&rpctoken=3...redacted...4' in a frame because it set 'X-Frame-Options' to 'DENY'.
I have no idea what this iFrame is or whether that's why I didn't get a callback. FWIW, I'm running my dev app on localhost:8204
Edit:
Here's a fuller code sample.
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
firebase.initializeApp({
apiKey: config.firebaseApiKey,
authDomain: `${config.firebaseAppName}.firebaseio.com`,
databaseURL: `https://${config.firebaseAppName}.firebaseio.com`,
storageBucket: config.firebaseStorageBucket
})
const ref = firebase.database().ref()
ref.once('value', callback)
Ok the problem was simply in the initialization config authDomain field, I wrote .firebaseio.com but it should have been .firebaseapp.com.