Firebase newbie

[Gummibeer]

Hey all,

has anyone of you already played with firebase? Or even created a production app with it?

I've started to play with it and Vue.js yesterday. And I'm in love! 🤩
I was able to create a whole login/registration with a few lines of frontend JS supporting oAuth & email/password. For sure plus my HTML. 😉
I've registered like 20 times because I couldn't believe it. It even provides a full user management dashboard.

And the best? The auth is the base for access rules to other services like access rules for firestore to prevent document access on server side.

The auth system even allows anonymous registration so the user can test the app without providing anything.

The next I will add will be the real app logic. In my case it will only be one model plus file attachments. So super easy - but exactly that was the reason why I didn't wanted to spin up and maintain a server myself.
Because let's be honest - this would take at least one day only to configure the server, deployment tool and so on.
Not starting how long the auth part takes, even with Laravel which comes with awesome tools like socialite and so on.

For me it was also the first time with Vue/cli, Vue.js itself and a SPA at all.
So I'm definitely not the fastest one! I think a good Vue dev experienced with router, vuex, vuelidator and so on would finish my app in ~1 day by using firebase.

----

If anyone has experience with firebase: do you have some learnings to keep costs low/zero?
Right now I'm on the Spark plan - so if I understood it right they will simply stop answering my requests if my limit is reached.
Because firestore is priced by download traffic I've already read that a local caching layer is pretty important and you shouldn't use the SDK sync if you aren't really sure that you need it and it's worth it.
Some more learnings?

 

[Gummibeer]

Today I've finished the auth part including password reset and also finalized the route protection logic.

After this I've started with the firestore and have to agree some blog posts - without caching it will get expensive pretty fast.
So after I've finished my proof of concept, store is also this easy as auth is, I will start to read about Vue store/localstorage and other caching strategies in the browser and implement one.

Right now I'm still amazed how easy it is and how fast I get features done! And the major benefit: I nearly only focus on features instead of backend overhead like setting up a mail service, configure a queue and so on.

 

[Gummibeer]

So, after not even a week I've finished the MVP of my app.
Including firebase authentication, firestore and storage with firebase extension to generate resized images.

During this time I've managed to learn basics of Vue.js and firebase.
I've build my own tag-input using some vue and tailwind.

I'm pretty happy with the result and even if it could be that I were able to create the app with Laravel in the same time - or even less, I would had to care about much more overhead I don't want to manage.

I even plan to implement firebase authentication and storage into one of my larger apps. Because it takes away my major pain points.
I mean how easy can a file-upload be if you only have to call a single JS function in frontend and the file will end in the blob storage. 🎉🚀🤩

 

[robcsaszar]

I forgot to reply but I delved into Firebase to manage file uploads for my recipe website and it was a breeze.
I'm nowhere near your skill level but I have to say that I enjoy the ease-of use of it.

What did you like about the Firebase authentication that makes you consider it for your larger application (side question: what kind of authentication do you have there?)?

 

[Gummibeer]

I forgot to reply but I delved into Firebase to manage file uploads for my recipe website and it was a breeze.
I'm nowhere near your skill level but I have to say that I enjoy the ease-of use of it.

What did you like about the Firebase authentication that makes you consider it for your larger application (side question: what kind of authentication do you have there?)?

The file uploads are the easiest I've ever used regarding files! And that it's a regular GCP blob storage which I also can use with my Laravel application and so on is just amazing.
If you use it for the recipes - have you also installed the resize image extension? It's perfect to upload whatever you like and get automatic sized images.

The authentication is just super easy to setup - even if Laravel Socialite is also great, but firebase is easier. And it's the requirement for firebase/serverside authorization.

These are the providers offered by firebase.

 

[robcsaszar]

Niiice, that's a really nice spread of providers!

 

[TGDesigns]

This might be a silly question but is firebase free? I cant say ive ever heard of it!

 

[Gummibeer]

This might be a silly question but is firebase free? I cant say ive ever heard of it!

Yes, they have a free/spark and pay as you go/blaze plan.

Firebase

Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.

firebase.google.com

The best is that, if you choose the spark plan, you really will never pay anything. So even if someone DDoS your app, it will simply stop to work. So perfect for dev-systems or your own/internal apps.

Only if you exceed the very generous free limits or want to integrate it with the general GCP you have to switch to a paid blaze plan.

I really can recommend it if you just want to create your simple app without caring about infrastructure, auth and all this overhead. For sure you can also create larger apps with it. But how often have I rejected a simple/easy/fast idea only because I would need 1 week for general setup and 1 day for the app itself.

 

[Gummibeer]

Some examples - why I like it so much. No guarantee that these code snippets are good or there isn't a better way. I've learned Vue/firebase and related JS last week during my project only by following the firebase docs. 😂

That's everything I need to register a new user and send him a verification email. Could definitely get prettier by using async/await instead of all these promises.

firebase
    .auth()
    .createUserWithEmailAndPassword(this.email, this.password)
    .then(data => {
        data.user
            .updateProfile({
                displayName: this.name,
            })
            .then(() => {
                data.user
                    .sendEmailVerification()
                    .then(() => this.$router.push({ name: 'dashboard' }))
                    .catch(console.error);
            })
            .catch(console.error);
    })
    .catch(err => {
        this.error = err.message;
    });

Simpler? Okay, login:

firebase
    .auth()
    .signInWithEmailAndPassword(this.email, this.password)
    .then(() => {
        this.$router.push({ name: 'dashboard' });
    })
    .catch(err => {
        this.error = err.message;
    });

One of the things most times simply dropped at start because it's a super long multi-step procedure - password reset. That's really everything, no form, no email, everything done by firebase.

firebase
    .auth()
    .sendPasswordResetEmail(this.email)
    .then(() => {
        this.$router.push({ name: 'login' });
    })
    .catch(err => {
        this.error = err.message;
    });

But the really best, that convinced me - file upload with progress-bar:

fileRef.put(blob).on(
    'state_changed',
    snapshot => {
        return this.$set(
            this.uploads,
            uuid,
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
    },
    console.error,
    () => {
        this.$delete(this.uploads, uuid);
        this.images.push(filepath);

        this.$root.store.locations.update(this.location.id, {
            images: firebase.firestore.FieldValue.arrayUnion(filepath),
        });
    }
);

No server to accept thee file, put it into DB as reference and store it in any file system. In theory the upload would work with this simple one-liner:

firebase.storage().ref('directory/path/file.ext').put(blob).then(console.log).catch(console.error);

Have you ever uploaded a file easier from browser into a blob storage? I haven't. :D

 

[adam]

Those code samples are awesome! Really demonstrates how intuitive it is. My first time seeing it in action so thank you for that.