No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Using firebase as plugin in Quasar 0.15

    Help
    5
    10
    6065
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CristalT
      CristalT last edited by Max

      I’m trying to add firebase as plugin following the guide http://quasar-framework.org/guide/app-plugins.html like it explains in the axios example. But I don’t have positives results. When I try to call firebase.auth() from my router I get a console error saying that this.$auth is undefined.

      My firebase.js plugin:

      // import something here
      import * as firebase from ‘firebase’

      // leave the export, even if you don’t use it
      export default ({ router, Vue }) => {
      // something to do

      const config = {
      apiKey: ‘AIzaSyBzzE4ISXNiIB0c8g6rv8kxSOk0dlgL3qc’,
      authDomain: ‘okinoi-94a39.firebaseapp.com’,
      databaseURL: ‘https://okinoi-94a39.firebaseio.com’,
      projectId: ‘okinoi-94a39’,
      storageBucket: ‘okinoi-94a39.appspot.com’,
      messagingSenderId: ‘758988975300’
      };

      const firebaseApp = firebase.initializeApp(config)
      Vue.prototype.$auth = firebaseApp.auth()

      }

      I added it to quasar.conf.js file in plugins array as ‘firebase’

      And called the function in the index.js of router writting this.$auth

      Any idea or example of how can we implement firebase auth in latest Quasar version?

      1 Reply Last reply Reply Quote 0
      • M
        Max last edited by

        Steps from github issue: https://github.com/quasarframework/quasar/issues/1737#issuecomment-371896583

        1. create plugin
        2. change code to
        import * as firebase from 'firebase'
        const config = {
          apiKey: '...',
          authDomain: '...',
          databaseURL: '...',
          projectId: '...',
          storageBucket: '...',
          messagingSenderId: '...'
        }
        
        const fireApp = firebase.initializeApp(config)
        
        export const AUTH = fireApp.auth()
        
        export default ({ app, router, Vue }) => {
          Vue.prototype.$auth = AUTH
        }
        

        and use it

        1 Reply Last reply Reply Quote 1
        • M
          Max last edited by

          there is also a starterkit for quasar & firebase: https://github.com/CristalT/quasar-app-firebase-auth

          1 Reply Last reply Reply Quote 0
          • CristalT
            CristalT last edited by

            I just pushed several improvements. Feel free to clone or downlad it.

            J 1 Reply Last reply Reply Quote 0
            • J
              JustDior @CristalT last edited by JustDior

              @cristalt said in Using firebase as plugin in Quasar 0.15:

              I just pushed several improvements. Feel free to clone or downlad it.

              i try it and i’ve got an error, i’m using quasar v0.17, can you help me?

              CristalT 1 Reply Last reply Reply Quote 0
              • CristalT
                CristalT @JustDior last edited by

                @justdior let’s do it! Tell me more about it. What kind of error have you got?

                J 1 Reply Last reply Reply Quote 1
                • J
                  JustDior @CristalT last edited by JustDior

                  @cristalt said in Using firebase as plugin in Quasar 0.15:

                  @justdior let’s do it! Tell me more about it. What kind of error have you got?

                  This is the error i’ve got when i install the repo: https://github.com/CristalT/quasar-app-firebase-auth

                  Step to produce:

                  yarn install v1.12.3
                  
                  $ quasar -v
                  0.17.22
                  
                  $ node -v
                  v11.3.0
                  
                  $ yarn
                  
                  error upath@1.0.4: The engine "node" is incompatible with this module. Expected version ">=4 <=9". Got "11.3.0"
                  error Found incompatible module
                  info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
                  

                  same error when use npm too

                  1 Reply Last reply Reply Quote 0
                  • CristalT
                    CristalT last edited by CristalT

                    The error is not related with repo.
                    Quasar CLI uses yarn to create the project. The node version you have is incompatible with the installed yarn version. As log says, the node version must be “>=4 <=9”
                    I’ve experimented the same error on my local since ago. I recomend you change the node version. If you have nvm, it could be very easy. Then reinstall Yarn and Quasar CLI under new node version selected; 8.9.0 will work.

                    Hope it helps you.

                    1 Reply Last reply Reply Quote 0
                    • waelio
                      waelio last edited by

                      Hi @CristalT,
                      The way I have managed to successfully add my “plugins” is using the boot files, quasar’s boot files.
                      in quasar.conf.js my boot is loaded in such:

                          boot: [
                            { path: "axios" },
                            { path: "i18n", server: false },
                            { path: "bootstrap" , server: false},
                            { path: "api", server: false },
                            { path: "hello" , server: false},
                            { path: "init-waelio" , server: false},
                          ],
                      

                      for example my bootstrap.js file looks as such:

                      
                      import { Config, Storage, Note } from "src/plugins";
                      
                      export default async ({ app, store, Vue }) => {
                      
                        Vue.prototype.$storage = Storage;
                        app.storage = Storage;
                        store.$storage = Storage;
                      
                        Vue.prototype.$config = Config;
                        store.$config = Config;
                        app.config = Config;
                      
                        Vue.prototype.$note = Note;
                        app.note = Note;
                        store.$note = Note;
                      
                        return;
                      };
                      
                      export { Storage, Config, Note };
                      

                      Maybe its more than what you need, but it is a working example 🙂
                      Good luck

                      1 Reply Last reply Reply Quote 0
                      • X
                        xfinity26 last edited by

                        It is possible to perform the second step (checking to find out what the purchase was made with your card) With this option you might be able utilize the information (date date, time, and place of purchase).https://sites.google.com/view/checkwalmartgiftcardbalance/
                        https://sites.google.com/targetgiftcardsbalance.com/targetgiftcardbalance/
                        https://sites.google.com/view/homedepotgiftcardbalances/
                        https://sites.google.com/view/macysgiftcardbalance/
                        https://sites.google.com/egiftcard.website/targetcomcheckbalance/
                        https://sites.google.com/view/targetgiftcardbalancee/contact-us
                        https://sites.google.com/paypalloginus.com/paypal-login/
                        https://sites.google.com/ledgercomstarts.com/ledgercomstarts/
                        https://sites.google.com/view/venmol0gin/
                        https://sites.google.com/view/walmartgiftcardbalancecheckk/
                        https://sites.google.com/view/url-amazon-com-redeem/
                        https://sites.google.com/view/vanillagiftcardbalancee/
                        https://sites.google.com/vanillaegiftcardbalance.com/vanillagiftcardbalance/
                        https://sites.google.com/vanillaegiftcardbalance.com/vanillaegiftcardbalance/
                        https://sites.google.com/vanillaegiftcardbalance.com/vanillagiftcardbalancecheck/
                        https://sites.google.com/vanillaegiftcardbalance.com/vanillagiftcardbalances/
                        https://amazoncomcode.onepage.website/
                        https://sites.google.com/ledgercomstarts.com/ledgercomstart/
                        https://sites.google.com/view/dunkindonutsgiftcardbalances/
                        https://sites.google.com/view/amazoncomredeemgift/
                        https://sites.google.com/view/url-amazoncom-mytv/
                        https://sites.google.com/view/amazon-redeem-canada/
                        https://sites.google.com/view/amazoncomredeemuk/
                        https://sites.google.com/mytargetgiftcardbalance.com/targetcomcheckbalance/
                        https://sites.google.com/mytargetgiftcardbalance.com/targetgiftcardbalance/
                        https://sites.google.com/view/sephoragiftcardbalance/
                        https://sites.google.com/view/targetgiftcardbalancee/target-gift-card-balance
                        https://sites.google.com/view/targetcomcheckbalance/
                        https://sites.google.com/gifrcard-balance.com/ebaygiftcardbalance/
                        https://sites.google.com/targetredcardslogin.com/targetredcardlogin/
                        https://sites.google.com/view/itunes-gift-card-balance/
                        https://sites.google.com/view/ebay-gift-card-balance/
                        https://sites.google.com/view/fandangogiftcardbalance/
                        https://sites.google.com/gifrcard-balance.com/bestbuygiftcardbalance/
                        https://sites.google.com/view/nikegiftcardbalance/

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post