So i've read many topics and lose so much time cause of this issue.
My components don't load anymore and i'm receiving this error in my console : 'FirebaseError: Firebase: Error (auth/invalid-api-key).'
(I specify that is my first project using firebase).
About my firebase.config.js :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
const app = firebase.initializeApp({
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_MESSAGING_APP_ID
});
export const auth = app.auth();
export default app;
About my .env.local :
REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
REACT_APP_AUTH_DOMAIN=XXXXX.firebaseapp.com
REACT_APP_PROJECT_ID=name-name-name
REACT_APP_STORAGE_BUCKET=name-name-name.appspot.com
REACT_APP_MESSAGING_SENDER_ID=5XXX7XXXX5XX
REACT_APP_MESSAGING_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd
**About files location : **
src/utils/firebase.config.js
src/.env.local
About the auth process :
Authentication is used in a signUp component that matches a form
Thanks for reading
When I just paste the API_KEY directly in app like this : apiKey: "string". This works, so I think this issue come from my .env file.
I think you're using create-react-app. If that is the case you need to add the .env file to the root of your project, not the src folder.
See the docs for more info on env vars in create react app https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
Related
I am trying to use firebase in my new React app but I am always getting "The development server returned response errror code: 500"
And I have no ideo of what am I doing wrong. I only created a firebase.js file to put my firebase configuration
import * as firebase from 'firebase'
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
export {firebase};
I am getting this error in the terminal (and I am sure of having installed firebase):
Unable to resolve "firebase" from "firebase.js"
This doesn't look right, you imported firebase never used it you created config never used it, is this the whole code ?
Please try to follow firebase documentation, last i checked you had to import only the initializeApp function with config object.
here this might help - Firebase Setup for React App
I am working on a react project and I need firebase for authentication I have installed firebase using "npm i firebase" & firebase-tools using "npm i firebase-tools" also the path is correct. There is no problem in defining the path. Everything from my side is correct then also it is showing the above error.
--- Please help -----
Why this is happening?
If you give a look at firebase package version(inside package.json) then it's version 9. Now firebase has added a new compatibility option so can use the /compat folder in your imports.
I have made some changes in Firebase.js file please replace your code
with the given below and then start your dev server.
import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"
const firebaseConfig = {
apiKey: "AIzaSyA9BnlX96fMf7XiUVCFRsoQzG8DGERJkeY",
authDomain: "disneyplus-clone-a33d5.firebaseapp.com",
projectId: "disneyplus-clone-a33d5",
storageBucket: "disneyplus-clone-a33d5.appspot.com",
messagingSenderId: "37918794208",
appId: "1:37918794208:web:dbe9842dfe1dda522a4b85",
measurementId: "G-DRVLJKWRWG",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage =firebase.storage();
export { auth,provider,storage};
export default db;
I'm trying to use Firebase Emulator on a local project based on Nextjs. Following the guidance from Firebase here I'm trying to use db.useEmulator('localhost', 8080); after I initialised Firebase but I have this error:
Error was not caught TypeError: db.useEmulator is not a function
at Module.eval (VM79706 firebase.js:30)
at eval (VM79706 firebase.js:91)
at Module../utils/firebase.js (_app.js?ts=1603918354205:23994)
...
I've been using the emulator to test cloud functions and it's working pretty well. I just don't understand how to connect it with Firestore.
Here is how I set up Firebase:
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/analytics';
const clientCredentials = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};
// Check that `window` is in scope for the analytics module!
if (typeof window !== 'undefined' && !firebase.apps.length) {
firebase.initializeApp(clientCredentials);
if ('measurementId' in clientCredentials) firebase.analytics();
const db = firebase.firestore();
if (process.env.NEXT_PUBLIC_DB_HOST === 'localhost') {
db.useEmulator('localhost', 8080);
}
}
export default firebase;
Any idea why I'm getting this error and how I connect Firebase emulator with Nextjs?
To answer my own question, the problem was that this method was introduced in the new version of firebase 8.0.0. I just had the update and voila!
Using firebase ver. 9.4.1.
You may using database UI for work with database locally. Url to database UI show, when start emulators.
Regular url: localhost:PORT/database
I'm having issues getting firebase into this project and I'm really not sure what is going wrong? All the firebase code (except the project-specific config code) is exactly the same as another (working) project...
I'm Using react-native with expo and have the FB database as a web project.
I Initialize the database in a file called firebase.js on the root level of the project, it's sitting right next to app.js. Database doesn't have security rules yet so I removed some of the info but its what you would expect for an api key.
import * as firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "removed for post",
authDomain: "removed for post",
databaseURL: "removed for post",
projectId: "goalsdev-7eb67",
storageBucket: "goalsdev-7eb67.appspot.com",
messagingSenderId: "362368452051",
appId: "removed for post",
measurementId: "G-CNRGY3FTLE"
};
firebase.initializeApp(firebaseConfig);
export default firebase;
Then I try and use it like so...
import firebase from 'firebase'
this is in /screens/signUpFinal, have also tried importing as 'firebase.js', '../firebase' and '../firebase.js'
package.json is:
...
"dependencies": {
"#react-native-community/masked-view": "0.1.10",
"#react-native-firebase/app": "^8.4.3",
"#react-native-firebase/auth": "^9.2.3",
...
...
First run
npm install --save firebase
And instead of this:
import * as firebase from "firebase"
Use this:
import * as firebase from "firebase/app";
Source: https://firebase.google.com/docs/web/setup#node.js-apps
And also this:
import firebase from 'firebase'
To this:
import firebase from '../firebase'
And remove #react-native-firebase libraries because they won't work with expo.
I found that this is the best/easiest way to use in React.js with no problem ....you can try to import like this ( "firebase": "^9.6.1",) :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
create your configfile .....
const firebaseConfig = { your config data ...};
and then you can use it in this way without any annoying error :
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
I hope it can help for others who have the same problem I had
The last time I had to install firebase was over 6 months ago and that was "firebase": "^8.6.2". The configuration looked something like;
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/messaging';
import 'firebase/analytics';
import {
API_KEY,
AUTH_DOMAIN,
DATABASE_URL,
PROJECT_ID,
STORAGE_BUCKET,
MESSAGING_SENDER_ID,
APP_ID,
MEASUREMENT_ID,
MESSAGING_VAPID_KEY,
} from '../config';
const config = {
apiKey: API_KEY,
authDomain: AUTH_DOMAIN,
databaseURL: DATABASE_URL,
projectId: PROJECT_ID,
storageBucket: STORAGE_BUCKET,
messagingSenderId: MESSAGING_SENDER_ID,
appId: APP_ID,
measurementId: MEASUREMENT_ID,
};
// Initialize Firebase App with Configurations
firebase.initializeApp(config);
// Setup Firestore
const analytics = firebase.analytics();
const database = firebase.firestore();
const storage = firebase.storage();
// Setup push messaging
let messaging = null;
if (firebase.messaging.isSupported()) {
messaging = firebase.messaging();
messaging.usePublicVapidKey(MESSAGING_VAPID_KEY);
}
export {
firebase, storage, messaging, analytics, config, database as default,
};
As of the time of posting this, firebase is at v9 and a lot has changed. Kindly refer to the official doc here
for help with setting up firebase on a project.
Google has updated Firebase from version 8 to modular Web SDK. For this reason if you are using firebase#>9.0.0 then it will be a bit different.
In the firebase.js file you need to import firebase like this.
import firebase from "firebase/compat/app";
So a sample of your firebase.js will look like this
import firebase from "firebase/compat/app";
import { FIREBASE_CONFIG } from "./constants/firebase";
import "firebase/compat/storage";
firebase.initializeApp(FIREBASE_CONFIG);
export const storage = firebase.storage();
export default firebase;
Here FIREBASE_CONFIG is your firebase configuration
As shown in the example use this storage object in other files.
As here I used this storage to other functions and worked on its functionalities like upload files etc.
I haven't tried with other services like authentication but at least firebase-storage service worked for me
cd src from project file inside src do npm install firebase,I was facing same issue, but this solution sorted my problem.
My goal is to have my firebase setup in a firebase_setup.js file in my root directory of my React Native project. I want to do this because it will allow me to perform import firebaseApp from 'AppName/firebase_setup' in my login.js and signup.js files.
I don't want to keep copying and pasting my Firebase credentials in every component I want to use the firebaseApp variable in.
firebase_setup.js
import * as firebase from 'firebase';
// Initialize Firebase
const firebaseConfig = {
apiKey: "FIREBASE_API_KEY",
authDomain: "FIREBASE_AUTH_DOMAIN",
databaseURL: "FIREBASE_DB_URL",
storageBucket: "",
};
export default const firebaseApp = firebase.initializeApp(firebaseConfig);
However, when I refresh the iPhone simulator I get this error:
SyntaxError: AppName/firebase_setup.js: Unexpected token (11:15)
It seems to have some issue with me using export default on firebaseApp. Any insight on this issue would be greatly appreciated! Thanks!
Try changing the last line to:
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp;
Why the syntax is invalid
Exporting a variable declaration list as "default" wouldn't make sense: for one, the list can have more than one element:
export default var a, b, c; // Non-sensical