How to use javascript for sending remote notifications with Firebase? - javascript

Here is an issue I am having with Firebase and push notifications.
In a web app, I want a button which sends a remote notification when clicked. This notification is meant to be received by an iOS app working together with my web-app.
The present question is about how to make this work. The web offers some example of how to receive notifications in a web application, but I did not find much about sending one, and this is precisely what I need to do.
Below is the relevant code, the problem is to know how to write the code for the SendNotific() function, and maybe some other details. I hope someone, expert on the subject will be able to provide me with some advice.
<body>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
db = firebase.firestore(app);
const messaging = firebase.messaging();
function SendNotific() {
// Code to send a notification.
........
}
</script>
<input type='button' id='PushNotif' style='font-size:20px' value='Send notification!' onClick='SendNotific()'>
</body>

You cannot send notifications using client, for sending notifications firebase has an Admin SDK which should be used by the application server. Though if you are up to building a serverless app then you should consider Firebase Cloud functions which you can trigger using a HTTP endpoint and the cloud function can handle the notifications sending job.

Related

Firebase Auth State Persistence ELECTRON loadFILE vs loadURL

I have a functioning electron app and I'd like to load a url from another site (created by me for the app). The trouble I'm having is persisting the login when I loadURL from the main process in Electron.
I am successfully maintaining auth state status between various local html files within electron (using separate JS files) so I am assuming the issue is related to loadURL vs loadFILE on a new html file. Currently I'm testing using a localhost port for the other URL (the one not reading Auth State).
I use the following code to detect the state change:
let extConfig = {
apiKey: "myKEY",
authDomain: "fcf-appdestination.com",
databaseURL: "https://fcf-appdestination.com",
projectId: "fcf-app",
storageBucket: "fcf-app-bucket",
appId: "1:APPID",
}
const fbApp = firebase.initializeApp(extConfig);
firebase.auth().onAuthStateChanged((user) => {
if(user){
currentUser = user.uid
}
})
What's frustrating is when I navigate to the prior working page (via a button triggering a loadFile event in the main process in Electron) the auth state persists and the user is logged in.
Am I not able to persist the firebase auth state in the way I'd like?
Thank you,
I found the answer here:
Is there any way to keep a person authenticated with firebase across subdomains
You need to use a server function to create a custom token as an admin and send the token to the subdomain to use for login.

How can I configure my firebase config to access the firebase emulator functions endpoint?

Prerequisites:
Firebase SDK: ^7.21.1
I'd like to connect my Vue.js Frontend with my local firebase functions emulator. The emulator is located at localhost:5001. I have a hard time figuring out what configuration properties I have to set to access the emulator endpoint.
Here is my current configuration:
const firebaseConfig = {
apiKey: "AIzaSyCKvB9ZluNGOP4s4r8igflwuK-9WVsoThg",
authDomain: "company-29f5c.firebaseapp.com",
databaseURL: "https://company-29f5c.firebaseio.com",
projectId: "company-bar",
storageBucket: "company-29f5c.appspot.com",
messagingSenderId: "1051704079600",
appId: "1:1051704079600:web:f99d362c43b87346",
notificationWebhookUrl: "http://localhost:5001/company-dev/us-central1/notificationsMixpanelWebhook",
cloudFunctionBaseUrl: "http://localhost:5001/company-dev/us-central1",
};
I started changing the cloudFunctionBaseUrl since it kind of was obvious for me to use this property to change the functions endpoint url. As you can see I set it to localhost:5001/.... However the url being used in my app still was calling this url:
https://us-central1-company-bar.cloudfunctions.net
I figured out that the url is being composed by the projectId property of the configuration. The cloudFunctionBaseUrl therefore is not overwriting it at all.
How can I now change the composed url
https://us-central1-company-bar.cloudfunctions.net
to
http://localhost:5001/company-dev/us-central1
I expect that there is some kind of configuration flag like enableEmulator or something like that but could not find any hint in the docs for that.
You're correct in thinking there's a function, its called useEmulator. You have to call it for each part of firebase you want to emulate as far as I'm aware.
If you want to make functions use the emulator you can do something like the following:
firebase.functions().useEmulator('localhost', 5001);
After the firebase.initializeApp call.
More information can be found on the official docs: https://firebase.google.com/docs/emulator-suite/connect_functions#

Why does my Firebase project work without specifying the apiKey?

