A Social Example of Ionic Auth

A Social Example of Ionic Auth

This post is more than 2 years old.

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

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Michael Burdett posted on 11/23/2016 at 2:06 PM

oh man, I struggled with this for 5 days, and gave up now you have it working =) can you just download or clone your brain and let me have a copy?.... three times this year I've found myself on you site as I'd hit a brick wall. This is me trying to say thanks :)

Comment 2 (In reply to #1) by Raymond Camden posted on 11/23/2016 at 2:21 PM

You are most welcome - glad this was helpful!

Comment 3 (In reply to #2) by Michael Burdett posted on 11/25/2016 at 9:05 AM

Hello again Mr Camden, I seek your wisdom - I'm sure I'm missing something obvious but how/where would you store extra/meta-data and link it to the user? For example, you want to store data such as "Date, Time and Distance" - how would you personally store it? I see that Facebook returns 'uid' so we could use that to post data but where could we store the data (online, not local) - if we used Firebase why use the Ionic social Auth at all. Just after your opinion on the matter if you have the time - Thanks! =)

Comment 4 (In reply to #3) by Raymond Camden posted on 11/25/2016 at 2:30 PM

You can store any custom data you want - on the Ionic side. See the docs here: http://docs.ionic.io/servic...

As for your Firebase question, I don't have an answer. I don't use Firebase yet. I've been hoping to play with it sometime soon. In general, as an Ionic person, I can see giving preferneces to Ionic's services too.

Comment 5 by sridhar vennela posted on 12/31/2016 at 12:10 AM

How can we integrate this with firebase?

Comment 6 (In reply to #5) by Raymond Camden posted on 12/31/2016 at 3:51 PM

I haven't used Firebase yet so I can't comment.

Comment 7 by mash kaponde posted on 1/14/2017 at 4:52 PM

Thanks great tutorial. How can i access your sample code.

Comment 8 (In reply to #7) by Raymond Camden posted on 1/14/2017 at 5:00 PM

The very last line of the article is the GitHib repo. :)

Comment 9 by Abdo posted on 1/23/2017 at 1:32 AM

Hi Sir,

I seem to be doing something silly for the facebook integration, I followed the instructions but when I upload it and try to test it using ionic view the button is dead (doesn't load up anything) except for the console.log('do FB');

I am trying it with an android phone I even created the hash key

Comment 10 (In reply to #9) by Raymond Camden posted on 1/23/2017 at 12:31 PM

In the docs, they explain you have to add a plugin. Ionic View only supports a subset of plugins, and that one may not be supported. Check the Ionic View docs.

Comment 11 (In reply to #10) by Abdo posted on 1/24/2017 at 8:09 AM

Thanks for that Ray, I have been hacking away with it last night and I am trying to now use the InAppBrowser example but for both twitter and facebook getting the "inappbrowser missing plugin". I have tried Ionic View, downloading and installing the ionic debug apk and even using plugins like Ripple.

I have limited time to work on this but will retry to get it working tonight :)

Comment 12 (In reply to #11) by Raymond Camden posted on 1/24/2017 at 2:49 PM

Dumb question - but did you install the plugin?

Comment 13 (In reply to #12) by Abdo posted on 1/24/2017 at 9:19 PM

Yep I had. I have managed to resolve my silly problem which was adding this line again cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="" --variable APP_NAME="" ... Originally When I set this up I accidentally deleted my app via ionic view and when I recreated it I forgot this step!

Comment 14 (In reply to #13) by Raymond Camden posted on 1/24/2017 at 9:26 PM

Cool - glad you got it!

Comment 15 by abdo abdulrehman posted on 1/26/2017 at 8:46 PM

Hi Ray,

After I do logout(), my data seems to be caching and if I attempt to login as a different user/account I am still greeted as previously. On Ionic View I have to manually refresh the page and then it displays correct name. I have tried different options and according to some blogs - this.nav.setroot() should've worked but it hasn't. I also tried localStorage.clear(). Is there anything like $ionicHistory.clearHistory()
$ionicHistory.clearCache() for ionic2?

Comment 16 (In reply to #15) by Raymond Camden posted on 1/26/2017 at 10:17 PM

Looking into this now. Unfortunately the app is being cranky under Ionic2 (it was built with an earlier version).

Oh wait - Ionic View? Yeah, you can't use that for this demo. It made use of the native plugin for Facebook login. That's not supported by Ionic View.

Comment 17 (In reply to #15) by Raymond Camden posted on 1/26/2017 at 10:51 PM

As just an FYI, testing w/ Twitter, I logged in as two people, and it did not cache my name.

Comment 18 (In reply to #16) by abdo abdulrehman posted on 1/28/2017 at 11:08 PM

Hi Ray, My issue was related to how my app was setup (different pages to social and custom login) also the page that was displaying the name of the logged in user was the app.html. After spending a little time going through ionic docs I found what I needed was to setup Ionic2 events which works perfectly. http://ionicframework.com/d...

Comment 19 (In reply to #18) by Raymond Camden posted on 1/29/2017 at 4:00 PM

I'm glad you figured it out.

Comment 20 by Onur posted on 3/5/2017 at 4:16 PM

Hi,
Is it possible to get consumer key and token_secret while logging in through twitter ?

Comment 21 (In reply to #20) by Raymond Camden posted on 3/6/2017 at 7:34 PM

I filed a bug for this ages ago - is it not done yet?

Comment 22 (In reply to #21) by Raymond Camden posted on 3/6/2017 at 7:40 PM

Unfortunately, I can't seem to find my bug. I know I (or someone else) reported the issue.

Comment 23 (In reply to #22) by Raymond Camden posted on 3/6/2017 at 7:45 PM

So this is the issue:

https://github.com/driftyco...

I honestly don't remember if the Social object has the info.

Comment 24 by ANuj posted on 6/8/2017 at 6:00 AM

when i am using this i am facing issue ionic Cannot find module "ionic-native" when i use (public auth: Auth, public user: User) in constructor . have asked question on stack https://stackoverflow.com/q... .. please give me some solution

Comment 25 (In reply to #24) by ANuj posted on 6/8/2017 at 6:29 AM

this is my updated question https://stackoverflow.com/q...