- Reusing an existing Ionic App with Firebase
- Setup Facebook-App for using Facebook-Login
- Connect Firebase and Facebook to use Facebook-Login
- Extend Ionic App for using Facebook Login
You can find the sample project on my Github page: Add Facebook-Login to Ionic App using Firebase.
Before we could start we do a short recap. For this tutorial we’re going to use an existing Ionic project which uses Firebase already. The project we’re going to use was created in the Ionic and Firebase Authentication tutorial which I’ve created earlier this year.
So before we start I assume that you got the following things already:
- An Ionic App which uses AngularFire2
- An existing Firebase project which can be used for this tutorial
- The Ionic App has E-Mail/Password authentication implemented
If you haven’t these things already done, you can download the starting project from Github.
Before we can start implementing the Facebook provider into our app, we need to create a new Facebook App.
To create a new Facebook App you should be registered with your Facebook Account as a developer and switching to the Facebook Developer Portal.
If you’re logged in, select “Add a new App”.
In the Facebook popup enter a display name (mostly the name of your app) and a contact email address:
In the security popup you need to resolve the captcha and it creates your app.
If your app was created and Facebook redirected you to your app, you have to select “Facebook Login” to add the login functionality to your app.
Now you need to switch to your Firebase console, into our project and add Facebook as an authentication provider.
Enable Facebook als authentication provider. You need to enter your Facebook
App ID and
App secret here to Firebase. These two keys can be found in your Facebook app under
After entering the
App ID and the
App secret you need to copy the Firebase redirect URL and hit
The redirect URL from Firebase should now be entered into your Facebook app. So switch back to the Facebook Developer Portal, click on
Facebook Login under
Products and enter the redirect URL into the
Valid OAuth redirect URIs field. After this hit
Also we need to add this redirect URL to the Facebook app platform. For this, select
Quickstart on the left side menu and select
Web as platform. Enter your redirect URL and hit
Now your Facebook app is nearly finished. We come back to that later.
There are now two main ways we have to implement for using Facebook login.
First, we implement the option to login using Facebook if our app is running in the browser. Second, implementing the usage of the Cordova plugin to use Facebook login on mobile devices.
So let’s start with the web version. At first we need to add a Facebook login button to our application and the corresponding method in our component.
So in our
login.html we add a new button:
And a new, empty method to our
So far, so good. In our
login.ts we already added the
AngularFireAuth provider from the previous tutorial. Now we also need to import the Firebase SDK directly:
Now we’re able to implement the
loginFacebook method by using Facebook as authentication provider:
If you now start your app locally with
ionic serve and hit the
Login with Facebook button, you should be redirected to Facebook, submit the OAuth and redirected back to your application:
After successful sign in, you should see the credentials in the debugging console:
That’s it for now. Next is implementing the mobile Cordova plugin.
For using the Facebook login also on your mobile device, you need to add a Facebook Cordova plugin. First you need to add, if you haven’t already, a mobile platform e.g.
ionic cordova platform add android.
Now you are able to add the Facebook plugin:
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication" --save.
Make sure you provider the correct
APP_ID and the correct
APP_NAME. The App Name is the display name of the Facebook app (without spaces). In my case this should look like this:
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1383067751814949" --variable APP_NAME="aaronczichon.de" --save.
After adding the Cordova plugin, you should now see this additional information in your
To use this plugin now, we need to add the related
Ionic Native plugin. You could use
yarn for handling packages:
npm install --save @ionic-native/facebook
To be able to use this native plugin you have to add the Facebook provider to our
app.module.ts. This should look like this:
For implementing this usage now, we switching to our
login.ts and importing the Facebook provider and the
This are now the
import statements in this component:
We also need to provide the provider to the component using dependency injection:
For the last code implementation we’re now going to change our
loginFacebook method. This will be extended with a platform detection and using the Facebook Cordova plugin:
That’s for the coding part. One last thing is now left.
For using the Facebook Cordova plugin we need to switch to the Facebook Developer Portal and enable the corresponding login platform (in our case Android).
So, switch to the Portal, select
Facebook Login and
Quickstart. There you should select the platform
Download the Facebook SDK for Android click on
Next. Also click
Import the Facebook SDK.
Tell Us about Your Android Project enter your package name (could be found in
config.xml as id). E.g.
Default Activity Class Name also enter this package name and extend it with the name of your application which could also be found in
config.xml. In my case this would be:
Hint: If your app has spaces in it’s name just remove them for the
Default Activity Class Name.
Hint: If Facebook is asking you, that they have a problem verifying the package name with Google just click
Use this package name.
Hint: If you enable the
iOS platform, click
Next on the first two steps and on
3. Add your Bundle identifier enter the same package name which you can find in
And last but not least we have to enable our Facebook application. For this go to your Facebook app,
App Review and set
Make aaronczichon.de public? (but with your app name) to
Yes. Choose a category and select
That’s it! You have successfully added Facebook Login to your application!
Connect your testing device and run the application on your device using
ionic cordova run android.
Here is the full code of the
We now have an Ionic application which can use Firebase email and password or Facebook as authentication provider. All users (also Facebook users) will now be available inside Firebase.
Because we implemented both, Cordova mobile plugin and the web platform we can run our application on mobile devices (iOS, Android and Windows) and also, for example, as Progressive Web App.
The full sample project can be found here on Github.