Setting up Twitter authentication with Firebase

When setting up the quickstarter app with Firebase as the backend, you will have two authentication options:

• log in with a user name (email address) and password
• log in with a Twitter account

This is why, when running with Firebase, you will see two buttons in the login screen ("Login" and "Login with Twitter") and in the signup screen ("Signup" and "Login with Twitter").

(to see how this works, look at the code: src/js/app/auth/login/login.html, src/js/app/auth/login/login.ctrl.js, src/js/app/auth/signup/signup.html and src/js/app/auth/signup/signup.ctrl.js)

To set up the app for Twitter authentication, follow the steps outlined below.

If you want some background on how this works, here is a good blog article (the article explains how to use the Github authentication provider with Firebase and Ionic, but exactly the same principles apply to using the Twitter authentication provider):

http://blog.ionic.io/adding-social-login-with-firebase/

Setting up Firebase

We assume that you've already set up the app to use Firebase as the backend, as described in the following two pages:

https://github.com/leob/ionic-quickstarter/wiki/Firebase-configuration

https://github.com/leob/ionic-quickstarter/wiki/Dev-mode-and-production-mode-configuration

Next, you need to create a Twitter "application" to obtain the "App ID" and "Secret Key" that you will enter in the Firebase dashboard. The section "Configuring Your Application" on the following page explains how to do this:

https://www.firebase.com/docs/web/guide/login/twitter.html

When you've followed these steps correctly, you should then be able to log in with Twitter by clicking on the "Login with Twitter" button in the login or signup screen of the quickstarter app.

The "TwitterReauthentication" hack

The issue: the Twitter API misses a 'logout' option

http://stackoverflow.com/questions/34967563/reauthenticate-as-different-user-after-logout-using-ionic-and-firebase

https://groups.google.com/forum/#!topic/firebase-angular/yt8kzTEhLY8

http://stackoverflow.com/questions/1960957/twitter-api-logout

The solution: forcing Twitter re-authentication

http://stackoverflow.com/questions/1960957/twitter-api-logout/1972194#1972194

To configure a backend provider e.g. Firebase, edit the appropriate values in the config-base.json file (under src/js/config). The config-base.json file looks like this:

{
  "name": "app.config",
  "constants": {
    "APP": {
      "routerDefaultState": "app.auth.main.dash"
    },
    "FirebaseConfiguration": {
      "url": "https://your-firebase-app.firebaseio.com",
      "debug": false
    },
    "TwitterReauthentication": {
      "useReauthenticationHack": "false",
      "consumerKey": "TWITTER_CONSUMER_KEY",
      "consumerSecretKey": "TWITTER_CONSUMER_SECRET"
    }
  }
}