I am having an issue with my site regarding Firebase Realtime Database and Cross Origin Resource Policy. My site already has The Cross Origin Resource Policy header configured and is being served on every asset in my site (js, css, html, etc). But now the js script from firebase.io is being blocked because it doesn't have this header.
I would like to ask, how do I add these headers? Where in the Firebase console should I go to?
Here is the piece of code where the issue is triggered. Basically I initialize the Server object then call changeDb, then call checkAuthor (Where the issue occurs):
window.Server = function () {
const config = {
apiKey: FirebaseApiKey,
authDomain: FirebaseAuthDomain,
projectId: FirebaseProjectId,
storageBucket: FirebaseStorageBucket,
messagingSenderId: FirebaseMessagingSenderId,
appId: FirebaseAppId,
databaseURL: FirebaseDatabaseUrl
};
firebase.initializeApp(config);
};
Server.prototype.changeDb = function (prefix) {
this.annotationsRef = firebase.database().ref().child(prefix + '/annotations');
this.authorsRef = firebase.database().ref().child(prefix + '/authors');
}
Server.prototype.checkAuthor = function (authorId, openReturningAuthorPopup, openNewAuthorPopup) {
this.authorsRef.once('value', authors => { //<== Here is where it is triggered
if (authors.hasChild(authorId)) {
this.authorsRef.child(authorId).once('value', author => {
openReturningAuthorPopup(author.val().authorName);
});
} else {
openNewAuthorPopup();
}
});
};
Related
I made a simple code like following in Nuxt.js.
<template>
<div>
uid:{{ user.uid }}
</div>
</template>
<script>
import firebase from "firebase";
export default {
data() {
return {
user: {}
};
},
mounted: function() {
this.initFirebase();
},
methods: {
initFirebase: function() {
if (!firebase.apps.length) {
firebase.initializeApp({
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
databaseURL: process.env.DATABASE_URL,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGING_SENDER_ID
});
}
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.user = user
console.log("authed");
} else {
console.log("authing");
firebase.auth().signInAnonymously()
}
});
},
}
};
</script>
I expect this code will auth only one time, and UID will never change in later visit.
It works almost perfect, but combination in iOS and Safari, the UID will change when I visit this page and reload immediately after UID displayed.
I cleared the safari's cache and tried it several times, and notice that this doesn't happen if I wait 10 or 20 seconds. And if UID once changed, it will never change.
I never seen this in Android or any other browser in iOS like chrome for example.
I want these to behave same.
Please let me know if you have any good ideas.
I am getting this alert 2 times in the console, I check the network and when loading the home, it registers two identical events, indicated in the image, the only difference between one and the other is the versions, which one is 6.6.1 that It is the one I currently have, and 7.15.4 (Which I do not have installed in my project, nor do I have any configuration with it, I looked for it in the whole project, and it is neither in package.json nor in the lock.json, absolutely nothing about that version, I want you to stop showing me that warning and not that.
The only settings that I have that call the firebase are this file
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-messaging.js');
firebase.initializeApp({
messagingSenderId: "xxxxxxxxxxx"
});
const messaging = firebase.messaging();
console.log('Handling background message')
messaging.setBackgroundMessageHandler(function(payload) {
console.log('Handling background message ', payload);
return self.registration.showNotification(payload.data.title, {
body: payload.data.body,
icon: payload.data.icon,
data: {
click: payload.data.click,
userId: payload.data.userId,
pushId: payload.data.pushId,
}
});
});
self.addEventListener('notificationclick', function(event) {
event.notification.close();
event.waitUntil(self.clients.openWindow(event.notification.data.click));
})
And this one, which is in the index.html
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-messaging.js"></script>
<script>
try {
window
.firebase
.initializeApp({
apiKey: "%REACT_APP_FIREBASE_ANALYTICS_API_KEY%",
authDomain: "%REACT_APP_FIREBASE_ANALYTICS_AUTH_DOMAIN%",
databaseURL: "%REACT_APP_FIREBASE_ANALYTICS_DATABASE_URL%",
projectId: "%REACT_APP_FIREBASE_ANALYTICS_PROJECT_ID%",
storageBucket: "%REACT_APP_FIREBASE_ANALYTICS_STORAGE_BUCKER%",
messagingSenderId: "%REACT_APP_FIREBASE_ANALYTICS_MESSAGING_SENDER_ID%",
appId: "%REACT_APP_FIREBASE_ANALYTICS_APP_ID%",
measurementId: "%REACT_APP_FIREBASE_ANALYTICS_MEASUREMENT_ID%"
})
} catch (e) {
console.error(e)
}
</script>
I'm not completely sure of how you are loading your files, but if they are independent of each other, both
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
and
importScripts('https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js');
are fetching firebase. You should only keep one if both files are being used.
So I have this code written out:
var temp_photo = storageRef.child('user_photos/'+snap.key+'/')
var y = r.insertCell(17).innerHTML = snap.val().photo_url;
temp_photo.getDownloadURL().then(downloadURL => {
console.log(downloadURL);
//var y = r.insertCell(17).innerHTML = '<img src="'+downloadURL+'" width="50" height="50" />';
})
works fine, it shows the image url in firebase:
user_photos/07KMSXj5QBYHj55555558bSLIkK2/D41FB90B-1111-5555-2222-22F86D69883F.jpg
this is the correct path to the image, the problem is, im not trying to display the url, i want to display the actual image, any help with this?
my configs are set up correct like this:
var firebaseConfig = {
apiKey: "55555",
authDomain: "MY-APP.firebaseapp.com",
databaseURL: "https://MY-APP.firebaseio.com",
projectId: "MYAPP",
storageBucket: "APP.appspot.com",
messagingSenderId: "44444",
appId: "1:5555555:web:5555555"
};
firebase.initializeApp(firebaseConfig);
And my firebase security set up like this:
I think it has something to do with permission, these are mine set now:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read
allow write//: if request.auth != null;
}
}
}
I console.log the downloadURL and get the following printed
It looks like its throwing a 404 error
[Error] Failed to load resource: the server responded with a status of 404 () (user_photos/07KMSXj5QBYHj55555558bSLIkK2, line 0)
looks like its failing to get user_photos/07KMSXj5QBYHj55555558bSLIkK2
but it should be getting a full url (the image in the folder):
user_photos/07KMSXj5QBYHj55555558bSLIkK2/D41FB90B-1111-5555-2222-22F86D69883F.jpg
Here is also an image of what gets logged:
I think I need to authenticate the user before It can get the downloadURL
I have something like this:
firebase.initializeApp(firebaseConfig);
var email="my#gmail.com";
var password="mypassword";
//Sign In User with Email and Password
firebase.auth().signInWithEmailAndPassword(email, password)
with the following set up:
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.3/firebase-auth.js"></script>
getting an error that auth() is not a function?
I am trying to upload an image on firebase cloud storage with web javascript. I am getting "firebase.firestore () is not a function" on my console. Am I going any wrong way?
I have done insert and fetch data on firebase database. But I have to stop for upload image on firebase cloud storage.
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.0/firebase-firestore.js"></script>
var firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
databaseURL: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX"
};
// Initialize Firebase
var defaultProject = firebase.initializeApp (firebaseConfig);
// Get a reference to the database service
var fileName = selectedFile.name;
var storageRef = firebase.firestore ().ref ('image' + fileName).put (selectedFile);
updating node on the computer seemed to have fixed the issue. I updated it to v16.15.1
change
firebase.firestore ().ref ('image' + fileName).put (selectedFile);
to
firebase.storage().ref('image' + fileName).put (selectedFile);
I'm trying to save a documents through react web app, but facing the following issue. I have read the firebase rules documentation.
Here is the code
constructor(props)
{
super(props);
var config = {
apiKey: "<apiKey>",
authDomain: "<authDomain>",
databaseURL: "<databaseURL>",
projectId: "<projectId>",
storageBucket: "",
messagingSenderId: "<messagingSenderId>"
};
firebase.initializeApp(config);
}
and we are triggering button click
onKeyUp(e)
{
if(e.keyCode===13 && trim(e.target.value) !== '')
{
e.preventDefault();
let dbCon=this.props.db.database().ref('/messages');
dbCon.push(
{
message:trim(e.target.value)
}
);
);
}
}
Database rules:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write:if true;
}
}
}
we are facing this issue. What am I doing wrong?
Stack Trace:
Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
at index.cjs.js:13076
at exceptionGuard (index.cjs.js:690)
at Repo../node_modules/#firebase/database/dist/index.cjs.js.Repo.callOnCompleteCallback (index.cjs.js:13067)
at index.cjs.js:12844
at index.cjs.js:12019
at PersistentConnection../node_modules/#firebase/database/dist/index.cjs.js.PersistentConnection.onDataMessage_ (index.cjs.js:12052)
at Connection../node_modules/#firebase/database/dist/index.cjs.js.Connection.onDataMessage_ (index.cjs.js:11337)
at Connection../node_modules/#firebase/database/dist/index.cjs.js.Connection.onPrimaryMessageReceived_ (index.cjs.js:11331)
at WebSocketConnection.onMessage (index.cjs.js:11232)
at WebSocketConnection../node_modules/#firebase/database/dist/index.cjs.js.WebSocketConnection.appendFrame_ (index.cjs.js:10837)
at WebSocketConnection../node_modules/#firebase/database/dist/index.cjs.js.WebSocketConnection.handleIncomingFrame (index.cjs.js:10887)
at WebSocket.mySock.onmessage (index.cjs.js:10784)
Newbie mistake, was using the newer firestore database instead of using the Realtime database. Changing to the Realtime database fixed the issue.