A few days ago I blogged about using the Ionic Auth service with the latest version of Ionic 2 ("An example of the Ionic Auth service with Ionic 2". One of my readers asked if I could update the example to make use of social login. I worked on that yesterday and have an updated example to share. Please be sure to read that previous post first so you have a bit of context on what we're building!

As I said, for this iteration of the demo, I'm going to use social login. While one app could support both social and "regular" login/registration, I thought it would make more sense to only support one or the other. So this version of the app completely removes the registration feature and just supports logging on with Facebook or Twitter. And I chose those two rather arbitrarily. The full list of supported social logins supported by Ionic also include Google, Instagram, LinkedIn, and GitHub.

For Facebook, I began by following the directions under "Native Login". The docs are a bit confusing at times because they no longer match (precisely) the 'flow' you get at Facebook when adding an application. I was able to work around it, but just remember that you're going to have to click around a bit differently than what the Ionic docs suggest. (I filed a bug report for this, but at the end of the day, external sites like this will change from time to time and I'd expect Ionic's docs to sometimes be a bit behind.) There is one major issue with this page though that I'll bring up in a moment.

Once you've followed these directions and installed the appropriate plugins, you can then start writing your code. I began by modifying the login page. I got rid of the accordion and just added two buttons:


<!--
  Generated template for the Login page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Login/Register</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    
  <button ion-button color="primary" full (click)="doFacebook()">
    <ion-icon name="logo-facebook"></ion-icon>&nbsp;&nbsp;
    Login with Facebook
  </button>
  <button ion-button color="primary" full (click)="doTwitter()">
    <ion-icon name="logo-twitter"></ion-icon>&nbsp;&nbsp;
    Login with Twitter
  </button>

</ion-content>

Note the use of icons in the buttons to make them fancy. Here's the updated UI:

Example

Each button is tied to a method to handle it's particular login. For the most part, this is rather simple. For example, here is the Facebook code:


  doFacebook() {
    console.log('do FB');
    this.facebookAuth.login().then(() => {
      this.navCtrl.setRoot(HomePage);
    });
  }

At that point the native code takes over. I'm using Genymotion on my laptop to test Android, and I'm not terribly happy with how this looks, but here it is in action.

Example

As I said, I don't think this is the best screen shot, but it does work well. I was able to login and then I was considered logged in by the Auth system. Here is where I ran into a serious doc issue. Once logged in, the app likes to greet you by name. In my previous version, when you registered I asked you for a name. Facebook certainly knows your name, but how do you get it? Turns out the other doc for Facebook login (http://docs.ionic.io/services/auth/facebook-auth.html), the one covering InAppBrowser, has a section on this, Social Data.

Basically you will find the data returned from Facebook under the user object in a social.facebook block.


constructor(public navCtrl: NavController, public user:User, public facebookAuth:FacebookAuth, public auth:Auth) {
  console.log(user);
  /*
   find the name based on how they logged in
   */
   if(user.social && user.social.facebook) {
     this.name = user.social.facebook.data.full_name;
   } else if(user.social && user.social.twitter) {
     this.name = user.social.twitter.data.full_name;
   } else {
     this.name = "Friend";
   }
}

And here it is - correctly recognizing my name:

I'm Ray

The last part to this was handling logout. Facebook requires slightly different code, so I've got a bit of logic to handle this. Notice that I could probably handle the "how did you login part" a bit nicer.


logout() {
   //switch based on social login, could be better
   if(this.user.social && this.user.social.facebook) {
     this.facebookAuth.logout();
   } else {
     this.auth.logout();
   }
   this.navCtrl.setRoot(LoginPage);
 }

So Twitter wasn't much more work. The login routine is simple:


doTwitter() {
	console.log('do Twitter');
	this.auth.login('twitter').then(() => {
    	this.navCtrl.setRoot(HomePage);
    });
}

And here is how it rendered the UI:

Twitter

And that's basically it. You saw above how I handled getting the name as well as how I handle logout. Frankly the most difficult part was the stuff outside of my Ionic code. In general, it feels like a simpler, easier solution than requiring a unique registration. You can find the complete source code for this version here:

https://github.com/cfjedimaster/Cordova-Examples/tree/master/ionicAuth2Social