Ionic Firebase Tutorial – Facebook Login

This article, we'll learn how to implement firebase facebook authentication using Ionic. Before we starting we need to create facebook app id, app name for adding plugin.please refer https://codesundar.com/create-facebook-application/ for detailed instructions

Let's create new project & Add required dependencies

ionic start firebasefbauth blank
cd firebasefbauth

ionic cordova platform <span class="hljs-keyword">add</span><span class="bash"> android
</span>ionic cordova platform <span class="hljs-keyword">add</span><span class="bash"> ios
</span>
ionic cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-facebook4 --variable APP_ID=<span class="hljs-string">"123456789"</span> --variable APP_NAME=<span class="hljs-string">"myApplication"</span>
</span>npm install --save @ionic-native/facebook

npm install --save firebase

Working with app.component.ts & app.module.ts

After adding all plugins and packages, we need to initiate our firebase inside app.component.ts

firebase.initializeApp({
<span class="hljs-symbol">  apiKey:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  authDomain:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  databaseURL:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  projectId:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  storageBucket:</span> <span class="hljs-string">"xxx"</span>,
<span class="hljs-symbol">  messagingSenderId:</span> <span class="hljs-string">"xxx"</span>
});

We need to declare plugin inside app.module.ts

<span class="hljs-keyword">import</span> { GooglePlus } from <span class="hljs-string">'@ionic-native/google-plus'</span>; 
<span class="hljs-keyword">import</span> { Facebook } from <span class="hljs-string">'@ionic-native/facebook'</span>; 
.
.
.
.
<span class="hljs-string">providers:</span> [
    StatusBar, 
    SplashScreen, 
    Facebook, 
    GooglePlus, 
    {<span class="hljs-string">provide:</span> ErrorHandler, <span class="hljs-string">useClass:</span> IonicErrorHandler}
  ]

Working with home.html

Let's create a new button for login with facebook.when the user click that button, we need to take two decision.

if app is running on browser, we need to call this code for a signup purpose

<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.platform.<span class="hljs-keyword">is</span>(<span class="hljs-string">'core'</span>)) {
  firebase.auth().signInWithPopup(new firebase.auth. FacebookAuthProvider()).then(fbRes => {
    <span class="hljs-keyword">this</span>.displayToast(<span class="hljs-string">'login success'</span>); 
    <span class="hljs-keyword">this</span>.userData = fbRes.additionalUserInfo.profile; 
  }).<span class="hljs-keyword">catch</span>(err => <span class="hljs-keyword">this</span>.displayToast(err)); 
}

if app is running on device, we can login with cordova plugin, here we also calling Facebook api (optional) for retrieving user's information from Facebook such as email, first name, profile picture and gender

<span class="hljs-keyword">else</span> {
<span class="hljs-keyword">this</span>.facebook.login([<span class="hljs-string">'public_profile'</span>, <span class="hljs-string">'email'</span>]).then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
  <span class="hljs-keyword">let</span> credential = firebase.auth. FacebookAuthProvider.credential(res.authResponse.accessToken); 
  firebase.auth().signInWithCredential(credential).then(<span class="hljs-function"><span class="hljs-params">()</span> =></span> {
      <span class="hljs-comment">// fetching user data</span>
      <span class="hljs-keyword">this</span>.facebook.api(<span class="hljs-string">"me/?fields=id, email, first_name, picture, gender"</span>, [<span class="hljs-string">"public_profile"</span>, <span class="hljs-string">"email"</span>]).then(<span class="hljs-function"><span class="hljs-params">data</span> =></span> {
        <span class="hljs-built_in">console</span>.log(data)
      }).catch(<span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-keyword">this</span>.displayToast(err)); 

    }).catch(<span class="hljs-function">(<span class="hljs-params">err</span>) =></span> <span class="hljs-keyword">this</span>.displayToast(err)); 

}).catch(<span class="hljs-function"><span class="hljs-params">err</span> =></span> <span class="hljs-keyword">this</span>.displayToast(err)); 
}

!! important !!

If you're using [email protected], you need add these lines with your config.xml to avoid building errors

<platform <span class="hljs-built_in">name</span>=<span class="hljs-string">"android"</span>>
<config-<span class="hljs-built_in">file</span> parent=<span class="hljs-string">"/resources"</span> target=<span class="hljs-string">"./res/values/strings.xml"</span>>
<<span class="hljs-built_in">string</span> <span class="hljs-built_in">name</span>=<span class="hljs-string">"fb_app_id"</span>>Your App ID</<span class="hljs-built_in">string</span>>
<<span class="hljs-built_in">string</span> <span class="hljs-built_in">name</span>=<span class="hljs-string">"fb_app_name"</span>>Your app <span class="hljs-built_in">name</span></<span class="hljs-built_in">string</span>>
</config-<span class="hljs-built_in">file</span>>