This document discusses authentication and authorization in Ember applications using the Torii library. It begins with an overview of authentication and authorization concepts. It then introduces Torii as a library that simplifies obtaining OAuth credentials from third-party providers and managing authentication state. The document provides examples of using Torii to handle the OAuth implicit grant flow, authorization code flow, and social login flows. It also discusses Torii's use of providers, adapters, and sessions to manage authentication.

1. Ember Auth* with Torii

2. Cory Forsyth
@bantic

3. 201 Created
Consultants in NewYork City

4. Cory Forsyth
@bantic

5. A tale of two Auths
• What is authentication?
• Who are you?
• What is authorization?
• What are you allowed to do?

6. Auth*
• Authentication can imply authorization
• Since you successfully logged in, you can use
the system
• Authorization may require authentication
• Until I know who you are (authentication), I don’t
know what you’re allowed to do

7. Auth*
• Authentication and Authorization require context
to be meaningful
• You can authenticate with one site, but be
unauthenticated in the context of another site
• You can be authorized by a site to perform an
action
• You can authorize a client to perform an action
for you

8. What is Torii?
“A set of clean abstractions for authentication in Ember.js”
Original work sponsored by

9. Torii
a traditional Japanese gate that
symbolically marks the transition from the
profane to the sacred

10. Torii:
• Designed to:
• Make it simple to obtain authorization credentials
from 3rd-party OAuth providers
• Support use-cases beyond simply log-in
• Provide simple building blocks for auth*, be
flexible

