Facebook Sign-In with Ionic and Fire base
Facebook has come to be one of the most used techniques to get users to signal-in for your utility, in today’s post we’ll set up the fb local plugin via Ionic Native.
That way we are able to use the facebook app to signal-in our customers, alternatively of getting them log in via a browser.
To make matters simpler, we’re going to interrupt down the technique into three special elements:Step #1: We’ll log into our facebook programmer account, create a brand new application and get the credentials.
Step #2:We’ll go into our Firebase console and permit facebook signal-In with the credentials from the first step.
Step #3:We’ll write the code to authorize the user via facebook and then authenticate that person into our Firebase app.
Via the way, at the end of this submit, I’m going to link a Starter Template that already has Google & facebook authentication prepared to move, all you’d want to do is upload your credentials and run.
With that in mind, let’s start!Step #1:Facebook Developer Console
The first aspect we want to do is to create a new utility in Facebook’s developer dashboard, and this app is the only that facebook will use to ask our users for their permission while we strive to log them into our Ionic Application utility.
For which you’ll want to go to Facebook for developers apps and create a brand new app.
After you click at the button, you’ll get a short shape pop up, upload the name you want for your app and the contact email with the intention to be public to users.
As soon as we end creating our app, it’s going to take you to the app’s dashboard, wherein you can see the app’s identity, take note of that id, we’ll want it when it’s time to put in the Facebook plugin.
Install the Cordova Plugin
Now which 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.
You’ll want to replace the values or APP_ID and APP_NAME to your real credentials. you could locate each of these inside your Facebook Programmer Dashboard.
It’s a chunk of a ache to paintings with Cordova plugins, happily the terrific Ionic crew created Ionic local, that is a wrapper for the Cordova plugins so we can use them in a more “Angular/Ionic” manner.
So the subsequent component we need to do is installation the Facebook package from Ionic native, open your terminal again and re-type.
Add your Platforms to Facebook
Once the whole thing is installation in our development environment, we need to permit Facebook recognize which structures we’ll be the usage of (if it’s just web, IOS, or Android).
In our case, we want to add structures, IOS and Android.
To add the systems, cross beforehand and inside your Facebook dashboard click on on settings, then, right beneath the app’s information you’ll see a button that announces add Platform, click it.
Once you click the button, you’ll see several alternatives for the structures you’re creating, allow’s begin with IOS, you’ll see a shape asking you for a few facts, right now we just want the package identification.
Step #2: Enable Facebook signal-In in Firebase.
Now that the whole lot is installation on facebook’s facet, we need to go into our Firebase console and enable fb authentication for our app.
To permit fb, you’ll want to visit your Firebase Console and find the app you’re the use of.
when you’re in the app’s dashboard, you’re going to go into Authentication > sign-In technique > facebook and are going to click on the enable toggle.
When you do, it’s going to ask you for a few facts, specially your facebook app id and secret key, you’ll discover both of these interior your fb console, under your app’s settings.
Step #3: Authenticate Users.
It is entirely as much as you in which step of your app’s system you want to authenticate your users, so I’m going to present you the code so you can simply copy it into whichever page you’re the use of.
The primary thing we need to do is to get the authorization from facebook, to do that, we want to import facebook plugin from Ionic local and ask our person to log in.
That characteristic proper there takes care of establishing the facebook local widget and ask our user to authorize our software to apply their statistics for login purposes.
Now we want to deal with the response. The feature response will offer us with a fb get entry to token we will then pass to Firebase.
Next Steps
By using now you have got a fully running sign-in technique with facebook the use of Firebase, I comprehend it’s quite a few configuration, however it’s because we want our users to have an notable enjoy the usage of our apps.
Now I want you to download a Starter Template I constructed it has both fb and Google signal-In operating out of the box, all you want to do is upload your credentials from facebook and Google.
