Torii: Ember.js Authentication Library

Ember Authentication
with Torii
http://github.com/vestorly/torii

Cory Forsyth
@bantic

201 Created
We build õ-age apps with Ember.js. We take
teams from £ to • in no time ﬂat.

Stickers!

http://vestorly.com
Vestorly is pioneering a content discovery app for professionals to
use for lead generation / to grow their biz organically

Torii
a traditional Japanese gate … [that]
symbolically marks the transition from the
profane to the sacred

How can we authenticate?
• Username + password
• Devise (user/pass, oauth via omniauth, etc)
• OAuth via facebook/twitter/github/linked-in
• Hybrid ﬂow (single-page app plus server actions)

Hybrid ﬂow
• HTTP Server serves Ember App (e.g. ember-rails)
Server serves HTML
with Ember App
<html>
…
<script>App.create()</>
…
<form action=‘/signin’>
…
user/pass
Server signs user in,
serves HTML w/
Ember App _and_
currentUser
<html>
…
<script>
App.create();
App.currentUser=!
“<% JSON .stringify(@user) %>”;!
</script>

Auth with session token
• Separate SPA and API
!
Ember app
posts user/pass to
api: /sessions
{token: token}
API validates user/
pass, generates and
returns session token
Ember app stores session
token and
adds session token as a
header to all future
API calls
user/pass
GET /protected_resource
header: token
API validates token to
look up session,
returns protected
resource

Devise
• It manages authentication state for you at the Rack
level
• What does Devise allow us to not think about?
• State — The What, not the How (“current_user?”)

Ember is a State
Machine
Torii helps manage state as a user moves through
authentication transitions
Torii is an abstraction of the concept of auth. Your auth
code does not need to focus on the How, only the What.

What does Torii not do?
• Torii is not a client-side Devise.
• Not a replacement for Ember Simple Auth
• Does not automatically give you 3rd party login
• Does not generate UI
• Does not make assumptions about server
endpoints

What does Torii do?
• Provides a set of primitives for authenticating
• Provides lightweight session management (opt-in)
• Provides a reusable pattern for client-side OAuth
ﬂows (easily add additional OAuth providers)
• Uniﬁes different auth options (user/pass, OAuth,
etc)

Torii Motivation
• Provide promise-based abstraction of messy
popup/redirect-based OAuth ﬂows
• Handle social login, traditional login (user/pass),
and connection of social accounts using the same
concepts
• Allow for more maintainable auth-related code

Torii’s Primitives
• Providers: Any 1st or 3rd party that can
authenticate
• Popup: Simplify the boilerplate of opening a popup
and reading its redirected data
• Adapters: Bridge between providers and session
• Session: Opt-in, state machine

Torii Primitive: Provider
• Responsible for obtaining proof of authentication/
authorization from a 1st or 3rd party (async)
• Can be as simple as POSTing user/pass to /api/
session and getting a session token
• Can also handle popup-based OAuth redirect ﬂow
• Torii Providers must only implement `open`

OAuth overview
• Register an app with a redirect url with the OAuth provider.
Provider gives a unique app id and app secret.
• Visit provider’s page, include your app id (“http://
provider.com/oauth?app_id=X”)
• User signs in at provider’s page, provider redirects user to
registered redirect url, includes query params with auth
data (“…?auth_code=ABC”)
• Your server reads the query params and uses the app
secret along with the auth code to exchange for an access
token aka “password” for the user.

Torii: OAuth Providers
redirects to
…/?auth_code=ABC132…

redirects to
Torii reads ‘auth_code’,
and closes popup

redirects to
and closes popup
this.get('torii').open('facebook-oauth2')!
.then(function(authData)){!
!// got the auth code!
});!

redirects to
and closes popup
• facebook-oauth2
• linked-in-oauth2
• google-oauth2
• oauth2-code base

Torii Primitive: Popup
redirects to
and closes popup
this.get('popup').open(url, keys)!
!// opens popup at `url`!
!// e.g. 'http://facebook.com/oauth'!
!
!// waits until popup reloads!
!// this app, and scans its url!
!// for `keys`!
!// e.g. ‘http://localhost:4200/?auth_code=X'!
// closes popup, resolves promise with: !
.then(function(data)){!
console.log(data.auth_code); // ‘X’!
});!

Torii Primitive: Popup
• adds application initializer
• detects it is in a popup
• calls `deferReadiness`
• reads keys from URL
• `postMessage`’s to window.open

Torii: Demo
Create a simple torii-provider for use against a
demonstration OAuth provider.
Demonstrate the torii popup reading keys off the URL.

Torii + OAuth: What else?
• Torii does not prescribe what to do once you’ve
received the code.
• Typically, you must complete a secret (aka server-
side) exchange with the 3rd-party provider to turn
the code into an access token
• Some providers (Facebook Connect, Foursquare)
will return to you an access token without a server-
side exchange

Torii Primitive: Adapter
• Torii Adapters are only used by the Torii Session
• Adapters are the glue/bridge between torii
providers and the session
• torii provider -> torii adapter -> session properties
• Subclasses must only implement `open`

Torii Primitive: Adapter
• Example uses for an adapter:
• POST auth information from Facebook to your
server to generate a new server-side session
• Decorate the client-side session with additional
properties
• Set an ajax preﬁlter that adds a header with the
session token to all future requests

Torii Primitive: Session
• Opt-in via torii conﬁguration `sessionServiceName`
• Injects ‘session’ property onto routes and
controllers
• Session is a state machine and a proxy
• isAuthenticated
• isOpening

Torii Primitive: Session
• Torii’s session is lightweight by design
• The session is a proxy for the adapter’s `open`
output
• Call `session.open(providerName, options)`

Torii: Demo
Opt in to the session, create a torii adapter

Torii is an ember-addon
• `ember new <app>`
• `npm install torii --save-dev`
• In routes: `this.get(‘torii’)`
• (opt-in to sessions and then:) `this.get(‘session’)`

What’s next for Torii?
• Torii-Provider ecosystem
• More conventions
• Session Management — more or less?
• Additional primitive/hooks for OAuth code
exchange
• Better Devise/omniauth compatibility

Cory Forsyth
@bantic
Torii: http://github.com/vestorly/torii
Vestorly: http://vestorly.com
201 Created: http://201-created.com/
Ember Simple Auth: https://github.com/simplabs/ember-simple-auth
See also:
ﬂickr credits: jpellgen

Torii: Ember.js Authentication Library

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (12)

Similar to Torii: Ember.js Authentication Library

Similar to Torii: Ember.js Authentication Library (20)

Recently uploaded

Recently uploaded (11)

Torii: Ember.js Authentication Library