Using firebase as plugin in Quasar 0.15

CristalT

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?

Max

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

create plugin
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

Max

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

CristalT

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

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

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

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

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.

waelio

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

xfinity26

No More Posting New Topics!

Using firebase as plugin in Quasar 0.15