Add Twitter Authentication to an Ember.js App with Torii

Torii is a lightweight authentication library for Ember.js. It supports various OAuth providers (such as Twitter, Google or FaceBook), and can be used to implement a pop-up-based OAuth redirect flow. It uses a session manager (for maintaining the current user), and adapters (to persist authentication state).

In this article I will demonstrate how to implement sign in with Twitter and how to handle user sessions with Torii. Twitter uses OAuth 1.0a for authentication, which doesn’t require much client-side setup (just the pop-up and the session management). It does however require a significant server-side component for which I will use Sinatra.

For those wishing to follow along, you can grab the code to accompany this article from GitHub.

Setting up an Application on Twitter

If you do want to follow along, you will also need to setup an application on Twitter. You can do this by going to http://apps.twitter.com, where you click on "Create New App". After that fill out your details making sure to enter http://127.0.0.1:9292 into the callback URL field (assuming you are testing locally).

Once you have created your app, you will be redirected to a page with your application's settings. Click the "Keys and Access Tokens" tab and make a note of your consumer key and your consumer secret.

Server Setup

This requires a little knowledge of how OAuth 1.0a works (if you would like a refresher, you can check out the documentation on Twitter’s website). It also requires a library that supports authentication with different OAuth providers. As we are using Sinatra, OmniAuth is an excellent choice (it is built upon Rack, so will work in pretty much any Ruby web application). If we were using Node, we could have opted for Passport instead.

Rather than walk you through the server set up, you can just grab a working copy of the app and boot it up yourselves. Here’s how:

git clone http://ift.tt/1AvWhsW cd torii-twitter-example

Then, in your terminal add your consumer key and your consumer secret to your environment

export TWITTER_KEY=twitter_key TWITTER_SECRET=twitter_secret

Run bundle to install any dependencies (assumes you have Ruby installed), then rake db:migrate to set up the database.

After that you need to build the Ember application:

cd public npm install && bower install ember build

Finally run rackup to start Sinatra and navigate to http://127.0.0.1:9292. If everything has gone as planned, you should be able to sign in to your new app using Twitter.

Note that the server endpoints are as follows:

Unauthenticated User:

• get '/auth/twitter': Starts a sign in flow, requests a token from Twitter, redirects user to Twitter for authentication.


• get '/auth/twitter/callback': Twitter authenticates and sends token here, server exchanges token for an access token and authenticates user.

Authenticated User:

• post '/logout': Clears user authentication.


• get '/users/me': Returns authenticated user info.

Now let’s use our app to look at how you might implement Torii in your own projects.

Install Torii

First, setup an Ember project with Ember CLI, and install Torii (ours is installed in the public folder):

[code]ember init npm install –save-dev torii[/code]

Configure a Provider

Next, add the Twitter provider and set requestTokenUri to the server endpoint where the flow starts: /auth/twitter. Also set the sessionServiceName: 'session' to setup the session manager.

config/environment.js ENV.torii = { sessionServiceName: 'session', providers: { 'twitter': { requestTokenUri: '/auth/twitter' } } };

Torii has several built-in providers, yet authoring your own is designed to be easy.

Continue reading %Add Twitter Authentication to an Ember.js App with Torii%

by Emre Guneyler via SitePoint