How to setup v1.3 - UedaTakeyuki/vue-faui-user-fe2 GitHub Wiki

Note: The module which you should import differs depending on whether you're using firebase from a CDN or npm or yarn. If you're using firebase CDN, the appropriate module is with CDN suffix. I will refer to this difference in the following steps so please pay attention to it, thank you!

1. Initialization

Initialize firebase and this package at the main.js on your Vue project.

1.1 fbinit

1.1.1 what is fbinit?

The fbinit module of this package initialize the firebase instance in accordance with the Firebase Config Object1 of your firebase project.

1.1.2 How the Firebase Config Object is read by fbinit?

The fbinit module read your Firebase Config Object from following VUE_APP_ prefixed environmental variables as follows:

VUE_APP_apiKey: apiKey
VUE_APP_authDomain: authDomain
VUE_APP_projectId: projectId
VUE_APP_storageBucket: storageBucket
VUE_APP_messagingSenderId: messagingSenderId
VUE_APP_appId: appId

1.1.3 How can I set these environment variables?

In a local environment, you can set these by vue's .env.loca file as follows:

VUE_APP_apiKey=AIzaSyDyI8iMCe8R3rb3TACrab1XwQ_cG1UnObE
VUE_APP_authDomain=vue-faui-user-fe.firebaseapp.com
VUE_APP_databaseURL=
VUE_APP_projectId=vue-faui-user-fe
VUE_APP_storageBucket=vue-faui-user-fe.appspot.com
VUE_APP_messagingSenderId=1006020446206
VUE_APP_appId=1:1006020446206:web:fb17014018c82777a622af

In a hosting environment, for example Netlify, you can set these by Build environment variables as follows:

1.1.4 I've already initialized firebase in myself, even still I should use fbinit in this package?

No, you shouldn't call this or you get firebase duplication initialization error.

1.1.5 How to use fbinit?

At your main.js in your Vue project, import appropriate module in accordance how does your firebase module is installed in your project.

If you're using firebase as installed with npm or yarn, import vue-faui-user-fe2/initialize as follow:

import fbinit from 'vue-faui-user-fe2/fbinit.js'

If you're using firebase from CDN, import CDN suffix version vue-faui-user-fe2/initialize as follow:

import fbinit from 'vue-faui-user-fe2/fbinitCDN'

Then, call it as follows:

fbinit.fbinit()

A typical implementation of main.js might be as follow:

/* eslint-disable no-console */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import fbinit from 'vue-faui-user-fe2/fbinitCDN'

Vue.config.productionTip = false

fbinit.fbinit()

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

1.2 accountinit

1.2.1 what is accountinit?

The accountinit module initialize Login account related gloval variables.

1.2.2 Which variables get available?

Following variables get available in your application

  • $isLogin: boolean, the initial value is false, get be true when user logged in by firebase auth, get be false when user logged out.
  • $isEmailVerified: boolean, the initial value is false, get be true when user logged in an account with the verified email address.
  • $displayName: string, the initial value is "", get be the firebase auth display name when user logged in.
  • $user_email: string, the initial value is "", get be the firebase auth user email address when user logged in.
  • $user_id: string, the initial value is "", get be the firebase auth user id when user logged in.

1.2.3 How can I use accountinit?

At your main.js in your Vue project, import initialize module from vue-faui-user-fe2/initialize as follow:

import initialize from 'vue-faui-user-fe2/initialize'

Then, call initialize.accountinit() and mix-in return value as computed as follows:

Vue.mixin({
  computed: initialize.accountinit()
})

A typical implementation of main.js might be as follow:

/* eslint-disable no-console */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import fbinit from 'vue-faui-user-fe2/fbinitCDN'
import initialize from 'vue-faui-user-fe2/initialize'

Vue.config.productionTip = false

fbinit.fbinit()

Vue.mixin({
  computed: initialize.accountinit()
})

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

2. Put <Login> component on your App.vue file

With <Login> component, following Sign Up / Sign In pop-up and Email verification request pop-up is appears when not login.

And global variables about login status mentioned above will be updated according to the login status automatically.

2.1 Inport Login component

At your App.vue file on your Vuetify project, import the Login component of this package. If you're using firebase as installed with npm or yarn, import vue-faui-user-fe2/account as follow:

import {Login as Login} from 'vue-faui-user-fe2/login'

