• Firebase Authentication In Web App

    Posted by Arun Kataria | Last Updated: 30-Mar-18

    Firebase had many features usefull for all app starting from the authentication to hosting a app.
    Firebase authentication  comes with the user management system. You can save the basic data against your Firebase Auth users, and it will offer the multiple login methods?—?email/password, Google, Facebook, twitter, and more. It  provides backend services, easy-to-use SDKs, and the ready-made UI libraries to authenticate the users to your app. 
    Steps for firebase auth implementaion:-
    1. You need to create the account in and create your project in your account.
    2. Give package name for your project (mine is info.ionicproject.firebase) which is to be integrate with Firebase. 
    3. Then go to your project dashboard. Search Authentication and click get started. Go to set up SIGN-IN METHOD & choose Email and Password to enable it.
    4. Now create a Facebook development account and copy App ID and App secret from that account and paste it in your facebook tab of Sign-in-providers of Firbase console and enable it.
    5. Now paste this code in your main HTML file,
    // Initialize Firebase
    var config = {
        apiKey: <your_api_key>,
        authDomain: <your_project_auth_domain>,
        databaseURL: <your_firebase_dataBase_url>,
        projectId: <your_project_id>,
        storageBucket: <>,
        messagingSenderId: <msg_sender_id>
    <script src=""></script>
        <script src=""></script>

    6. Now add firebase in your angular module.

     angular.module('app', ['firebase']);
    7. Use this code in your controller for facecbook and google Authentication.
    var auth = $firebaseAuth();
    	var provider = "facebook";
            auth.$signInWithPopup(provider).then(function(firebaseUser) {
            }).catch(function(error) {
                 console.log("Authentication failed:", error);
    Above code will return the basic details of user that is name, phone number, email, profile pic, etc.
    Note- To use google authentication use "google" instead of "facebook" in provider variable.

Tags: AngularJS