Meteor-React-Ionic Mobile App Part 5: Twitter Login

4 min readAug 8, 2015

The last three parts were about integrating Meteor’s user accounts system, but a lot of apps integrate with other services like Twitter, Facebook, etc. We’re going to use Twitter in this example. Fortunately, Meteor makes this super easy!

We’re going to start off where Part 4.2 left off, with a settings view, modals, and logout(). You can either clone the repo or read the previous three articles, Part 1, Part 4.1, and Part 4.2.

When you’re done, your app should look like the one to the left.

This should only take about 5 minutes if you start from the Part 4.2 template.

Step 1

Thankfully, Meteor makes Twitter login easy. First, let’s remove accounts-password since we won’t be using the Meteor accounts system, then we’ll add accounts-twitter and service-configuration:

$ meteor remove accounts-password
$ meteor add accounts-twitter
$ meteor add service-configuration

Now you need to go to dev.twitter.com and go to “Manage Your Apps”.

Create your app, then go to “Keys and Access Tokens”. You’ll want to keep track of your Consumer Key and Consumer Secret. In fact, we’re going to use a Meteor best practices here and store them a settings.json file so that you don’t have to expose your keys in a public repository.

Step 2

Create two files in your root directory: .gitignore and settings.json. Within .gitignore, add:

settings.json

This will make sure that git does not keep track of your settings.json file so you don’t expose your keys in a public git repo. If you want to push your settings.json file to your git repo, don’t bother with .gitignore.

Within settings.json, add the following code, replacing the information in <…> with the keys you got from Twitter:

{
  "public": {
    "twitter": {
      "consumerKey": <CONSUMER KEY>
    }
  },
  "twitter": {
    "consumerSecret": <CONSUMER SECRET>
  }
}

In this file, anything in “public” is available to the client, while anything else is only available on the server.

NOTE: Now that you have your keys in a settings.json file, when you start meteor, you must use the following command or your app will not work:

$ meteor --settings settings.json

Step 3

Now we need to get rid of some of the extra code from the accounts-password package. First let’s get rid of the stuff that will break our app. In server.jsx, remove:

if (Meteor.users.find().count() === 0) {
  Accounts.createUser({
    username: "samcorcos",
    password: "password",
    profile: {
      image: "http://i.imgur.com/NqyBZSp.gif"
    }
  })
}

And while you’re at it, change this line of code to:

...
img, div {
...

Step 4

The next step is configure Twitter login on your server. You can do this by adding the following code to your server.jsx file, which will remove any previous configuration and add a new configuration. We’re going to launch Twitter login as a popup:

Meteor.startup(function() {
  ServiceConfiguration.configurations.remove({
    service: "twitter"
  });
  ServiceConfiguration.configurations.insert({
    service: "twitter",
    consumerKey: Meteor.settings.public.twitter.consumerKey,
    loginStyle: "popup",
    secret: Meteor.settings.twitter.consumerSecret
  });
})

Now we need to change our NotLoggedIn component to log in with Twitter. Change your NotLoggedIn component to the following:

NotLoggedIn = React.createClass({
  login() {
    Meteor.loginWithTwitter()
  },
  render() {
    return <a onClick={this.login}>Login</a>
  }
})

This will launch the Twitter login popup when you click “Login”. You now have functional Twitter login! But we should connect a few more things first.

Step 5

Let’s connect the user’s profile image. Within our Profile component, we need to change the information within our login-wrapper to fit the new schema of our user profile. We’re also going to replace “_normal” with an empty string because we want the highest resolution profile image (it defaults to “_normal”):

...
<div className="image-wrapper">
  {loginStatus ? <img src={this.data.user.services.twitter.profile_image_url.replace("_normal", "")} /> : <div></div>}
</div>
...

And there you have it! You have access to all your Twitter user information through Meteor.user(), just as before.

Sam Corcos is the lead developer and co-founder of Sightline Maps, the most intuitive platform for 3D printing topographical maps, as well as LearnPhoenix.io, an advanced tutorial site for building scaleable production apps with Phoenix and React.