Ionic Social Login using Firebase

First Published: 1 June 2017
Updated on: 24 September 2018

Have you been able to use Ionic Social Login in the past? It used to be a lot harder because platforms like Firebase didn’t support social authentication for cordova based apps out of the box.

Today it’s much easier to use Ionic social login because Firebase added full cordova support for this in their 3.9.0 release (they just didn’t make a big announcement about it :P).

Today we’re going to see how to get social login working on Ionic, in this example we’ll use Google Sign-In, but feel free to just change the provider to whichever you like without much extra work on your part :-)

We’ll break the process into nine steps (Sounds like a lot, but only because I’m trying to make them as explicit as possible).

  • Add Firebase to your Ionic App.
  • Set up and Android app in Firebase Console.
  • Set up an iOS app in Firebase Console.
  • Enable Firebase Dynamic Links.
  • Enable Google Sign-In in the Firebase console (Or the provider you want to use).
  • Install the required plugins in your Cordova project.
  • Configure config.xml.
  • Handle the sign-in flow.
  • Common bugs and errors.

Ionic Social Login using Firebase

The first thing we want to do is to create a new Ionic app, for that, open your terminal, go to your selected folder, and type:

ionic start myApp blank
cd myApp

Feel free to change the app name to whatever you want. The new CLI will install everything you need. We’re not going to create any providers or extra pages in this project.

Step #1: Add Firebase to your Ionic App

After you create the Ionic app, your next step should be adding Firebase to it, and we’ll do that in two phases, first, install the Firebase package into your app

npm install firebase

NOTE: I’m using node 8 and npm 5 if you’re using previous versions add --save to that command, so firebase saves to package.json.

Once Firebase is installed, go into src/app/app.component.ts and initialize Firebase

import firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    firebase.initializeApp({
      apiKey: "Your Firebase Credentials Here",
      authDomain: "Your Firebase Credentials Here",
      databaseURL: "Your Firebase Credentials Here",
      projectId: "Your Firebase Credentials Here",
      storageBucket: "Your Firebase Credentials Here",
      messagingSenderId: "Your Firebase Credentials Here",
    });


    platform.ready().then(() => {...});
  }
}

That will allow communication between our Ionic app and our Firebase app if you don’t know where to get your credentials just go into your Firebase Console: https://console.firebase.google.com.

Once you’re there, pick the app you’ll be working with (Or create a new app), and inside that app, you’ll find your credentials.

Step #2: Set up the Android app in the Firebase Console

While you’re in the console, we’re going to set up our Android app, in the Overview section of your app, there’s a button that says “Add Android App,” you’re going to click it.

It’s going to ask for some information. You’ll just fill the first box, where it says Android Package Name, the package name is in your config.xml file

ionic social login android

<widget id="co.ionic.starter" ...>

Make sure you change the default to something more on-brand with you, also don’t add dashes or underscores to the name, we’ll be using this for both Android and iOS, and one of those platforms doesn’t accept underscores, and the other one doesn’t take dashes :P

After you add the package name you can add the other information the android set up box is asking and click next, until you hit the final page, then click finish.

You don’t need to download the google-services.json file, we won’t use it.

Step #3: Set up iOS app in Firebase Console

Repeat the same process for iOS, and the package name will go in the field that says iOS Bundle ID

ionic social login ios

Once you enter the information just click finish, don’t forget your iOS Bundle ID (It’s the same as your package name) because we’re going to use it later.

We need to set up dynamic links because the social provider uses a redirect function for authentication, and we need to be able to handle the redirect back to the application.

For this go into your Firebase console, go to the Dynamic Links setup, and create on adding a new link, follow the instructions and you’ll get a new link with the format kcw.app.goo.gl/qbvQ or something similar.

firebase dynamic links

Take note of this link; we’ll use it later in our config file.

Step #5: Enable Google Sign-In in the Firebase console

(Or the provider you want to use).

This should be very straightforward, just go into your Firebase Console, select the Authentication tab, then select providers, and pick the provider you want. Click enable and fill the information it asks you, note that depending on the provider you choose, you’ll need to get credentials, like Facebook app keys, Twitter API keys, etc.

Ionic Social Login Firebase

Step #6: Install the required Cordova Plugins

For this to work, we need to install five different plugins:

We need a plugin to pass application build info (app name, ID, etc. ) to the OAuth widget:

ionic cordova plugin add cordova-plugin-buildinfo --save

We need a plugin to handle Universal Links (Android app link redirects)

ionic cordova plugin add cordova-universal-links-plugin --save

We need a plugin to handle opening secure browser views on iOS/Android mobile devices

ionic cordova plugin add cordova-plugin-browsertab --save