I have set up a Firebase project that uses the Firestore database. i was given the following snippet to use it in my Javascript code:
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxx.firebaseapp.com",
databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
projectId: "xxxxxxxx",
storageBucket: "xxxxxxxxx.appspot.com",
messagingSenderId: "xxxxxxxxx",
appId: "1:xxxxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
All was working to that point. I then needed to ensure that only my domain could use the app, by setting up authorized domains on the firebase project, as well as on the apiKey in the "credentials" menu from the Google Cloud Platform project.
My project still worked to this point, but I noticed that it still worked from any domain. So the restriction was not working. Actually, with more testing, I found out that the apiKey was not even necessary for my project to work, and I can reduce the snipet to the following and things still work:
// Your web app's Firebase configuration
var firebaseConfig = {
projectId: "xxxxxxxx",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
So I am wondering: how can my project run and write in the Firestore database with only the projectId given? I am given a bunch of information in the snippet that is not even necessary.
Does anyone have an idea why this is happening to me? I tried to create a new project, following different tutorials again, with the same result. Actually, one of the tutorials I used has the same behaviour, as i can use this tutorial's project (it is actually online), just by specifying the projectId and I could make it's Firestoere quota run out by spamming it from my local server.
I can't find any information about a similar case to mine. Please help.
PS: here are my Firestore database rules, if it matters:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
Every Firebase project is actually a Google Cloud project, and each cloud project has a unique ID. Since there can only be one Firestore instance per project, it's sufficient to use just the project ID to locate it.
Other values from the config file are used for other Firebase products. If you don't use those products, then you don't need them. Feel free to leave them out if that suits you. Bear in mind that you might run into problems in the future if you don't use the full configuration.
If you are concerned about the security of your Firestore instance, you should be using security rules to limit who can read and write what data. It's not possible to limit access to it based on the domain of your web app, or the location of the user. The rules you have right now allow anyone with an internet connection to create, modify, and delete any document in your Firestore instance. You might want to change that.

Does the firebase initialisation code for javascript projects need to be run on each web page?

I'm using Google login with fireauth.
So in the login page i've got the following setup code in script tags:
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
But then on subsequent pages I want access to firebase so i can check auth, use storage, etc.
To access firebase on subsequent pages do I need to run the above code again? Or is it best to put the iniitialisation code in an external javascript file so that i have access across all webpages?
Thanks.
Many Firebase web apps are so-called single-page applications, which means that they're just one big HTML + JavaScript page. So they only need this block once in that page.
But if your web app depends on multiple separate HTML + JavaScript pages, you indeed will need this block on each page that uses Firebase. If you're using modern JavaScript you can isolate this block into a module that you include into the others. Or you can get it from __/firebase/init.js, which is automatically available if you're hosting the web site on Firebase. For more on this, see this blog post, and this documentation

deleting data from firebase console just like in mongoose

I used mongoose database before. After the testing process and all we can delete the data from the mongoose website manually. Even the collection.
Now I am using firebase as my database and my question is that is there any functionality like removing authenticated user data manually from the database just like we do in mongoose. Or do we need to code to remove a particular user data from firebase?
I have a firebase.js
import * as firebase from 'firebase';
const config = {
apiKey: "someKey",
authDomain: "some domain",
databaseURL: "someURL",
projectId: "someID",
storageBucket: "someBucket",
messagingSenderId: "SomeId"
};
const firebaseApp = firebase.initializeApp(config);
export default firebaseApp;
and an index.js file:
import firebaseApp from './firebase';
firebaseApp.auth().onAuthStateChanged(user => {
if (user) {
console.log(user);
} else {
console.log('user needs to be signed in');
}
})
On submission I am seeing user in the web console
Is there any way to visualize the authenticated user in the firebase console, so that I can delete it from the firebase web console?
in mongodb there will be a collection for the authentication purposes. That contain,say the username and password. Which is a collection of its own. And other collections based on other datas. What I am asking is that the user data authenticated by the above process, needs to be stored somewhere right in the firebase. Is there any way to get that user data and delete it?
The Firebase Console is your backend entry-point to your app's data, features and services.
The Database section of the console enables you to freely add & remove data in the Realtime Database and Cloud Firestore:
Realtime Database
Cloud Firestore
There is a separate section for Authentication in the Firebase Console. When a user registers for your app, their profile data is passed to Firebase from the authentication provider (Google, Facebook, etc), but only the identifier (username, email, phone number), created date, signed in date and unique ID are displayed in the Firebase Console:
You can manually delete user accounts from the Firebase Console without having to write code to do so. Deleting an account will delete the associated authentication data and will stop the user from logging into your app.
To manually delete a user account:
Login to Firebase Console from a desktop browser
Select Authentication from the left menu
Hover over a user account in the list
Click the 3-dot icon on the right of the user row
Click "delete account" from the context menu

Categories