This is a starter template for social authentication, it offers:
- Login Page.
- Home Page.
- Profile Page.
- Authentication Provider.
In the authentication provider we use both Google and Facebook login processes.
The app has a login screen that allows the user to sign-in with either Facebook or Google, once the user signs in, the app gets redirected to the home page.
Once on the home page we have a profile button that users can click to go to the profile page.
Open your terminal, navigate to this folder and run npm install
, it will install all the node packages you need.
Next, go to https://console.firebase.google.com and look for your project, once you have your project opened in the Overview tab click the "Add Web App" to get your Firebase credentials.
Replace the firebaseConfig
object inside app.module.ts
with the credentials you just got from Firebase.
Now you will need to get your Google and Facebook credentials
To get your Google credentials working the first thing we'll do is to create both iOS and Android apps in the google developers console.
First iOS, go here: https://developers.google.com/mobile/add?platform=ios&cntapi=signin and start creating your iOS app.
It will ask you for the app name, when you start typing a name it will display your Firebase apps, pick the one where you got the credentials for the previous step.
Then it will ask you for an iOS Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like com.ionicframework.something (by the way, I strongly suggest you change it to something more custom to your project).
Then it’s going to ask you to enable Google Sign-In, just click to generate and then it will show a big button that says Generate Configuration Files, go ahead and click it, it will let you download your GoogleService-Info.plist file.
You'll do the same process for Android here: https://developers.google.com/mobile/add?platform=android&cntapi=signin
When you link the account it’s going to ask you to enable Google SignIn, but this process is a bit (actually a lot) different that what we just did with iOS, you need to generate an Android Signing Certificate SHA-1 and pass it to the form.
Getting the SHA-1 signing certificate requires a bit of command line work, I’m going to do my best to make it as simple as possible.
There are 2 certificate signings you need, we’re going to do the first one right now, and you’re going to do the second one on your own if you are going to publish your app to Google Play (I’ll show you how you’ll do it).
The first one is the debug certificate, we’re going to get it to make sure everything works when we’re developing the app, since we’re using an un-signed apk to run it in our android devices.
To get it, you’re going to open your terminal and type:
$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
Where ~/.android/debug.keystore is where 99,99% of the time you’ll find it, if not, check your android SDK install to see where it is.
When you run that command, it’s going to ask you for the keystore password, the default one is android.
From the output copy the SHA1 certificate fingerprints and paste them into the Google Developers form, then click on Enable Google Sign-In, and that’s it, you can click on generate config files, but we’re not going to need them.
We will use: https://github.com/EddyVerbruggen/cordova-plugin-googleplus
So go ahead and open the terminal and type:
$ cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID=myreversedclientid
Where we’re going to replace myreversedclientid
with the reversed version of the client id.
To get your REVERSED_CLIENT_ID
go into the API Manager for the Google Developers Console and select the Credential for your project: https://console.developers.google.com/apis/credentials
When you choose your project and click on credentials it will show you android, iOS, and web credentials, copy the web client id, it's the one that looks like this:
com.googleusercontent.apps.THE_REST_OF_YOUR_ID_HERE
And use it in the plugin instalation.
After you install it run:
$ cordova prepare
All that is left is to enable Google Authentication inside Firebase, so go to your Firebase console, select your project, go to the authentication tab, and select sign-in methods, enable Google and use your REVERSED_CLIENT_ID
there.
First thing you need is to go to https://developers.facebook.com/apps and create a new app (or use your existing app), it will ask you to generate a new app id, click it, it will show you your app id.
You'll use those when installing the plugin:
$ ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
Replace the app ID and name inside the command.
Go back to your Facebook developers console and inside your app click on add platforms, create both android and iOS apps, in the ID input always put the package id we have in config.xml
.
Now go back to Firebase console and in sign-in methods enable Facebook authentication, it will ask you for app ID and Secret, you know where to find those now :)