Firebase auth in webapp without the SDK - firebase

Im trying to implement authentication on my SPA, and it works fine.
The way im doing it is like in the docs:
import firebase from 'firebase/app';
import 'firebase/auth';
const config = {
// ...
};
const firebaseApp = firebase.initializeApp(config);
// and somewhere else in the code(with all the arguments and stuff)
firebase.auth().createUserWithEmailAndPassword();
firebase.auth().signInWithEmailAndPassword();
Now, my problem is that these imports add too much to the app. I honestly don't think that 180KB(minified, but not compressed) is acceptable for an SPA that aims to work on mobile.
Just for comparison, my whole app, Vuejs + Router + Vuex + other 3~ small libraries and the app logic weight 170KB(minified but not compressed).
So I wanted to know if there is another solution, or if im doing it wrong, or if there is an easy workaround. Ideally, I would be able to just make an HTTP request and get back a JWP.

Well, I contacted firebase to add this as a feature request, and they suggested me to use for now the REST API for auth. It requires a custom token, but it is a good solution.
The documentation for the REST API:
https://firebase.google.com/docs/reference/rest/auth/

As far as I know, the actual endpoints you hit for Firebase auth isn't publicly documented nor have I seen them around the Web. With that said, if you are set on reducing your bundle size, your best bet is to pick apart the SDK and figure out how and what you need to construct.
signInWithEmailAndPassword is defined here and as you can see, it just calls out to another private function and so on.

Related

Firebase - Firestore - create a function to verify if a user exists in Auth

I want to verify if a user exists in the Authentication list of users in firebase. I know I can use:
admin.auth().getUserByEmail(email)
admin.auth().getUser(uid)
I am building a react native app, so I can't install firebase-admin since it would require I ship credentials in the app, which is too dangerous, since someone can do reverse engineering and find them.
I have found I can write functions, so I have created a separate project to create and deploy functions, this will work as a backend.
Now I want to create a function there that uses firebase-admin and to be able to use the 2 methods listed above.
I found I can create:
exports.addMessage = functions.https.onCall((data, context) => {
// ...
});
and call it like:
var addMessage = firebase.functions().httpsCallable('addMessage');
addMessage({text: messageText}).then(function(result) {
// Read result of the Cloud Function.
});
Not sure if using https.onCall is the best for this case or is there a better way.
Thanks in advance.
As far as the documentation indicates - accessible here - and the fact that the https.onCall() uses a safe method to be called (HTTPS) I believe that this is the best option for your case, since installing firebase-admin doesn't fit your case.
The official documentation Protocol specification for https.onCall also says:
If you are able to use the Android, iOS, or web SDKs, you're recommended to do that instead of directly implementing this protocol. The SDKs provide features to save coding time and effort, as detailed in Call Functions from Your App
So, this is indicated, in case you don't want/can use the SDK, which I believe it's what you are saying. Considering that, I believe that the https.onCall() it's the option for your situation.
Let me know if the information helped you!

Can't get rid of message When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use

I'm trying to use Firebase in my web project, and I can't understand how it works. I do:
import app from "firebase/app"; //1
import firebase from 'firebase'; //2
console.log(app === firebase); //3
it outputs true.
If I use 2 string my code to get data from firebase works and I get message about not using proper SDK in production
If I use 1 string I get an error from:
app.initializeApp(firebaseConfig);
const db = app.firestore();
Uncaught TypeError:
firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.firestore is not a
function
Please help me to sort out how to fix this.
I've got it, webpack is in charge. It wraps imported modules, that's why they are equal. Though, don't know how to optimize my module loads using webpack and firebase simultaneously.

Troubles with my Firebase-integration inside my Vue.js App

