-
Notifications
You must be signed in to change notification settings - Fork 25
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/
NOTE:
If the user logs in through Twitter login, the user's Twitter profile image will automatically be used as the profile image, so if you go to the user's profile page (menu option "User Profile" in the app's side menu), you will see that the user's Profile Image is automatically taken from the user's Twitter profile image, and can not be edited.
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 previous steps are sufficient to set up the app with Firebase Twitter authentication. This section describes an optional step, the "re-authentication" hack, which you may or may not want to apply, as it has some drawbacks (see below).
While testing Twitter login, I ran into some behavior that (for me at least) was not really intuitive.
The first time when the user clicks on the "Login with Twitter" button, he/she is redirected to Twitter's login dialog, and needs to enter his/her Twitter handle and password. If the user enters correct credentials, he/she is then redirected back to the app (via Firebase's server), and is now logged in.
When logging out of the app, the Firebase "unauth" method is called. This invalidates the Firebase login session, but NOT the Twitter OAuth session. The app now shows to the user that he/she is logged out.
However, when the user clicks on "Login with Twitter" again, the user is redirected to Twitter but does NOT have to enter his/her Twitter credentials (handle and password) anymore - the user is redirected back automatically and is now again "logged in" into the app, without having to enter anything.
The reason for this is that the Firebase authentication session is invalidated but not the Twitter OAuth session. This behavior is "by design", as explained on the following pages:
https://groups.google.com/forum/#!topic/firebase-angular/yt8kzTEhLY8
http://stackoverflow.com/questions/1960957/twitter-api-logout
While this behavior may be "by design", to me it was not really intuitive or user friendly. What if a user has more than one Twitter account and wants to log out and then log in again with the other Twitter account? This would currently not be possible.
When searching for a solution, I discovered that there does not exist a "logout" option in the Twitter API.
However it is possible to simulate a "logout" by trying to authenticate with Twitter using the "force_login" option, and then aborting the authentication operation. This will effectively invalidate Twitter's OAuth session. See this post for a description of the solution:
http://stackoverflow.com/questions/1960957/twitter-api-logout/1972194#1972194
To activate the "re-authentication hack", follow the steps below.
NOTE: the "re-authentication hack" works only on a device (ionic run or ionic build), because it depends on Cordova - it will not work in a browser (ionic serve).
NOTE: the "re-authentication hack" will potentially expose you to a security risk because you're embedding your Twitter API key and Twitter API secret in the app's source code. A hacker can, in principle, extract the keys from the app's source code (even when the code is minified).
To activate the "re-authentication hack", open the config-base.json file (under src/js/config), and edit the "TwitterReauthentication" section, which looks like this:
{
................
"TwitterReauthentication": {
"useReauthenticationHack": "false",
"consumerKey": "TWITTER_CONSUMER_KEY",
"consumerSecretKey": "TWITTER_CONSUMER_SECRET"
}
}
}
Edit the values as follows:
- Change
"useReauthenticationHack": "false"to"useReauthenticationHack": "true" - Replace TWITTER_CONSUMER_KEY by the same consumer key which you configured in the Firebase dashboard
- Replace TWITTER_CONSUMER_SECRET by the same consumer secret which you configured in the Firebase dashboard
Test if the 'hack' works by logging out and then logging in with Twitter (on a device, as this does not work in a browser). Repeat this once (or as many times you like) and verify that now you need to re-enter your Twitter credentials.