DailyJS
Published in

DailyJS

Authenticating a Vue JS Application With Firebase UI

Scaffold the Vue project

Begin by scaffolding the app and adding a few files:

$ vue init webpack-simple fb-test-app
$ cd fb-test-app
$ npm install
$ npm install --save firebase firebaseui vue-router
$ mkdir src/components
$ mkdir src/helpers
$ touch src/helpers/firebaseConfig.js
$ touch src/components/Auth.vue
$ touch src/components/AuthSuccess.vue
$ touch src/router.js

Set up Firebase

Head over to the Firebase console and either create a new project or reuse some old test project you have lying around. Firebase has a generous free plan, but there is a limit in the number of projects you can create. Strangely there’s no fixed limit. Instead some algorithm works out how many projects you can create depending on your relation to Google. Usually it’s somewhere between five and ten, so don’t waste them.

Time to write some code!

We’ll begin with firebaseConfig.js. This is where you’ll use the keys you just copied:

export const config = { 
apiKey: "AIzaSyCX-r4B1Hs8uNaySWZOdmUP4a9DS_C2OFE",
authDomain: "medium-demo.firebaseapp.com",
databaseURL: "https://medium-demo.firebaseio.com",
storageBucket: "medium-demo.appspot.com",
messagingSenderId: "1039269062579"
};
<template> 
<div id=”app”>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘app’,
}
</script>
<link type="text/css" rel="stylesheet" href="node_modules/firebaseui/dist/firebaseui.css" />
import VueRouter from 'vue-router';
import Auth from './components/Auth.vue';
import AuthSuccess from './components/AuthSuccess.vue';
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Auth },
{ path: '/auth', component: Auth },
{ path: '/success', component: AuthSuccess }
]
});
export default router;
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import firebase from 'firebase'
import firebaseui from 'firebaseui';
import router from './router'
import {config} from './helpers/firebaseConfig'
Vue.use(VueRouter)
new Vue({
router,
created() {
firebase.initializeApp(config);
firebase.auth().onAuthStateChanged((user) => {
if(user) {
this.$router.push('/success')
} else {
this.$router.push('/auth')
}
});
},
el: '#app',
render: h => h(App)
});
<template lang="html">
<div id="firebaseui-auth-container"></div>
</template>
<script>
import firebase from 'firebase';
import firebaseui from 'firebaseui'
import {config} from '../helpers/firebaseConfig';
export default {
name: 'auth',
mounted() {
var uiConfig = {
signInSuccessUrl: '/success',
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
]
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
},
}
</script>
<template> 
<div>
<h1>Signup succeeded</h1>
<button @click=’logOut’>Log out</button>
<hr>
<img :src=”photo” style=”height: 120px”> <br>
<p>{{name}}</p>
<p>{{email}}</p>
<p>{{userId}}</p>
<hr>
<pre>{{user}}</pre>
</div>
</template>
<script>
import firebase from ‘firebase’
export default {
data(){
return {
photo: ‘’,
userId: ‘’,
name: ‘’,
email: ‘’,
user: {}
}
},
};
</script>
created() { 
this.user = firebase.auth().currentUser;
if(this.user) {
this.name = this.user.displayName;
this.email = this.user.email;
this.photo = this.user.photoURL;
this.userId = this.user.uid;
}
},
methods: { 
logOut() {
firebase.auth().signOut();
}
},

Playtime!

Just run the app with npm run dev and hopefully you’ll have the Auth view on your screen after a couple of seconds. Click on shiny red Google button and permit the application to sign in with Google. Give it a couple of seconds and something like this should be on your screen:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store