4elements, web design and consultancy

In the previous part of this tutorial series, we added the Ladda loading indicator into our application to make it more interactive. We also saw how to filter the data result while fetching data from firebase. In this part of the tutorial, we'll add the logout functionality and fix a couple of issues.

Implementing Logout

When we want to log a particular user out, we can call the $unauth firebase API. We'll create a method in our CommonProp AngularJS service so that it's available across controllers. Open home.js and modify the CommonProp service to include a new function called logoutUser.

logoutUser:function(){
// logout the user
}

Now inside the logoutUser function, use the loginObj to make the $unauth API call and redirect to the home page. Here is the modified CommonProp service.

In the AddPostCtrl and WelcomeCtrl controllers, add a function called logout which will make the logout call to the CommonProp service.

$scope.logout = function(){
CommonProp.logoutUser();
}

Save the above changes and sign in using a valid email address and password. Once signed in, you should be able to view the Logout link in the top menu. Clicking on the Logout link should log you out of the application.

Maintaining Page Data on Refresh

Until now everything looks fine and works well. But after you have signed in to the application, if you try to refresh the page everything gets messed up. So, we need to find a way to maintain the page data. We'll make use of HTML 5 local storage to sustain important data.

Once the user has signed in successfully, we'll keep the email address in local storage. Modify the setUser function in the CommonProp service to store the user email address in local storage.

Similarly add the following code checking to the AddPostCtrl controller.

if(!CommonProp.getUser()){
$location.path('/home');
}

Save the above changes and try to load the Welcome page or the Add Post page without logging in, and you should be redirected to the sign-in page.

Auto Log In User on Valid Session

We'll add one more feature to auto log in the user when on the sign-in page. We'll make use of the $onAuth API which will listen for changes in authentication state. When the user loads the sign-in page and an authentication state occurs due to a valid session, $onAuth will be fired. Add the $onAuth API call in the HomeCtrl controller.

Save the above changes and sign in to the application. Once logged in, close the application without logging out. Now, try to load the sign-in page and you should be automatically logged in to the application.

Wrapping It Up

In this part of the series, we implemented the logout functionality and also sorted out some of the issues like preventing unauthorized user access and maintaining data on page refresh.

In the coming tutorials, I'll try to implement a few features requested by users. I welcome any feature requests that you would like me to implement.

Watch out for the upcoming tutorial by checking my instructor page. It includes all the tutorials as soon as they are published.

Do let us know your thoughts, suggestions and corrections in the comments below. Source code from this tutorial is available on GitHub.