Currently I'm trying to implement firebase into my Vue.js App. I set up Vue.js using the Vue CLI, installed firebase as well as vuefire and bootstrap-vue, now I tried to get some data I inserted into my db manually but somehow I don't get any data from firebase. I'm quite new to Vue.js so this might be a beginners error but I don't really know what to do right now.
I don't know if it matters but I plan on using vuex later on, so I installed that as well, I've followed a tutorial on how to set up Vue.js, in there she is using a local js file as a database, I got it all set up but now I want to use Firebase as my database.
I think it would be a bit to much if I post every file thats relevant for this in here so I created a GitHub Repository with all the files, but here is the part where I think the problem might be:
<b-table striped hover :items="clients"></b-table>
{{ clients }}
import { db } from '#/environment/firebase'
export default {
data () {
return {
clients: [],
systems: []
}
},
firestore: {
clients: db.collection('clients'),
systems: db.collection('systems')
}
}
somehow Vue.js doesn't pull the data correctly. I thought this might have something to do with an authentication error from firebase but my console doesn't show any errors neither does my console where I'm running the npm run serve and at this point I don't really know what to do anymore.
It's also possibly that my error is in my inegrationfile of firebase since I just copied the one from the Get started page from vuefire:
import firebase from 'firebase'
import firebaseConfig from './firebaseConfig'
// Get a Firestore instance
export const db = firebase.initializeApp(firebaseConfig).firestore()
// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { TimeStamp, GeoPoint } = firebase.firestore
export { TimeStamp, GeoPoint }
But, as I said, I don't really know what my error is here since from my understanding everything should work up to this point..
In your main.js you included twice:
import './plugins/bootstrap-vue'
without including the vuefire.js plugin file.

How to generate DownloadUrl from Google-Cloud storage (I came from firebase)

Just trying to figure out something that seemed trivial in firebase, in google-cloud.
It seems as though if you're making a node.js app for HTML (i'm talking to it through Unity actually, but it's a desktop application) you can't use firebase-storage for some odd reason, you have to use google-cloud, even the firebase-admin tools use the cloud storage to do storage from here.
Nevertheless, i got it working, i am uploading the files to the firebase storage; however, the problem is in firebase, you could specify a specific file, and then do storage().ref().child(filelocation).GetDownloadURL(): this would generate a unique url for some set time that can be used publicly, without having to give out access to read to all anonymous users.
I did some research and i need to implement something called GS UTIL in order to generate my own special urls, but it's so damn complicated (im a newbie to this whole server stuff), i don't even know where to start to get this working in my node server.
Any pointers? I'm really stuck here.
-------if anyones interested, this is what im trying to do high level-----
I'm sending 3d model data to node app from Unity
the node app is publishing this model on sketchfab
then it puts the model data onto my own storage, along with some additional data specially made for my app
after it gets signed to storage, it gets saved to my Firebase DB in my global model database
to be accessed later, by users, to try to get the downloadURL of this storage file and send them all back to Unity users(s)
I would just download the files into my node app, but i wanna reduce any server load, it's supposed to be just a middleman between Unity and Firebase
(i would've done it straight from Unity, but apparently firebase isn't for desktop windows apps).
Figured it out:
var firebase_admin = require("firebase-admin");
var storage = firebase_admin.storage();
var bucket = storage.bucket();
bucket.file(childSnapshot.val().modelLink).getSignedUrl({
action: 'read',
expires: expDate
},function(err,url){
if(err){
reject(err);
}
else{
finalData.ModelDownloadLink = url;
console.log("Download model DL url: " + url);
resolve();
}
});

Can Firebase RemoteConfig be accessed from cloud functions

I'm using Firebase as a simple game-server and have some settings that are relevant for both client and backend and would like to keep them in RemoteConfig for consistency, but not sure if I can access it from my cloud functions in a simple way (I don't consider going through the REST interface a "simple" way)
As far as I can tell there is no mention of it in the docs, so I guess it's not possible, but does anyone know for sure?
firebaser here
There is a public REST API that allows you to read and set Firebase Remote Config conditions. This API requires that you have full administrative access to the Firebase project, so must only be used on a trusted environment (such as your development machine, a server you control or Cloud Functions).
There is no public API to get Firebase Remote Config settings from a client environment at the moment. Sorry I don't have better news.
This is probably only included in newer versions of firebase (8th or 9th and above if I'm not mistaken).
// We first need to import remoteConfig function.
import { remoteConfig } from firebase-admin
// Then in your cloud function we use it to fetch our remote config values.
const remoteConfigTemplate = await remoteConfig().getTemplate().catch(e => {
// Your error handling if fetching fails...
}
// Next it is just matter of extracting the values, which is kinda convoluted,
// let's say you want to extract `game_version` field from remote config:
const gameVersion = remoteConfigTemplate.parameters.game_version.defaultValue.value
So parameters are always followed by the name of the field that you defined in Firebase console's remote config, in this example game_version.
It's a mouthful (or typeful) but that's how you get it.
Also note that if value is stored as JSON string, you will need to parse it before usage, commonly: JSON.parse(gameVersion).
Similar process is outlined in Firebase docs.

Resources