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!
Initialize firebase and this package at the main.js
on your Vue project.
The fbinit module of this package initialize the firebase instance in accordance with the Firebase Config Object1 of your firebase project.
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
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:
No, you shouldn't call this or you get firebase duplication initialization error.
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')
The accountinit module initialize Login account related gloval variables.
Following variables get available in your application
-
$isLogin
: boolean, the initial value isfalse
, get betrue
when user logged in by firebase auth, get befalse
when user logged out. -
$isEmailVerified
: boolean, the initial value isfalse
, get betrue
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.
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')
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.
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'
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>
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>
<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:
<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 betrue
when user logged in by firebase auth, get befalse
when user logged out. - $isEmailVerified: boolean, the initial value is
false
, get betrue
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.
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'
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,
]
})
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',
When using npm components like firebase, vue, vuetify from CDN, following steps are additionally required.
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!
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:
<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>
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>
Import firebase and get idToken by getIdToken()
.
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'
Refer following sample code.
methods:{
idToken: async function(){
var user = firebase.auth().currentUser;
if (user){
const idToken = await user.getIdToken()
return idToken
}
},
}
Refer to a real implementation of the sample project.