├── .gitignore ├── .gitattributes ├── package.json ├── LICENSE ├── index.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | index.html linguist-language=JavaScript 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuefire-auth-example", 3 | "version": "0.1.0", 4 | "description": "Firebase authentication example", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "lite-server" 8 | }, 9 | "author": "Chris Braddock (braddock.chris@gmail.com)", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "lite-server": "^2.2.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Chris Braddock 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | vuefire-auth-example 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Messages

12 |

uid: {{ user.uid }}

13 |

message path: /messages/{{ user.uid }}

14 |

num messages: {{ messages.length }}

15 | 17 | 20 |
21 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #vuefire-auth-demo 2 | 3 | ## Barebones authentication demo with Vue and VueFire 4 | 5 | note: Vue 2.x 6 | 7 | Demonstrates basic anonymous authentication and a pattern that can be used when a Firebase path is dependent on async operations that must complete prior to Firebase binding. (e.g. `/messages/${user.uid}` requires `user.uid` to be known) 8 | 9 | ```bash 10 | npm install 11 | npm run dev 12 | ``` 13 | 14 | Or see the live demo: [http://vuefire-auth-example.firebaseapp.com](https://vuefire-auth-example.firebaseapp.com/) 15 | 16 | ### Details 17 | 18 | The path that the demonstration requires to access data for a session is `/messages/${uid}` - where `${uid}` is the (anonymous) Firebase `user.uid`. Note: This database design pattern is [illustrated in the Firebase docs](https://firebase.google.com/docs/database/web/structure-data) at the time of this writing. Since we don't have a `user` prior to authentication, we cannot evaluate the path to give to VueFire. 19 | 20 | The approach taken is: 21 | 22 | * Initiate authentication as early as possible. In this demo, we're using [anonymous authentication](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInAnonymously) so there is no need to consider user input (i.e. credentials): 23 | 24 | ```javascript 25 | new Vue({ 26 | el: '#app', 27 | beforeCreate: function() { 28 | // Our earliest lifecycle hook and first access 29 | // to $bindAsArray() / $bindAsObject() from VueFire 30 | // Start Firebase authentication here: 31 | firebase.auth().onAuthStateChanged(function(user) { 32 | // Once authed, we'll have a user.uid and 33 | // can bind references that require it 34 | ... 35 | ``` 36 | 37 | * Add placeholder ([reactive](https://vuejs.org/v2/guide/reactivity.html#How-Changes-Are-Tracked)) properties on `data` that will house the eventual Firebase references. This allows the UI to render immediately (sans missing data) and the reactivity handles UI updates once the data is available: 38 | 39 | ```javascript 40 | data: { 41 | user: {}, 42 | messages: [] 43 | } 44 | ``` 45 | 46 | * Once authed, bind the `data` properties to Firebase references: 47 | 48 | ```javascript 49 | // ... continued from above 50 | firebase.auth().onAuthStateChanged(function(user) { 51 | if (user) { 52 | // Cache user - an anonymously authenticated firebase.User account 53 | // - https://firebase.google.com/docs/reference/js/firebase.User 54 | this.user = user 55 | // Bind this instance's 'messages' property to the 'messages/${uid}' 56 | // Firebase reference via vuefire.js' $bindAsArray() method 57 | this.$bindAsArray('messages', firebasedb.ref('messages/' + user.uid)) 58 | // Note: Child component instances will have access to these 59 | // references via this.$root.user and this.$root.messages 60 | } else { 61 | firebase.auth().signInAnonymously().catch(console.error) 62 | } 63 | }.bind(this)) 64 | ``` 65 | 66 | *** 67 | 68 | Created based on [this thread](https://github.com/vuejs/vuefire/issues/47). 69 | --------------------------------------------------------------------------------