How to setup v1.1 - 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 import initialize

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

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

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

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

1.2 call functions for initialization

Call following 2 functions:

  • fbinit(): This function initialize firebase instance
  • init(): This function prepare global variables indicate the login status

A typical example of your main.js might be as follows:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';

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

Vue.config.productionTip = false

initialize.fbinit()

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

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

1.2.1 fbinit()

This function read your application's Firebase Config Object1 from a set of environment variables and initialize firebase instance with it.

The set of environment variables used by this function is 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 local environment, you can set these by vue's .env.loca file 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

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

In case you've initialized firebase yourself, shouldn't call this or you get firebase duplication initialization error.

1.2.2 init()

This function prepares global mixin indicating login status as follow:

  • $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 above valuable in your application.

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/accountCDN'

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 AccountRoutes.init() will be called, 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. 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>

5. Example

Refer to a real implementation of the sample project.

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