Firebase Authentication Wwith Cordova
Posted By : Arun Kataria | 30-Apr-2018
Firebase Authentication with Cordova for allowing user for login to your application by one or more login methods, You can login by email address & password, and Confederate identity providers such as Google Login and Facebook Login.
Steps for firebase auth with Cordova implementation:-
1. You need to create the account in https://firebase.google.com/ and create your project in your account.
2. Then provide package name for your project (like as: info.ionictestproject.firebase) to
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. Registered in Facebook development account, Now copy App secret & App ID from your account, Paste that in your facebook tab of Sign-in-providers in
5. a) Set up
b) Set up
6) Now Enable the Firebase Dynamic Links:
Firebase console, click Dynamic Links section. If you had not yet accepted the Dynamic Links terms, click Get Started. Go back to main Dynamic Links dashboard. Take note for your Dynamic Link Domain. It should be like abc123.app.goo.gl.
7) Enable the Google Login in a console of Firbase:
Now in console of Firbase, click on Auth section.
On Sign-in method tab, In Google signin method enable that and Save it.
8) Install the required plugins in your Cordova project.
# Plugin for build info (app name, ID, etc) to OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
# This Plugin is to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin --save
# This Plugin is to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
# This one is to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
# This is to handle deep linking through Custom Scheme for iOS
# Add *com.firebase.cordova* In a iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable \
URL_SCHEME=com.firebase.cordova --save
9) Add this in config of Cordova xml file of config, DYNAMIC_LINK_DOMAIN for domain in step -3c.
An example:
<universal-links>
<host name="xyz123.app.goo.gl" scheme="https" />
<host name="app.firebaseapp.com" scheme="https">
<path url="/__/auth/callback"/>
</host>
</universal-links>
10) To add in your project:
angular.module('app.controllers.login', ['firebase'])
.controller('LoginController', LoginController);
function LoginController($scope, $firebaseAuth) {
var prov = new firebase.auth.GoogleAuthProvider();
// for Facebook -> prov = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithRedirect(prov).then(function() {
return firebase.auth().getRedirectResult();
}).then(function(response) {
console.log("User Details: ", response.user)
})
}
Above firbase auth will return the object with the user details like name, email, phone, profile pic and further details of the user.
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.