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.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.