I am trying to get firebase to work on my React project (using Webpack v3), but I am having some issues.
I added "firebase": "^4.10.1" to my package.json and in a firebase.js file I added this:
import * as firebase from 'firebase';
const config = {
apiKey: "API_KEY",
authDomain: "DOMAIN",
databaseURL: "DATA_URL",
projectId: "ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "SENDER_ID"
};
firebase.initializeApp(config);
firebase.database().ref().set({
message: 'Connection Successful!'
});
On my app.js I imported that firebase.js file.
import './firebase/firebase';
If I am not mistaking I am supposed to get the "Connection Successful!" message over in my database, but it's not working.
Instead I get a console error. I looked around online and found a few people with similar errors saying that adding:
node: {
console: true,
fs: 'empty',
child_process: 'empty',
net: 'empty',
tls: 'empty',
dgram: 'empty',
dns: 'empty',
}
to my webpack.config.json would fix it. I tried it and id didn't really work.
I didn't get those errors any more, but instead I get Uncaught TypeError: util.inherits is not a function (full error here). I kept looking and found this on the firebase documentation where they use var firebase = require("firebase/app"); instead of import. I tried it and still didn't work.
I've tried to yarn add util, but to no avail.
Any idea why this is happening and /or how to fix it?
Thanks.
I use Firebase in React this way:
import firebase from 'firebase'
var config = {
...
};
var fire = firebase.initializeApp(config);
fire.database().ref()...
import firebase and not import * as firebase, don't know what Firebase module do export, but maybe this change the things;
I init a variabile to which I assign the result of Firebase initialization (var fire = firebase.initalize...), then I use that to make calls to db, storage and whatever.
To me, it works flawlessly, don't know if it could be due to different versions or if it's just the code.
Related
I'm using React with create-react-app and I have integrated Firebase Messaging for push notifications, it requires that you create a file in the public folder firebase-messaging-sw.js that is responsible to setup the service worker with firebase messaging to enable it.
It all works properly, my problem is using the firebase configuration keys directly into code, I know they're public keys, it is still really bad practice to hardcode them plus I have more than one environment (different firebaseConfigs) so it's even more frustating to keep them hardcoded.
The firebase-messaging-sw.js looks like this:
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');
const firebaseConfig = {
apiKey: 'example',
authDomain: 'example',
databaseURL: 'example',
projectId: 'example',
storageBucket: 'example',
messagingSenderId: 'example',
appId: 'example',
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (message) {
return self.registration.showNotification(
"Title",
"Message"
);
});
I've seen other questions like this How to use process.env in a React service worker
The solutions won't work, the cra-append-sw lib results in babel and webpack errors (those other libs are handled by CRA, so I don't mess with them)
My react-scripts version is 4.0.3
I don't have an actual answer, but I ran into the same problem and what I've been trying is to use the getToken() function. If you take a look to the docs, you can use the optional parameter ServiceWorkerRegistration to set a custom service worker.
const swRegistration = await navigator.serviceWorker.register('/src/firebase-messaging-sw.js');
const token = await fcm.getToken({
serviceWorkerRegistration: swRegistration,
});
Now the service worker can live inside the src directory, where it will be built and you can use env variables there. The thing is that if do it this way, I get a mimetype error when registering the service worker. You can see why this error ocurrs in the last answer of this forum.
Maybe you can build up from this and find a solution, good luck!
I am relatively new to React and Firebase. Was working on a netflix clone and during firebase configuration for user authentication, it throws an error. I have installed firebase using yarn add firebase but it still throws the error. here is the firebase.js file.
import firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyBeUkRFXLx3Jwvlevk6GSwlSJ-8pnCQeBM",
authDomain: "noctoc404.firebaseapp.com",
projectId: "noctoc404",
storageBucket: "noctoc404.appspot.com",
messagingSenderId: "818097445726",
appId: "1:818097445726:web:c22585debcda59f4074dcf",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { auth };
export default db;
and it is throwing an error here saying Module not found
Compiled with problems:X
ERROR in ./src/firebase.js 3:0-32
Module not found: Error: Package path . is not exported from package /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules/firebase (see exports field in /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules/firebase/package.json) Did you mean './firebase'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /home/insidtrifl/Documents/Web Dev/Projects/noctoc/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
any help would be awesome. Thank You.
I am trying to set-up a Firebase-messaging-sw.js file (for web push notifications). I am wondering if there is a way to avoid exposing my Firebase config data to the public as much as possible - though it might be revealed anyways? (I'm not too sure about the nuances)
I've tried following: How can I customize my Service Worker based on environment variables? But the answer's swEnvbuild doesn't seem to be running, as the swenv.js file is not found. I suspect it might need to be set-up differently in React?
(first question, please feel free to provide constructive criticisms of my question)
I recently had to do this with a CRA app, it's not easy to find information on it so I figured I should share my solution. Assuming you've already changed serviceWorker.unregister() to serviceWorker.register() in ./src/index.js, and have a .env file with your variables set in the root of your project, then you can update ./src/serviceWorker.js to include your process.env variables as a query string.
In the register function in serviceWorker.js, update const swUrl as shown below, notice the const firebaseConfig w/process.env, declared before swUrl..
./src/serviceWorker.js:
// Convert environment variables to URL `search` parameters
const firebaseConfig = new URLSearchParams({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
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_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
}).toString();
// Service worker URL w/config variables
const swUrl = `${process.env.PUBLIC_URL}/firebase-messaging-sw.js?${firebaseConfig}`;
then in ./public/firebase-messaging-sw.js (create it if it doesn't exist), you can do something like the following..
./public/firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/8.0.2/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.0.2/firebase-messaging.js');
// Set Firebase configuration, once available
self.addEventListener('fetch', () => {
const urlParams = new URLSearchParams(location.search);
self.firebaseConfig = Object.fromEntries(urlParams);
});
// "Default" Firebase configuration (prevents errors)
const defaultConfig = {
apiKey: true,
projectId: true,
messagingSenderId: true,
appId: true,
};
// Initialize Firebase app
firebase.initializeApp(self.firebaseConfig || defaultConfig);
const messaging = firebase.messaging();
// Configure message handler (assumes backend is set up)
messaging.onBackgroundMessage((payload) => {
const { icon, body, title } = payload.data;
self.registration.showNotification(title, { body, icon });
});
If there's a more ideal solution, would love to hear about it, but this configuration worked for me.
I found this article which uses cra-append-sw to append the env vars. Then I created two pre scripts in my package.json. When I run npm start the prestart script runs creating a [root folder]/public/firebase-messaging-sw.js file that contains the env vars (after being processed by webpack).
Implementation
I created a [root folder]/firebase-messaging-sw.js. This file will be processed by webpack replacing the values of the env vars.
// Give the service worker access to Firebase Messaging.
// Note that you can only use Firebase Messaging here. Other Firebase libraries
// are not available in the service worker.
importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.1.1/firebase-messaging.js');
// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
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_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
});
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/logo.png'
};
self.registration.showNotification(notificationTitle, notificationOptions);
});
then I have [root folder]/.env.dev and [root folder]/.env.prod
REACT_APP_FIREBASE_API_KEY=A...
REACT_APP_FIREBASE_AUTH_DOMAIN=d...
REACT_APP_FIREBASE_DATABASE_URL=h...
REACT_APP_FIREBASE_PROJECT_ID=d...
REACT_APP_FIREBASE_STORAGE_BUCKET=d...
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=7...
REACT_APP_FIREBASE_APP_ID=1...
REACT_APP_FIREBASE_MEASUREMENT_ID=G...
And finally, i added 2 pre scripts in my package.json
...
"scripts": {
"prestart": "cra-append-sw --mode dev --env ./.env.dev ./firebase-messaging-sw.js",
"prebuild": "cra-append-sw --mode build --env ./.env.prod ./firebase-messaging-sw.js",
...
I had real troubles with this one myself. The service worker gets involved in the stack way before your environment gets bootstrapped so it makes sense that it doesn't have access to your .Env variables.
My Solution
I built an npm module that on build, using webpack, extracts your "safe" versioning variables from your .env file and puts them into a stand-alone JS file. You can then go ahead and import this file and use it in your service worker.
https://www.npmjs.com/package/vue-enverywhere
Disclaimer:
I know this is for vue, but its webpack, and it's not vue specific. Also, You might be better to just copy the code, and not use the module. This was more of a fun exercise for myself :)
In index.js file (or wherever you want to register service worker) :
if ("serviceWorker" in navigator) {
console.log("Registration started");
const firebaseConfig = encodeURIComponent(
JSON.stringify({
apiKey: process.env.FCM_API_KEY,
projectId: process.env.FCM_PROJECT_ID,
messagingSenderId: process.env.FCM_SENDER_ID,
appId: process.env.FCM_APP_ID,
})
);
navigator.serviceWorker
.register(
`../../../firebase-messaging-sw.js?firebaseConfig=${firebaseConfig}`
)
.then(function (registration) {
console.log("Registration successful, scope is:", registration.scope);
})
.catch(function (err) {
console.log("Service worker registration failed, error:", err);
});
In Service Worker, firebase-messaging-sw.js :
importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts(
"https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
);
firebase.initializeApp(
JSON.parse(new URL(location).searchParams.get("firebaseConfig"))
);
firebase.messaging();
This is enough for receiving Background Push Notifications on sending notification-type message.
this solution will work,
Just remember to edit the path to your Service-worer file (while registering in index.js or so), according to your project,
Or It will give "Mime Error".
I am setting a new firebase project. In the project I try to use firebase.auth() to create a new user with user email and password. However, when I use firebase serve and do a post request with the link in postman, i get an error which says firebase.auth is not a function.
I believe that there are questions regarding this issue, however I tried all the solutions that they have provided but none of the worked for me.
I tried:
- Adding require firebase/auth
- Deleting node modules and reinstalling firebase and firebase functions
- Import firebase and functions in different order
- Install firebase and functions in a different order
- Create a new project and install firebase and functions from scratch
const firebase = require('firebase');
const config = {
apiKey: "xxxxx,
authDomain: "xx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxx",
appId: "xxxxxx"
};
firebase.initializeApp(config);
const functions = require('firebase-functions');
const admin = require('firebase-admin');
const app = require('express')();
admin.initializeApp();
//Signup route
app.post('/signup', (req, res) => {
const newUser = {
email: req.body.email,
password: req.body.password,
confirmPassword: req.body.confirmPassword,
handle: req.body.handle,
}
// TODO: validate data
firebase.auth().createUserWithEmailAndPassword(newUser.email, newUser.password)
.then(data => {
return res.status(201).json({ message: `user ${data.user.uid} signed up successfully`})
})
.catch(err => {
console.error(err);
return res.status(500).json({error: err.code});
});
});
Expected results: get status 201 on postman and created new user in firebase
Actual results: TypeError: firebase.auth is not a function. In the console and postman.
You should understand the difference of Firebase JavaScript SDK and Firebase Admin SDK for Node.
The Firebase JavaScript SDK is for the client side.
Firebase Admin SDK is for the server side(like the Cloud Functions).
So in your case, you should use admin.auth().createUser() .
See:
https://firebase.google.com/docs/web/setup
https://firebase.google.com/docs/admin/setup
It seems you want to instantiate the application using the client sdk instead of the server.
You need to use a private key instead, to get one go to your firebase console -> Project Overview -> Service accounts -> Generate new private key
then after you download and include the key in your project:
const admin = require('firebase-admin')
const serviceAccount = require('your_firebase_key/path/goes/here')
admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
})
Good luck!
I was able to resolve this issue by installing firebase as well as firebase-tools. I had initially only installed firebase-tools. Try running npm i firebase, restart the server firebase serve and see if you're still having the issue.
I have setup axios in my project like so,
In my src/ folder created a axios.js file that looks like so:
import axios from 'axios';
const instance = axios.create({
baseURL : 'https://myprojectname-11651.firebaseio.com/'
});
export default instance;
Then in my main component where i use axios i use it like so:
import axios from '../axios.js';
// removing code thats not necessary for this example
componentDidMount() {
// alert();
axios.get('/habits/badHabits.json')
.then( (resp) => {
console.log(resp);
})
}
I get a 401 error in my console, The dashboard for firebase seems to have changed from a year back and i am not unable to use axios with firebase like i used it over a year ago.
My database look like so:
How exactly do i use axios with firebase ? do i have to install firebase from npm ?
Yes you have to install firebase in your project using npm. It is initial process to configure your app with firebase. Then you have to add firebase credentials like
<script>
// Initialize Firebase
var config = {
apiKey: <YOUR_APP_KEY>,
authDomain: "<YOUR_APP_DOMAIN>",
databaseURL: "<YOUR_DATABASE_URL>",
projectId: "<YOUR_PROJECT_ID>",
storageBucket: "<YOUR_STORAGE_URL>",
messagingSenderId: "<YOUR_MESSENGER_ID>"
};
firebase.initializeApp(config);
</script>
Instruction:- You can find the above code here,
Firebase console > Project Settings (This is the gear icon opposite of "Project overview" text) > Your apps > (On same page you will have three choices to either use it for android, ios , web) > Add Firebase to your web app
Now that you have added these things you just need to use firebase functions to access the firebase storage, authentication, database.
Here is the link where you can find all your details
https://firebase.google.com/docs/web/setup
It will help you.
I have the feeling you are mixing up the Real Time Database REST API and the Firestore one.
From the picture in your question, you are using Firestore.
And for Firestore, "all REST API endpoints exist under the base URL https://firestore.googleapis.com/v1beta1/", see the doc here.
On the other hand, as detailed here, the Real Time DB REST API endpoints have a base URL like https://docs-examples.firebaseio.com/rest/.... which is similar to the URL in your question.