If you're using firebase CDN, import CDN suffix version vue-faui-user-fe2/loginCDN as follow:

import {LoginCDN as Login} from 'vue-faui-user-fe2/loginCDN'

2.2 Add Login to export.default as components option

At your App.vue file on your Vuetify project, add Login as components as follow:

<script>
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account'    // If firebase is from npm or yarn
import {LoginCDN as Login} from 'vue-faui-user-fe2/loginCDN'                   // If firebase is from CDN
// import {Login as Login} from 'vue-faui-user-fe2/login'                      // If firebase is from npm or yarn

export default {
  components: { Login },

/*
  created(){
    AccountRoutesCDN.init()
  }
*/
};
</script>

2.3 Put <Login> component on your Application template.

At your App.vue file on your Vuetify project, put <Login> on the top of <v-main> tag as folow:

<template>
  <v-app>
    <Navbar titleStr="Demo App" :links="links">
    </Navbar>
    <Login ref="login"/>
    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

sample APP.vue with package internal Login component

<template>
  <v-app>
    <Login/>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import {AccountRoutes, Login} from 'vue-faui-user-fe'
//import Login from '@/components/Login'
export default {
  name: 'App',
  components: {Login},
/*
  created(){
    AccountRoutes.init()
  }
*/
};
</script>

In Case your Login component is copied as mentioned in section 2.2, your Login component should be imported from your copied path (ex: /src/components) as follow:

sample APP.vue with package internal Login component

<template>
  <v-app>
    <Login/>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import {AccountRoutes/*, Login*/} from 'vue-faui-user-fe'
import Login from '@/components/Login'
export default {
  name: 'App',
  components: {Login},
/*
  created(){
    AccountRoutes.init()
  }
*/
};
</script>

After initialize.accountinit() mixined on the file main.js, the following variables get available in the component.

  • $isLogin: boolean, the initial value is false, get be true when user logged in by firebase auth, get be false when user logged out.
  • $isEmailVerified: boolean, the initial value is false, get be true when user logged in an account with the verified email address.
  • $displayName: string, the initial value is "", get be the firebase auth display name when user logged in.
  • $user_email: string, the initial value is "", get be the firebase auth user email address when user logged in.
  • $user_id: string, the initial value is "", get be the firebase auth user id when user logged in.

You can refer to these in your application through vue's refs special attribute, for example, in case you referred Login component as login as following,

<Login ref="login"/>

You can refer $isLogin in your application <script> as follows:

this.$refs.login.$isLogin

Note, as mentioned in refs special attribute, $refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.

Refer to a real implementation on a sample project.

3. In case you're using vue-router, expand AccountRoutes.routes into your routes array on your router.js file.

With AccountRoutes.routes, useful account management pages will be available on your SPA app with vue-router.

3.1 import AccountRoutes

At your router.js file on your Vuetify project, import the AccountRoutes component of this package. If you're using firebase as installed with npm or yarn, import vue-faui-user-fe2/account as follow:

import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account'

If you're using firebase CDN, import CDN suffix version vue-faui-user-fe2/accountCDN as follow:

import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN'

3.2 Expand AccountRoutes.routes on the routes: array.

Expand AccountRoutes.routes on the routes: array as follow:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

// import AccountRoutes
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account'    // If firebase is from npm or yarn

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },

      // Expand into routes array
    ...AccountRoutes.routes,
  ]
})

3.3 routes availables

By this step, the following routes related to account management get available.

  • path: '/account', name: 'account', The view for front menu of account
  • path: '/changeemail',name: 'changeemail',
  • path: '/changename',name: 'changename',
  • path: '/newpassword',name: 'newpassword',
  • path: '/signout',name: 'signout',
  • path: '/deleteaccount',name: 'deleteaccount',
