Hi everyone, in the previous post we talked about "Facebook login with Ionic and Firebase"; assuming you already know a bit about Firebase and how to configure it in your ionic app "Quick Start with Ionic + Firebase", let's see how to setup Google login.

Head over to the Firebase console - Authentication ► Sign-In Method, and enable Google. Take note of your Web client ID under Web SDK configuration.

Open your environment or config file following this sample: src/environment/environment.ts and set in your googleWebClientId.

export const googleWebClientId: string = '525845878170-4nkapa764tg54c7ub4dqeroj56dumukk.apps.googleusercontent.com';

Retrieve your app's package name by opening config.xml in the root directory of the app.

<widget id="com.ionictheme.fireionic" version="1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

Head over to the Firebase console and add an iOS app. Place in your package name on the Bundle ID. Afterwards, download GoogleService-Info.plist and place it on the root directory of the app.

Open GoogleService-Info.plist, and take note of REVERSED_CLIENT_ID.

<key>REVERSED_CLIENT_ID</key> <string>com.googleusercontent.apps.525845878170-4dop9a51gj1agc11rk9sv50ksepkklnc</string>

Proceed then by installing cordova-plugin-googleplus, by calling the following command:

ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=REVERSED_CLIENT_ID npm install @ionic-native/google-plus --save

**Note: If you followed the Facebook Login setup here --> Facebook login with Ionic and Firebase, you will have already added an Android app on Firebase.

Now we have configured with success our Google Login and ready to use in your Ionic project.

In the next post we will show how to do authentication with Twitter Login! See you all soon.

See Also

fireIonic - Ionic 3 Firebase Starter Kit