Firebase Authentication In Web App

Posted By : Arun Kataria | 30-Mar-2018
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 https://firebase.google.com/ 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: <your_project_storageBucket_.com>,
    messagingSenderId: <msg_sender_id>
};
firebase.initializeApp(config);
</script>

<script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-auth.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/2.3.0/angularfire.min.js"></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) {
             console.log(firebaseUser.user);
        }).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.
 
 

About Author

Author Image
Arun Kataria

Arun has good skills in AngularJS, NodeJS, MongoDB and many more. He is highly motivated which allow him to strive for proficiency when accomplishing assigned duties. He is an excellent team operative.

Request for Proposal

Name is required

Comment is required

Sending message..