Firebase Native google  facebook auth

Firebase Native google facebook auth

Native social logins with Firebase and Ionic3

Free!

Not yet rated
Prabath Perera

Prabath Perera

Member since 2016

Details

Version:
1.2
Size:
5mb
Ionic:
3.x
Platforms:
iOS, Android
Released:
6 years ago
Updated:
6 years ago
Category:
Starters
Tags:
firebase, social, facebook, google, native, cordova

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, dryize@gmail.com




Steps To Configure

1. Inside the project folder run below commands,

  • npm install
  • ionic cordova prepare
  • ionic cordova plugin add https://github.com/aramando/cordova-universal-links-plugin.git#35b3ed7e9a0310b12f1ac92a5159b21ce50eee57
  • 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

Hey there! You'll need to log in before you can leave a comment here.

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

How do I get the REVERSED_CLIENT_ID ? You have not made this very clear at all :(

Prabath Perera

Prabath Perera   ·   6 years ago

When you add ios app, you will get a button to download GoogleService-Info.plist. Open it, and you'll find the REVERSED_CLIENT_ID. I'll add another screenshot for clarity

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

Thank you, that was very helpful :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

How do I get the REVERSED_CLIENT_ID ? You have not made this very clear at all :(

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pixies.inc

Pixies.inc   ·   6 years ago

Hi, could this work without universal link apps plugin? I mean, removing ul_web_hooks and the plugin?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Pixies.inc

Pixies.inc   ·   6 years ago

Hi, could this work without universal link apps plugin? I mean, removing ul_web_hooks and the plugin?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

How do I get the REVERSED_CLIENT_ID ? You have not made this very clear at all :(

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

How do I get the REVERSED_CLIENT_ID ? You have not made this very clear at all :(

Prabath Perera

Prabath Perera   ·   6 years ago

When you add ios app, you will get a button to download GoogleService-Info.plist. Open it, and you'll find the REVERSED_CLIENT_ID. I'll add another screenshot for clarity

Scott D'Arcy

Scott D'Arcy   ·   6 years ago

Thank you, that was very helpful :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

There are no ratings for this starter yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}