Skip to content

Instantly share code, notes, and snippets.

@mornir
Created July 16, 2017 14:21
Show Gist options
  • Save mornir/ed0642df15bf4a6143197184dd1e5ef0 to your computer and use it in GitHub Desktop.
Save mornir/ed0642df15bf4a6143197184dd1e5ef0 to your computer and use it in GitHub Desktop.
Authentification demo with VueFire
// Initialize Firebase
firebase.database.enableLogging(false) // toggle on for debug (it's noisy)
var db = firebase.initializeApp({
apiKey: "AIzaSyDSdRWUWjx55Yf9_SCaW23_HTGhUrvE6qw",
authDomain: "vuefire-auth-example.firebaseapp.com",
databaseURL: "https://vuefire-auth-example.firebaseio.com",
storageBucket: "vuefire-auth-example.appspot.com",
messagingSenderId: "925981907667"
}).database();
new Vue({
el: '#app',
beforeCreate: function() {
// Setup Firebase onAuthStateChanged handler
//
// https://firebase.google.com/docs/reference/js/firebase.auth.Auth
// https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
this.user = user
// https://github.com/vuejs/vuefire/blob/master/src/vuefire.js#L169
this.$bindAsArray('messages', db.ref('messages/' + user.uid))
} else {
// https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInAnonymously
firebase.auth().signInAnonymously().catch(console.error)
}
}.bind(this))
},
// Initialize reactive props, bind later when user is available
data: {
user: {},
messages: []
},
// Demo add/remove to show it all works
methods: {
addMessage: function() {
// https://firebase.google.com/docs/reference/js/firebase.database.Reference#push
this.$firebaseRefs.messages.push({
text: 'new message', timestamp: Date() })
},
removeMessage: function(message) {
// https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove
this.$firebaseRefs.messages.child(message['.key']).remove()
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment