This site is my tutorials, rantings and musings on software development, with a focus on JavaScript, Ember.js, Vue.js and Node.js.

08 Sep 2014

Firebase Security And Updates With Ember Part 1

Firebase security offers a lot of flexibility on how stored data can be read and written. With Ember we will be taking some data and protecting it while handling routing issue.

My previous post of Firebase's simple login with Ember had a lot to be desired. For the most part it worked as a good proof of concept. However it needed some work. If you have not read my previous post please do so. This post will be giving suggestions using Firebase security to make the last application better. (Github Repo forthcoming)

Routes

My previous post used an authed variable as a way to keep track when a user was logged in or not. This is fine for simple use cases however it isn't always suitable in protecting routes. Due to the nature of client side apps some people can change the javascript to leave everything open.

A better way of protecting routes (and data) is to use Firebase's security. First log into the Firebase dashboard. Next click on the security rules icon.

Firebase security uses a javascript like syntax to create rules. It integrates with the simple login api to make it easier to protect data.

One simple and obvious addition is to only allow logged in users to read or write data.

"posts":{
".write":"auth != null",
".read": "auth != null"
},

Now when a user navigates to a page that displays post data they'll have to be logged in to see it or write to it.

The next part is a little more tricky. So if a user isn't logged in what happens if you try to access a page that is loading the posts model? You'll get this error which you can see if you look at your console log in Chrome.

Ember can trap for this and use it to redirect to another page. The easiest way of doing this is to use error substates. Error events, like permission denied, bubble upward. We can handle this error event and use it to transition elsewhere.

This uses a promise that will be fullfilled after the user succesfully logs in. We can then successfully transition to index. If an error occurs we can display an error instead.

Controller

One last improvement to my last post is to improve the logic on adding posts. After saving a post it never updates the curent posts on screen. In addition the text boxes never got cleared. The user has to refresh the page to see if it worked. An easy way of fixing both of these issues is to add a promise after the save function. After the post is successfully saved we'll then clear the text boxes. The new index controller looks like this.