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
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. 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 Firbase console and enable it.

 

5. a) Set up a Android app, add in your Android app to Firebase console and enter the app details. There is no need to generate google-services.json.
   b) Set up
a iOS app, create a iOS app and add it to Firebase console. There is need for iOS bundle ID to add later when installing custom URL scheme plugin.

 

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.

 

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..