We need a plugin to handle opening a browser view in older versions of iOS and Android

ionic cordova plugin add cordova-plugin-inappbrowser --save

We need a plugin to handle deep linking through Custom Scheme for iOS

ionic cordova plugin add cordova-plugin-customurlscheme --variable \
  URL_SCHEME=com.firebase.cordova --save

You’ll need to change com.firebase.cordova with the iOS bundle ID of your app (which is the same as the package name).

Step #7: Configure config.xml

Now we need to add some information to our config.xml file, add this bit of code:

<universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

And replace DYNAMIC_LINK_DOMAIN with the dynamic link we created in Step #4 then replace AUTH_DOMAIN for your apps auth domain, you can find that one inside the firebase.InitializeApp()

firebase.initializeApp({
  ...,
  authDomain: "Your Firebase Credentials Here",
  ...
});

Step #8: Handle the Signup Flow

To test that this is working, we’re going to create a button to log in with Google in our Home page, first, go to home.html and replace everything inside the <ion-content></ion-content> tags with:

<button ion-button block (click)="googleLogin()" *ngIf="!userProfile">
  GOOGLE LOGIN
</button>

<ion-card *ngIf="userProfile">
  <ion-card-header>
    {{ userProfile.email }}
  </ion-card-header>
  <ion-card-content> </ion-card-content>
</ion-card>

Ionic Social Login

We’re only showing the button if there’s no user profile, and if there is one, we’ll show the user’s email.

Now move into the home.ts file, where we’ll make magic happen, the first thing we’ll do is to import Firebase

import firebase from 'firebase';

Right before the constructor we’re going to create a userProfile variable, and then we’ll create an authentication observer to handle this variable:

public userProfile:any = null;
constructor(public navCtrl: NavController) {
  firebase.auth().onAuthStateChanged( user => {
    if (user) {
      console.log(user);
      this.userProfile = user;
    } else {
      console.log("There's no user here");
    }
  });
}

Then we’ll create the googleLogin() function our button is going to call, inside declare the provider we’ll use, in my case, it’s the Google provider, you might want to use something else:

googleLogin():void {
  const provider = new firebase.auth.GoogleAuthProvider();
}

Then we’ll call the signInWithRedirect() function and pass that provider:

googleLogin():void {
  const provider = new firebase.auth.GoogleAuthProvider();

  firebase.auth().signInWithRedirect(provider).then( () => {});
}

After the user signs in successfully (or if there’s an error), we need to handle the redirect response, we’ll use the getRedirectResult() method:

googleLogin():void {
  const provider = new firebase.auth.GoogleAuthProvider();

  firebase.auth().signInWithRedirect(provider).then( () => {
    firebase.auth().getRedirectResult().then( result => {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      console.log(token, user);
    }).catch(function(error) {
      // Handle Errors here.
      console.log(error.message);
    });
  });
}

Ionic Social Login Firebase Auth” alt=“ionic social login google” class=“aligncenter size-full wp-image-2948” width=“400” height=“711”>

You can do whatever you want inside that response, store credentials, redirect to another page, etc.

Step #9: Common Errors and Bugs

While creating this sign in flow, I ran into a few issues, some because I didn’t read the full docs, others because I ran out of coffee and was grumpy.

Read through them, so you don’t waste any time.

Redirect Method Killed my Activity

It can happen, if the app redirects for the signup flow and kills the previous activity your app will run again, in this use-case, you’ll need to handle the redirect as soon as the app fires back up.

For that just add the redirect handler to app.component.ts right after the Firebase initialization

firebase
  .auth()
  .getRedirectResult()
  .then(function(result) {
    if (result.credential) {
      var token = result.credential.accessToken;
      var user = result.user;
      console.log(token, user);
    }
  })
  .catch(function(error) {
    // Handle Errors here.
    var errorMessage = error.message;
    console.log(errorMessage);
  });

Remember that you can use that space to redirect users somewhere else.

ERROR Module not found: Error: Can’t resolve ‘promise-polyfill’

This will happen when you try to create a build to run the app on your phone, and it’s because later versions of Firebase don’t have the promise-polyfill package in their package.json listings. Easy fix, just type:

npm install promise-polyfill --save-exact

It will install the package and dismiss the error.

Could not find an installed version of Gradle either in Android Studio or on your system to install the Gradle wrapper

This is because latest versions of Cordova are missing Gradle, you just need to install Gradle through your system’s package manager, for example, I’m using Ubuntu 16.04 so for me it was just opening the terminal and

sudo apt-get install gradle

Just google “How to install Gradle in …” for your operating system.

Having iOS specific problems

Check out this comment

Next Steps

If you have any questions don’t forget you can always leave a comment below.

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.