Refer to a real implementation on a [sample project](https://github.com/UedaTakeyuki/vue-faui-user-fe-sample/blob/main/src/router.js).

4. Additional steps required for using CDN

When using npm components like firebase, vue, vuetify from CDN, following steps are additionally required.

4.1 Add <script> to download components in public/index.html

For using CDN, you should add <script> tags of these components on public/index.html file as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pinyon+Script">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Parisienne">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
    <!--vuetify-->
    <!--<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"> -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Note that for now, you should use firebase version 8.x instead of the latest 9.x because I can't find the correct way to use firebase 9.x by CDN. If you know the way, I would appreciate it if you could let me know it as issue report, thx!

4.2 Add externals of these components in vue.config.js

You should prepare a configuration that those components are not to be included in the bundle. The configuration is config.externals object on the vue.config.js file as follows:

module.exports = {
  transpileDependencies: [
    'vuetify'
  ],
  chainWebpack: (config) => {
    // https://qiita.com/uturned0/items/5fdf2d92548274fe56e3
    // https://rinoguchi.net/2020/05/vue-firebase-reduce-bundle-size.html
    // https://stackoverflow.com/questions/66179210/how-to-externalize-a-lib-with-vue-cli
      config.externals({
//        firebase: 'firebase',
        'firebase/auth': 'firebase',
        firebaseui: 'firebaseui',
        vue: 'Vue',
        vuetify: 'Vuetify',
        'vuetify/lib': 'Vuetify',
      })
  }
}

Without the configuration mentioned above, you will get following error:

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 3 errors                                                19:10:02

This dependency was not found:

* firebase in ./node_modules/vue-faui-user-fe2/fbinitCDN.js, ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-faui-user-fe2/src/components.cdn/Login.vue?vue&type=script&lang=js& and 1 other

To install it, you can run: npm install --save firebase

Contrary to the error message above, instead of installing the firebase, you need to set the configuration of excluding the firebase from the bundle mentioned above.

5. In case you are using vuetify-nav add Account menu into Navigation.

The account settings menu provided by vue-faui-user-fe2 can be merged into vuetify-nav by just adding AccountRoutes.menuItem into links data on your App.vue file as follow:

sample App.vue

<template>
  <v-app>
    <Navbar titleStr="Demo App" :links="links">
    </Navbar>
    <Login/>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
import {AccountRoutesCDN as AccountRoutes} from 'vue-faui-user-fe2/accountCDN' // If firebase is from CDN
// import {AccountRoutes as AccountRoutes} from 'vue-faui-user-fe2/account'    // If firebase is from npm or yarn
import {LoginCDN as Login} from 'vue-faui-user-fe2/loginCDN'                   // If firebase is from CDN
// import {Login as Login} from 'vue-faui-user-fe2/login'                      // If firebase is from npm or yarn

import {Navbar} from 'vuetify-nav'

export default {
  name: 'App',
  components: { Navbar, Login },
  data: () => ({
        links: [
      { icon: 'home', text: 'Home', route: '/'},
      AccountRoutes.menuItem,
    ]
  }),
  created(){
    AccountRoutes.init()
  }
};
</script>

6. How to get an idToken of firebase auth.

Import IdToken and mixin into your vue component. Then call getIdToken() function. In case you use firebase with npm or yarn, you should import IdToken from vue-faui-user-fe2/src/mixins/ as follous:

import {IdToken as IdToken} from 'vue-faui-user-fe2/src/mixins/IdToken

Instead, in case you use firebase on CDN, you should import IdToken from vue-faui-user-fe2/src/mixins.cdn/ as follous:

import IdTokenCDN from 'vue-faui-user-fe2/src/mixins.cdn/IdToken'

Then, mixin into you vue app and call getIdToken().

For example:

<script>
//import * as firebase from 'firebase'
import IdToken from 'vue-faui-user-fe2/src/mixins.cdn/IdToken'
//import {IdToken as IdToken} from 'vue-faui-user-fe2/src/mixins/IdToken'

export default {
  data: () => ({
    devices: ""
  }),
  mixins: [IdToken],
  methods: {
    getDevices: async function(){
      var idToken = await this.getIdToken()
      const url="https://kerokerohouse.kaerusoft.com/getmyflogs/"+idToken
      const res = await fetch(url)
      if (res.status == 200) {
        console.log("result", await res.json())
      }
    },
  },
}
</script>

6.2 another way:

Import firebase and get idToken by getIdToken().

6.2.1 Import firebase

The correct way to import Firebase depends on where you got it.

In case you've got it from the npm or yarn, import as follows:

import firebase from "firebase/app";

In case you've got it from the CDN, import as follows:

import * as firebase from 'firebase'

6.2.2 Get idToken by getIdToken()

Refer following sample code.

  methods:{
    idToken: async function(){
      var user = firebase.auth().currentUser;
      if (user){
        const idToken = await user.getIdToken()
        return idToken
      }
    },
  }

7. Example

Refer to a real implementation of the sample project.

⚠️ **GitHub.com Fallback** ⚠️