-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
76 lines (69 loc) · 2.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<title>vuefire-auth-example</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.1/firebase.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuefire.js"></script>
</head>
<body>
<div id="app">
<h1>Messages</h1>
<p>uid: {{ user.uid }}</p>
<p>message path: /messages/{{ user.uid }}</p>
<p>num messages: {{ messages.length }}</p>
<button v-if="user.uid"
v-on:click="addMessage">Add Message</button>
<ul>
<li v-for="message in messages"><button v-on:click="removeMessage(message)">remove</button> {{ message }}</li>
</ul>
</div>
<script>
// 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()
}
}
})
</script>
</body>
</html>