How to setup v1.0 - 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. Initialize firebase and set it to an instance property

Initialize firebase instance by your Firebase Config Object1 at the very first of your main.js. Then set it to the vue Instance Property $firebase as Vue.prototype.$firebase. For example:

sample main.js

// import firebase
import firebase from 'firebase'

const firebaseConfig = {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
};

// initialize firebase
firebase.initializeApp(firebaseConfig);
// set firebase to an instance property
Vue.prototype.$firebase = firebase

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

You can pass the values to process.env by .env file on your local environment, or Netlify Build environment variables for example.

The $firebase, which has been initialized, is intended to be used by the components.

Note that initialization of the firebase app can be available only one time, second time initialization must be caused an error. So, initialized firebase app should be pathed to components like this manner.

Refer to a real implementation on a sample project.

1: Refer firebase document for detail.

2. Add a computed to Vue global mixin.

With the following, useful global variables about login status are available on your project. The steps are only required easy 2 action as:

2.1 import AccountRoutes

At your main.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'

2.2 set global mixin.

At your main.js file on your Vuetify project, call AccountRoutes.init() and set the return value to your Vue global mixin as computed option as follow:

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

2.3 Available instance properties

With this mixin, the following instance properties of vue related to the firebase auth login status get available on your Vue project automatically.

  • $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.

So you've released from handling firebase SDK yourself to get the login status.

3. 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.

3.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'

3.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>

3.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.

4. 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.

4.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'

4.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,
  ]
})

4.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).

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. Example

Refer to a real implementation of the sample project.

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