{"id":1911,"date":"2017-07-18T14:26:37","date_gmt":"2017-07-18T14:26:37","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1911"},"modified":"2018-01-05T15:52:22","modified_gmt":"2018-01-05T15:52:22","slug":"ionic-firebase-facebook-login","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login","title":{"rendered":"How to use Facebook Sign-In with Ionic and Firebase"},"content":{"rendered":"<p>Facebook has become one of the most used methods to get users to sign-in to your application, in today&#8217;s post we&#8217;ll set up the Facebook native plugin through Ionic Native.<\/p>\n<p>That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser.<\/p>\n<p>To make things easier, we&#8217;re going to break down the process into three different parts:<\/p>\n<p><!--more--><\/p>\n<ul>\n<li><strong>Step #1:<\/strong> We&#8217;ll log into our Facebook developer account, create a new app and get the credentials.<\/li>\n<li><strong>Step #2:<\/strong> We&#8217;ll go into our Firebase console and enable Facebook Sign-In with the credentials from the first step.<\/li>\n<li><strong>Step #3:<\/strong> We&#8217;ll write the code to authorize the user through Facebook and then authenticate that user into our Firebase app.<\/li>\n<\/ul>\n<p>By the way, at the end of this post, I\u2019m going to link a Starter Template that already has Google &amp; Facebook authentication ready to go, all you\u2019d need to do is add your credentials and run <code>npm install<\/code>.<\/p>\n<p>With that in mind, let&#8217;s start!<\/p>\n<h2>Step #1: Facebook Developer Console<\/h2>\n<p>The first thing we need to do is to create a new application in Facebook&#8217;s developer dashboard, and this app is the one that Facebook will use to ask our users for their permission when we try to log them into our Ionic application.<\/p>\n<p>For that you&#8217;ll need to go to <a href=\"https:\/\/developers.facebook.com\/apps\" target=\"_blank\">https:\/\/developers.facebook.com\/apps<\/a> and create a new app.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"147\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-1024x147.png\" alt=\"facebook create app\" class=\"aligncenter size-large wp-image-1912 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-1024x147.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-300x43.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-768x110.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app.png 1032w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/147;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"147\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-1024x147.png\" alt=\"facebook create app\" class=\"aligncenter size-large wp-image-1912\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-1024x147.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-300x43.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-768x110.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/p>\n<p>Once you click on the button, you&#8217;ll get a short form pop up, add the name you want for your app and the contact email that will be public to users.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"556\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form.png\" alt=\"facebook create app form\" class=\"aligncenter size-full wp-image-1913 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form.png 1022w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form-300x163.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form-768x418.png 768w\" data-sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1022px; --smush-placeholder-aspect-ratio: 1022\/556;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"556\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form.png\" alt=\"facebook create app form\" class=\"aligncenter size-full wp-image-1913\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form.png 1022w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form-300x163.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-create-app-form-768x418.png 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/noscript><\/a><\/p>\n<p>Once we finish creating our app, it will take you to the app&#8217;s dashboard, where you can see the app&#8217;s ID, take note of that ID, we&#8217;ll need it when it&#8217;s time to install the Facebook plugin.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-1024x514.png\" alt=\"Facebook console app id\" class=\"aligncenter size-large wp-image-1914 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-1024x514.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-300x151.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-768x386.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id.png 1302w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/514;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-1024x514.png\" alt=\"Facebook console app id\" class=\"aligncenter size-large wp-image-1914\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-1024x514.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-300x151.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id-768x386.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-app-id.png 1302w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/p>\n<h3>Install the Cordova Plugin<\/h3>\n<p>Now that you created your app on Facebook, we need to install the Cordova plugin in our Ionic app so we can have our app calling the Facebook Sign-In widget.<\/p>\n<p>For that, open your terminal and type (<em>All in the same line<\/em>):<\/p>\n<pre><code class=\"bash\">$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID=&quot;123456789&quot; --variable APP_NAME=&quot;myApplication&quot;\n<\/code><\/pre>\n<p>You&#8217;ll need to replace the values or <code>APP_ID<\/code> and <code>APP_NAME<\/code> for your real credentials. You can find both of those inside your Facebook Developers Dashboard.<\/p>\n<p>It&#8217;s a bit of a pain to work with Cordova plugins, luckily the great Ionic Team created Ionic Native, which is a wrapper for the Cordova plugins so we can use them in a more &#8220;Angular\/Ionic&#8221; way.<\/p>\n<p>So the next thing we need to do is install the facebook package from Ionic Native, open your terminal again and type:<\/p>\n<pre><code class=\"bash\">$ npm install --save @ionic-native\/facebook\n<\/code><\/pre>\n<p>After we finish installing it, we need to tell our app to use it, that means, we need to import it in our <code>app.module.ts<\/code> file<\/p>\n<pre><code class=\"js\">import { SplashScreen } from &#039;@ionic-native\/splash-screen&#039;;\nimport { StatusBar } from &#039;@ionic-native\/status-bar&#039;\nimport { Facebook } from &#039;@ionic-native\/facebook&#039;\n\n@NgModule({\n  ...,\n  providers: [ SplashScreen, StatusBar, Facebook ]\n})\nexport class AppModule {}\n<\/code><\/pre>\n<h3>Add your Platforms to Facebook<\/h3>\n<p>Once everything is set up in our development environment, we need to let Facebook know which platforms we&#8217;ll be using (<em>if it&#8217;s just web, iOS, or Android<\/em>).<\/p>\n<p>In our case, we want to add two platforms, iOS and Android.<\/p>\n<p>To add the platforms, go ahead and inside your Facebook dashboard click on settings, then, right below the app&#8217;s information you&#8217;ll see a button that says <strong>Add Platform<\/strong>, click it.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-1024x511.png\" alt=\"facebook add platform button\" class=\"aligncenter size-large wp-image-1915 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-1024x511.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-300x150.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-768x383.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform.png 1298w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/511;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-1024x511.png\" alt=\"facebook add platform button\" class=\"aligncenter size-large wp-image-1915\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-1024x511.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-300x150.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-768x383.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform.png 1298w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/p>\n<p>Once you click the button, you&#8217;ll see several options for the platforms you&#8217;re creating, let&#8217;s start with iOS, you&#8217;ll see a form asking you for some information, right now we just need the <code>Bundle ID<\/code>.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios.png\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"231\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios.png\" alt=\"Facebook console add ios app\" class=\"aligncenter size-full wp-image-1916 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios.png 577w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios-300x120.png 300w\" data-sizes=\"auto, (max-width: 577px) 100vw, 577px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 577px; --smush-placeholder-aspect-ratio: 577\/231;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"231\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios.png\" alt=\"Facebook console add ios app\" class=\"aligncenter size-full wp-image-1916\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios.png 577w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-add-platform-ios-300x120.png 300w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/noscript><\/a><\/p>\n<p>If you don&#8217;t know where to get the Bundle ID, it&#8217;s the same as the package name when you create an Ionic app, it&#8217;s inside your <code>config.xml<\/code> file:<\/p>\n<pre><code class=\"xml\">&lt;widget id=&quot;co.ionic.facebook435&quot; version=&quot;0.0.1&quot; xmlns=&quot;http:\/\/www.w3.org\/ns\/widgets&quot; xmlns:cdv=&quot;http:\/\/cordova.apache.org\/ns\/1.0&quot;&gt;\n<\/code><\/pre>\n<p>Please, I beg you, change <code>co.ionic.facebook435<\/code> (<em>or what you got there<\/em>) for something that&#8217;s more &#8220;on brand&#8221; with your app or your business.<\/p>\n<blockquote><p>\n  <strong>NOTE:<\/strong> Not kidding, go to Google Play and do a search for &#8220;ionicframework&#8221; you&#8217;ll see a couple of hundred apps that didn&#8217;t change the default package name \ud83d\ude1b\n<\/p><\/blockquote>\n<p>Once you add the Bundle ID, just follow the process to create the app and then do the same for Android, the difference is that instead of <code>Bundle ID<\/code>, Android calls it &#8220;Google Play Package Name.&#8221;<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android.png\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"229\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android.png\" alt=\"facebook platform android\" class=\"aligncenter size-full wp-image-1917 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android.png 600w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android-300x115.png 300w\" data-sizes=\"auto, (max-width: 600px) 100vw, 600px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 600px; --smush-placeholder-aspect-ratio: 600\/229;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"229\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android.png\" alt=\"facebook platform android\" class=\"aligncenter size-full wp-image-1917\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android.png 600w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/fb-platform-android-300x115.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/noscript><\/a><\/p>\n<h2>Step #2: Enable Facebook Sign-In in Firebase.<\/h2>\n<p>Now that everything is set up on Facebook&#8217;s side, we need to go into our Firebase console and enable Facebook authentication for our app.<\/p>\n<p>To enable Facebook, you&#8217;ll need to go to <a href=\"https:\/\/console.firebase.google.com\/\">your Firebase Console<\/a> and locate the app you&#8217;re using.<\/p>\n<p>Once you&#8217;re inside the app&#8217;s dashboard, you&#8217;re going to go into <strong>Authentication &gt; Sign-In Method &gt; Facebook<\/strong> and are going to click the <strong>Enable<\/strong> toggle.<\/p>\n<p><a href=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-1024x556.png\" alt=\"firebase auth enable facebook\" class=\"aligncenter size-large wp-image-1918 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-1024x556.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-300x163.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-768x417.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console.png 1211w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/556;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-1024x556.png\" alt=\"firebase auth enable facebook\" class=\"aligncenter size-large wp-image-1918\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-1024x556.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-300x163.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console-768x417.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/facebook-enable-firebase-console.png 1211w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/a><\/p>\n<p>Once you do, it&#8217;s going to ask you for some information, specifically your Facebook app ID and secret key, you&#8217;ll find both of those inside your Facebook console, under your app&#8217;s settings.<\/p>\n<h2>Step #3: Authenticate Users.<\/h2>\n<p>It is entirely up to you in which step of your app&#8217;s process you want to authenticate your users, so I&#8217;m going to give you the code so you can just copy it into whichever Page you&#8217;re using.<\/p>\n<p>The first thing we need to do is to get the authorization from Facebook, to do that, we need to import Facebook plugin from Ionic Native and ask our user to log in.<\/p>\n<pre><code class=\"js\">import { Facebook } from &#039;@ionic-native\/facebook&#039;\n\nconstructor(public facebook: Facebook){}\n\nfacebookLogin(): Promise&lt;any&gt; {\n  return this.facebook.login([&#039;email&#039;]);\n}\n<\/code><\/pre>\n<p>That function right there takes care of opening the Facebook native widget and ask our user to authorize our application to use their data for login purposes.<\/p>\n<p>Now we need to handle the response. The function response will provide us with a Facebook access token we can then pass to Firebase.<\/p>\n<pre><code class=\"js\">import firebase from &#039;firebase&#039;;\nimport { Facebook } from &#039;@ionic-native\/facebook&#039;\n\nconstructor(public facebook: Facebook){}\n\nfacebookLogin(): Promise&lt;any&gt; {\n  return this.facebook.login([&#039;email&#039;])\n    .then( response =&gt; {\n      const facebookCredential = firebase.auth.FacebookAuthProvider\n        .credential(response.authResponse.accessToken);\n\n      firebase.auth().signInWithCredential(facebookCredential)\n        .then( success =&gt; { \n          console.log(&quot;Firebase success: &quot; + JSON.stringify(success)); \n        });\n\n    }).catch((error) =&gt; { console.log(error) });\n}\n<\/code><\/pre>\n<p>Let&#8217;s break down the code above.<\/p>\n<pre><code class=\"js\">const facebookCredential = firebase.auth.FacebookAuthProvider\n  .credential(response.authResponse.accessToken);\n<\/code><\/pre>\n<p>First, we&#8217;re using the line above to create a credential object we can pass to Firebase, then we need to pass that credential object to Firebase:<\/p>\n<pre><code class=\"js\">facebookLogin(): Promise&lt;any&gt; {\n  return this.facebook.login([&#039;email&#039;])\n    .then( response =&gt; {\n      const facebookCredential = firebase.auth.FacebookAuthProvider\n        .credential(response.authResponse.accessToken);\n\n      firebase.auth().signInWithCredential(facebookCredential)\n        .then( success =&gt; { \n          console.log(&quot;Firebase success: &quot; + JSON.stringify(success)); \n        });\n\n    }).catch((error) =&gt; { console.log(error) });\n}\n<\/code><\/pre>\n<p>This bit of code <code>firebase.auth().signInWithCredential(facebookCredential)<\/code> makes sure your user creates a new account in your Firebase app and then authenticates the user into the Ionic app, storing some authentication information (<em>like tokens, email, provider info, etc.<\/em>) in local storage.<\/p>\n<h2>Next Steps<\/h2>\n<p>By now you have a fully working sign-in process with Facebook using Firebase, I know it&#8217;s a lot of configuration, but it&#8217;s because we want our users to have an amazing experience using our apps.<\/p>\n<p>Now I want you to download a Starter Template I built it has both Facebook and Google Sign-In working out of the box, all you need to do is add your credentials from Facebook and Google \ud83d\ude42 (<em>If the link doesn&#8217;t show the price as $0 just use the discount code IonicBlog to manually set it as $0<\/em>)<\/p>\n<p><a href=\"https:\/\/javebratt.com\/ionic-sent-me\/\"><br \/>\n  GET THE TEMPLATE<br \/>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facebook has become one of the most used methods to get users to sign-in to your application, in today&#8217;s post we&#8217;ll set up the Facebook native plugin through Ionic Native. That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser. To make things easier, [&hellip;]<\/p>\n","protected":false},"author":53,"featured_media":1920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[74,73,27,25],"class_list":["post-1911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","tag-facebook-login","tag-firebase","tag-ionic-native","tag-tutorials"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Facebook Sign-In with Ionic and Firebase - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Facebook Sign-In with Ionic and Firebase\" \/>\n<meta property=\"og:description\" content=\"Facebook has become one of the most used methods to get users to sign-in to your application, in today&#8217;s post we&#8217;ll set up the Facebook native plugin through Ionic Native. That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser. To make things easier, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-18T14:26:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-05T15:52:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3967\" \/>\n\t<meta property=\"og:image:height\" content=\"2635\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jorge Vergara\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@javebratt\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorge Vergara\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\"},\"author\":{\"name\":\"Jorge Vergara\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/0a1b70182dc456f9b26c35bd8450ef81\"},\"headline\":\"How to use Facebook Sign-In with Ionic and Firebase\",\"datePublished\":\"2017-07-18T14:26:37+00:00\",\"dateModified\":\"2018-01-05T15:52:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\"},\"wordCount\":1119,\"commentCount\":18,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg\",\"keywords\":[\"facebook login\",\"firebase\",\"Ionic Native\",\"Tutorials\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\",\"name\":\"How to use Facebook Sign-In with Ionic and Firebase - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg\",\"datePublished\":\"2017-07-18T14:26:37+00:00\",\"dateModified\":\"2018-01-05T15:52:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg\",\"width\":3967,\"height\":2635,\"caption\":\"facebook social media\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to use Facebook Sign-In with Ionic and Firebase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/0a1b70182dc456f9b26c35bd8450ef81\",\"name\":\"Jorge Vergara\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/06\/jorge-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/06\/jorge-150x150.jpg\",\"caption\":\"Jorge Vergara\"},\"sameAs\":[\"https:\/\/javebratt.com\/\",\"https:\/\/x.com\/javebratt\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/javebratt\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to use Facebook Sign-In with Ionic and Firebase - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login","og_locale":"en_US","og_type":"article","og_title":"How to use Facebook Sign-In with Ionic and Firebase","og_description":"Facebook has become one of the most used methods to get users to sign-in to your application, in today&#8217;s post we&#8217;ll set up the Facebook native plugin through Ionic Native. That way we can use the Facebook app to sign-in our users, instead of having them log in through a browser. To make things easier, [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login","og_site_name":"Ionic Blog","article_published_time":"2017-07-18T14:26:37+00:00","article_modified_time":"2018-01-05T15:52:22+00:00","og_image":[{"width":3967,"height":2635,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","type":"image\/jpeg"}],"author":"Jorge Vergara","twitter_card":"summary_large_image","twitter_creator":"@javebratt","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Jorge Vergara","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login"},"author":{"name":"Jorge Vergara","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/0a1b70182dc456f9b26c35bd8450ef81"},"headline":"How to use Facebook Sign-In with Ionic and Firebase","datePublished":"2017-07-18T14:26:37+00:00","dateModified":"2018-01-05T15:52:22+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login"},"wordCount":1119,"commentCount":18,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","keywords":["facebook login","firebase","Ionic Native","Tutorials"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login","url":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login","name":"How to use Facebook Sign-In with Ionic and Firebase - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","datePublished":"2017-07-18T14:26:37+00:00","dateModified":"2018-01-05T15:52:22+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","width":3967,"height":2635,"caption":"facebook social media"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-firebase-facebook-login#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"How to use Facebook Sign-In with Ionic and Firebase"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/0a1b70182dc456f9b26c35bd8450ef81","name":"Jorge Vergara","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/06\/jorge-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/06\/jorge-150x150.jpg","caption":"Jorge Vergara"},"sameAs":["https:\/\/javebratt.com\/","https:\/\/x.com\/javebratt"],"url":"https:\/\/ionic.io\/blog\/author\/javebratt"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2017\/07\/william-iven-19844.jpg","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1911"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1911\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/1920"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}