Firebase Native google  facebook auth

Firebase Native google facebook auth

Native social logins with Firebase and Ionic3


Prabath Perera

Prabath Perera

Member since 2016


iOS, Android  
3 years ago
3 years ago

This started enables you to create Ionic3 Apps with firebase and native social logins. Native social login uses cordova facebook and google plugins instead of angularfire giving best possible single sign on experience. For any queries please email me on, [email protected]

Steps To Configure

1. Inside the project folder run below commands,

  • npm install
  • ionic cordova prepare
  • ionic cordova plugin add
  • ionic cordova platform add ios
  • ionic cordova platform add android

2. Login to Firebase Console and Create a new Project by clicking on "Add Project".

3. Click "Get Srtarted" on Authentication Section => "Setup Sign-in Method". Then enable Facebook and Google methods as shown.

Set your project name in "Project Public facing name".
Create a new facebook app. Set "App Id" and "App Secret". Also set facebook "Redirect URL" to highlighted.

4. Goto firebase "Project Sessings". Note "project Id"(a)

If you are building for iOS, "Add firebase to your iOS App". Bundle Id is, what you have put as "widget id" in your config.xml. In next step download "GoogleService-Info.plist" and note "REVERSED_CLIENT_ID"(b) from plist file.

If you are building for Android, "Add firebase to your Android App"

5. Open your config.xml and configure below.

  • Replace PROJECT_ID with firebace Project Id(a)
  • Replace AUTH_DOMAIN with firebase Authorized domain. this can be found in Authentication section.
  • Set value of REVERSED_CLIENT_ID with REVERSED_CLIENT_ID (b) got from step 4.
  • Set value of URL_SCHEME to bundle Id
  • Set value of APP_ID with facebook App Id
  • Set value of APP_NAME with facebook App name

All set, you are good to go