11. Torii ♥ OAuth
• Simplifying the process of obtaining OAuth
credentials is Torii’s core goal
// Set up:
// Create OAuth app at <providerName>.
// Modify ember-cli app config.
// in app:
this.get(‘torii').open(<providerName>)
// torii magic happens
.then(authData => {
// use authData
})

12. Torii ♥ OAuth// Set up:
// Create OAuth app at <providerName>.
// Modify ember-cli app config.
// in app:
this.get(‘torii').open(<providerName>)
// torii magic happens
.then(authData => {
// use authData
})
Use OAuth credentials to:
• Connect user account to 3rd parties
• Authenticate*, log in user

13. Torii Features
• Other Torii features:
• Session management
• Router DSL for authenticated routes
• Torii providers not limited to OAuth

14. Torii primitives
• Providers (required)
• Adapters (optional)
• Session service (optional)

15. Torii Providers
• Interface with OAuth provider or other service
capable of providing auth* information
• Manage the complexity of redirect-based OAuth
flows
• Some built-in providers:
• Google, Facebook, Github, LinkedIn, Stripe

16. Torii Providers
Methods: `open`
Returns: promise
Purpose
obtain authorization or
authentication
credentials

17. Torii Adapters
• Adapters
• Process the authorization data from providers
• E.g. Exchange OAuth credentials to authenticate
user
• E.g. Hit endpoint to get current user from user token
• Persist authentication state
• Must be used with the Torii session service

18. Torii Adapters
Methods: `open` `fetch` `close`
Returns: promise promise promise
Purpose
use provider’s
auth* data to
authenticate
user, persist
authn state
determine if
user is logged
in
sign user out,
delete
persisted
authn state

19. Torii Session
• Session service is injected onto routes and
controllers
• Is a state machine
• Has `isAuthenticated`, `isWorking`, `currentUser`
and some other properties

20. Torii Flows Examples
Ember App
code
torii.open(‘google-oauth2-bearer’).
.then(authData => {
// authData contains access_token
});
Provider
uses app config info to open popup with
correct URL, resolves promise with authData
Adapter Not used
Session Not used
Your back-end
server
Not used
Get access_token from Google via implicit grant

21. Torii Flows Examples
Ember App
code
torii.open(‘google-oauth2’).
.then(authData => {
// authData has authorizationCode
// POST code to back-end
}).then(access_token => { … });
Provider
uses app config info to open popup with
correct URL, resolves promise with code
Adapter Not used
Session Not used
Your back-end
server
Posts code (& client secret, etc) to google.
Google responds with access_token.
Back-end responds with access_token.
Get access_token from Google via authorization code grant

22. Torii Flows Examples
Ember App
code
session.open(‘google-oauth2’).then(() => {
// session.isAuthenticated,
// session.currentUser is present
})
Provider same as previous google-oauth2 authorization code flow
Adapter
(user-created) torii google-oauth2 adapter’s `open` method is
called with auth code. POSTs code to back-end, receives user
data, stores user id in localStorage, resolves with user data
Session
Look up adapter by name (‘google-oauth2’).
Call `provider.open`, pass result to `adapter.open`
Store result of adapter.open on session
Transition state to `isAuthenticated`
Your back-end
server
Exchange code for access_token from google (same as
previous flow)
Make authorized request to google for user info.
Use user info to log in.
Respond with current user data.
Social login with Google

23. OAuth
a short intro

24. OAuth
• An Authorization framework
• Canonical example:
• User wants to print photos
• Photos are stored at my-pix.com
• User grants authorization to print-me.com to access
photos at my-pix.com
• Solves the “share my password” anti-pattern

25. OAuth
• 1.0:
• Uses cryptographic signatures, server-to-server communication
• 2.0:
• Includes “implicit grant” (front-end only) flow
• Includes “authorization code grant” flow
• No signatures (encrypted https communication only)
• Both:
• redirection-based flows

26. OAuth Love Triangle
Resource Owner
(user)
Resource /
Authorization
Server
(my-pix.com)
Client
(print-me.com)
visits1 directs browser to2
consent screen
3
redirects to,
with authz in url
4

27. OAuth Love Triangle
User e.g. Google+
your ember app
visits1 opens popup to2
consent screen
3
redirects to,
with authz in url
4

28. OAuth Love Triangle
user e.g. Google+
your ember app
visits1 opens popup to2
consent screen
3
redirects to,
with authz in url
4
Torii Provider’s responsibility

29. Torii Provider
4
• “opens popup to” authorization endpoint
• Torii builds URL:
• Detects redirect from Ember App
• reads params from window.location.hash
• closes popup, resolves existing `open` promise
user e.g. Google+
your ember app
visits1 opens popup to2
consent screen
3
redirects to,
with authz in url
https://accounts.google.com/o/oauth2/auth
?scope=X&state=Y&client_id=Z…
http://localhost:4200/#code=xyz
http://localhost:4200/#access_token=xyz

30. Challenges of OAuth
• OAuth 2.0 is vague — parameter names and responses
vary between providers
• Torii mitigates this by allowing providers to describe
what parameters they use
• Torii providers generate the correct URL for the popup
• Maintaining state through url redirection is hard for SPAs
• Torii uses a popup service and redirect handler so that
your app code only sees a single promise resolving with
the auth data

31. OAuth
• From Torii Provider perspective, “implicit” and
“authorization code” grant flows are same
• Difference is: resulting value (code or access_token)
• access_token: Used for API requests
• code: Must be exchanged by back-end for
`access_token`, not useful on its own
• code may be exchanged for `refresh_token`

32. Torii Walk-Through:
Implicit/Bearer Flow

33. Torii Flows Examples
Ember App
code
torii.open(‘google-oauth2-bearer’).
.then(authData => {
// authData contains access_token
});
Provider
uses app config info to open popup with
correct URL, resolves promise with authData
Adapter Not used
Session Not used
Your back-end
server
Not used
Get access_token from Google via implicit grant

34. Google+ access_token
• Code: http://bit.ly/torii-demo-1
1. Create app w/ Google
2. Set up configuration for ‘google-oauth2-bearer’ provider
3. `torii.open(‘google-oauth2-bearer’).then( token.. )`
• Possible next steps:
• pass token to your back-end to use
• use token to retrieve user or other info from API

35. Create app with Google
http://bit.ly/torii-demo-1

36. Create OAuth2 Creds
http://bit.ly/torii-demo-1

37. Create OAuth2 Creds Pt 2
http://bit.ly/torii-demo-1

38. Create OAuth2 Creds Pt 3
http://bit.ly/torii-demo-1

39. Torii Walk-Through:
Authorization Code Flow

40. Torii Flows Examples
Ember App
code
torii.open(‘google-oauth2’).
.then(authData => {
// authData has authorizationCode
// POST code to back-end
}).then(access_token => { … });
Provider
uses app config info to open popup with
correct URL, resolves promise with code
Adapter Not used
Session Not used
Your back-end
server
Posts code (& client secret, etc) to google.
Google responds with access_token.
Back-end responds with access_token.
Get access_token from Google via authorization code grant

41. Google+ authorization code
• Ember code: http://bit.ly/torii-demo-2
• Backend code: http://bit.ly/torii-demo-backend
1. Same setup as before but configure ‘google-oauth2’ provider
2. `torii.open(‘google-oauth2’).then( code… )`
3. Must exchange code for access_token
• Possible next steps:
• store access_token, refresh_token at back-end
• use token to retrieve user or other info from API

42. Torii Walk-Through:
Social Login

43. Torii Flows Examples
Ember App
code
session.open(‘google-oauth2’).then(() => {
// session.isAuthenticated,
// session.currentUser is present
})
Provider same as google-oauth2 authorization code grant flow
Adapter
(user-created) torii google-oauth2 adapter’s `open` method is
called with auth code. POSTs code to back-end, receives user
data, stores user id in localStorage, resolves with user data
Session
Look up adapter by name (‘google-oauth2’).
Call `provider.open`, pass result to `adapter.open`
Store result of adapter.open on session
Transition state to `isAuthenticated`
Your back-end
server
Exchange code for access_token from google (same as
previous flow)
Makes authorized request to google for user info.
Use user info to log in.
Respond with current user data.
Social login with Google

44. Torii Social Login
• Code: http://bit.ly/torii-demo-3
• Same setup as authorization code, then
1. Add session service
2. Create application torii-adapter with `open`, `close`, `fetch` methods
3. Add `authenticatedRoute` routes
4. Add `signIn`, `signOut` action
• Update backend
• Add /sign-in-with-authorization-code endpoint
• Add “check login status” endpoint
• Add “sign user out” endpoint

45. Wrap-up

46. Torii notes
• Use Torii providers within ember-simple-auth via
`ToriiAuthenticator`
• Write your own Torii provider to exchange user/
password credentials with your backend for access
token
• Contributions welcome!

47. What’s next for torii?
• OpenID Connect support via Albert-Jan Nijburg
• OpenID Connect is an authentication protocol
built on top of OAuth, adds `id_token`
• Fixes security vulnerabilities with using OAuth for
authentication
• iframe service via Jeremy Green
• ember-cli addon

48. Thanks
@bantic
Links
• Torii: https://github.com/vestorly/torii
• OAuth 2 explanation
• Authentication with Torii from @MattDangerEddy
• OAuth 2.0 Authorization Code Grant Spec
• OAuth 2.0 Implicit Grant Spec
• ember-simple-auth
• Curated links
Image Credits
• https://www.flickr.com/photos/jpellgen/
• https://upload.wikimedia.org/wikipedia/commons/d/d1/-_Padlock_-.jpg
• https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Oauth_logo.svg/1021px-Oauth_logo.svg.png