Firebase + Quasar Is About To Get WAY Easier

just wanted to do a quick video showing everybody what i'm up to i've currently been working on a firebase composables um package for vue and also moving that over to quasar ui so utilizing that package in queries ui let me just show you so let's say quasar create and we'll say quasar firebase play and basically my goal here was to make it as ridiculously simple as possible to get up and running with firebase and now that i've done that the next step that i want to do is then make it super easy to then start extending that and basically customizing it uh to your particular needs so all you'll have to do um once this is installed and i've installed the extension is basically copy in this config so my goal is to make it so you literally just copy this config and you're up and running but then you can start sort of opting out of things um as you start needing more advanced features with firebase so that's the goal here really simple by default but then you can just sort of take things out and customize them to your needs uh yeah as you um as you want to do things that are more advanced all right how's this going that's almost done it's done so let's cd into quasar dash firebase dash play and open that in code i'm going to throw this on my top screen cool now the next thing we want to do is add the extension now one thing that i need to fix let me just add the extension first quasar extension add and it is called firebase so we add quasars firebase extension and another thing that we actually have to add is um yarn add firebase and firebase dash composable so this is my package here that i've built which is basically the firebase composables that make it easier to deal with firebase in view projects so that's not just quasar specific that's view specific now i want to remove this step i'm currently running into some problems with peer dependencies so i'm going to put in the extra work to make sure that you don't actually have to do this extra step of installing those dependencies i'm hoping that i can make it so the extension installs them for you but i was kind of having some conflicts of versions and stuff like that so anyway that's my problem to solve hopefully we'll be able to skip this step but um while that's going if i go to config now notice we have this new config folder that it gives us and we get this firebase config and it gives you an idea of what that config looks like all you have to do is basically grab this from your firebase project and this is all going to be nicely documented and just paste it in there and that's it you've got everything you need to get up and running with firebase and i actually mean everything when i say that so check this out if we now say quasar dev now that that's all installed and crossed my fingers because i've been playing around with this quite a bit lately so hopefully everything's going to run smoothly and we'll give that a second to run now they're on the new um webpack this is yeah it's loading really fast now so um one problem is i haven't set up redirects properly from the home page but if we go to login now notice that it takes us to a login page we get that for free and this is going to be customizable and we also get a register page for free as well so let's say something at gmail.com as the email and i'm just going to put in a password there as well so now we register and there we go we are logged into our account however we probably want to log out button as well and luckily it's really easy to do and i've actually offered a component for that as well so we come down here i'm just and this is in the main layout so basically i'm trying to plug into this toolbar over here i'm going to say import i believe it's called firebase sign out button and that's coming from quasar ui firebase all right so basically this extension comes with a logout button that we can pluck out of there and let's just whack it into the components oh i think it's probably telling me we have to use it as well so now if we come up here let's just get rid of the version part there and we're going to change that to this firebase sign out button and this is actually a quasar button so we can add in stuff like round all i've done is basically wrapped it and added the click event we can say round we could say flat let's just do that to begin with give this a quick little refresh all right we're getting some weird uh error in the console there oh okay it looks like it is working i just had to give it an icon once again as i said this is a quasar button so i can just say log out as the icon and there we go we've got our logout button if i click on that and it works it logs me out now check this out if you actually lo if i log in again here there's one i added before i believe that's what it is so there we go let's sign in again there uh if i try and go to the login page it actually handles the redirects for me and brings me back to this page same with that register page and so the idea is i'm trying to do as much work as possible by default um but then like i mentioned before you would then be able to kind of um change things like if you don't want the automatic routing you can remove that or if you want to customize the automatic routing and say what are the pages that only auth users can view you can set that up and then you can say what are the pages that only the unauthorized people can view for example the register and the login page um and the idea is you'll be able to just jump into this firebase config and i don't know what that'll look like you'll be able to say for example auth routes and then maybe um on auth routes or something like that i haven't decided what i call that yet but there we go up and running with firebase super super quickly how cool is that now we've got this um amazing way to get up and running fast and the idea is obviously i had to do that yarn installing stuff as well but the idea is all you'll have to do is say quasar extension add and then firebase so you add the firebase extension and then you'll get this folder for free it'll create it for you and all you have to do is paste in your config and you're ready to go you've got a login page you've got a register page i've actually got social auth set up in this package as well so all i have to do now is figure out how to create like a nice looking component for social auth as well and yeah so that's where it's currently at and by the way if you want to look at the documentation for the firebase um what is it what did i call it firebase composables and go to firebase composables um this is the documentation i'm currently working on if you want to get an idea of all the stuff that will be available in the app extension we've even got stuff like keeping firestore data in sync and a lot of this code was um heavily inspired by vues um so a massive thank you to anthony phil and the guys over there but yeah things like looking at the oauth states um handling social providers as well i've made it really i've got done the documentation for this yet but made it really easy to be able to say log in with facebook log in with google login with whatever it's going to be stupid simple to set that up so there we go i hope you guys enjoyed this one that's what i've been working on it's a little bit messy at the moment and by the time you see this video maybe try and install things yourself things might have changed so just be aware of that but yeah i look forward to keeping on working on this and getting your feedback and by the way if you do want to do something like this and if you've always wondered like how do you set up firebase with quasar then feel free to just go check out the code for this i believe it's under um github.com ld bold that's my account and i've probably called it um quasar ui firebase i've probably called it let's try that yeah there we go so you can head on over there if you'd like to um and basically just have a look at the code have a look at what i've done here if you jump into ui and then we jump into source and then the components here you can have a look at all of my components oh it looks like i haven't committed the git code so i'll do that at the end of this video so anyway i'm waffling though now so there you go check it out have a play with it let me know what you like let me know some of the features that you might like me to add here and yeah i'll see you guys in a stupid in a what am i saying in a future stream sorry it is late at night all right bye for now

Channel: Luke Diebold

Views: 346

Keywords:

Id: 3P7ERhDLALM

Length: 8min 36sec (516 seconds)

Published: Sun Nov 07 2021