Remember when setting up an auth system was easy? Me neither. From the signup form, the login form, password reset form, and all the validation in between it can easily take weeks if not months to get something basic up and running. Then you have to deal with all the security considerations. No thanks. During this presentation, the attendees will be introduced to OpenID and OAuth. They will learn how to leverage these technologies to create secure applications, but most importantly, they will learn why and how to delegate authorization and authentication so they can focus on their real work and forget about all that security stuff.

1. I Don’t Care About Security
And Neither Should You

2. @joel__lord
#SFNode
About Me
@joel__lord
joellord

3. @joel__lord
#midwestjs
About Me
@joel__lord
joellord

8. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

9. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

10. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

11. That reminds me of OAuth!

12. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

13. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

14. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

15. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

16. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

17. @joel__lord
#midwestjs
OAuth - Flows
Authorization Code

18. But Why?

19. Delegation!

20. Traditional
Applications
! Browser requests a
login page

21. Traditional
Applications
! Browser requests a
login page

22. Traditional
Applications
! Browser requests a
login page

23. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database

24. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
👍

25. Traditional
Applications
! Browser requests a
login page
! The server validates
on its database
! It creates a session
and provides a
cookie identifier

26. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application

27. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled

28. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing credentials
to connect to another
API

29. What’s wrong with
traditional auth?
! Multiple platforms
connecting to your
application
! Tightly coupled
! Sharing credentials
to connect to another
API
! Users have a
gazillion passwords
to remember, which
increases security
risks

30. OAuth

31. OAuth - The Flows
Authorization Code

32. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

33. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

34. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

35. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

36. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

37. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

38. OAuth - The Flows
Implicit Flow

39. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

40. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

41. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

42. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

43. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

44. @joel__lord
#midwestjs
Authentication Flows
Implicit Flow

45. Tokens 101

46. @joel__lord
#midwestjs
OAuth
Tokens
Access Token Refresh Token
! Give you access to a resource
! Controls access to your API
! Short lived
! Enables you to get a new token
! Longed lived
! Can be revoked

47. @joel__lord
#midwestjs
OAuth
Tokens
Refresh Token
! Enables you to get a new token
! Longed lived
! Can be revoked

48. @joel__lord
#midwestjs
OAuth
Tokens
Refresh Token
! Enables you to get a new token
! Longed lived
! Can be revoked

49. @joel__lord
#midwestjs
OAuth
Tokens
! WS-Federated
! SAML
! JWT
! Custom stuff
! More…

50. JSON Web Token
! Header
! Payload
! Signature
Header
{
"alg": "HS256",
"typ": "JWT"
}
Payload
{
"sub": "1234567890",
"name": "Joel Lord",
"scope": "posts:read posts:write"
}
Signature
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload), secret)

51. JSON Web Token
! Header
! Payload
! Signature
Header
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
Payload
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG
9yZCIsImFkbWluIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlY
WQgcG9zdHM6d3JpdGUifQ
Signature
XesR-pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

52. JSON Web Token
! Header
! Payload
! Signature eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMj
M0NTY3ODkwIiwibmFtZSI6IkpvZWwgTG9yZCIsImFkbWl
uIjp0cnVlLCJzY29wZSI6InBvc3RzOnJlYWQgcG9zdHM6d
3JpdGUifQ.XesR-
pKdlscHfUwoKvHnACqfpe2ywJ6t1BJKsq9rEcg

53. JSON Web Token
! Header
! Payload
! Signature
Image: https://jwt.io

54. Codiiiing Time!

55. Auth Server API
var express = require('express');
var Webtask = require('webtask-tools');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var jwt = require("jsonwebtoken");
var app = express();
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];
app.use(bodyParser.json());
app.post("/login", function(req, res) {
if (!req.body.username || !req.body.password) return res.status(400).send("Need
username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.status(200).send({token: token});
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
module.exports = Webtask.fromExpress(app);
var express = require('express');
var Webtask = require('webtask-tools');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];
app.use(bodyParser.urlencoded());
app.get("/login", function(req, res) {
var loginForm = "<form method='post'><input type=hidden name=callback value='" +
req.query.callback + "'><input type=text name=username /><input type=text name=password /
><input type=submit></form>";
res.status(200).send(loginForm);
});
app.post("/login", function(req, res) {
if (!req.body.username || !req.body.password) return res.status(400).send("Need
username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

56. @joel__lord
#midwestjs
Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

57. @joel__lord
#midwestjs
Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

58. @joel__lord
#midwestjs
Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

59. @joel__lord
#midwestjs
Auth Server
var express = require('express');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
var app = express();
// ...

60. @joel__lord
#midwestjs
Auth Server
// Requires ...
var users = [
{id: 1, username: "joellord", password: "joellord"},
{id: 2, username: "guest", password: "guest"}
];

61. @joel__lord
#midwestjs
Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

62. @joel__lord
#midwestjs
Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

63. @joel__lord
#midwestjs
Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

64. @joel__lord
#midwestjs
Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

65. @joel__lord
#midwestjs
Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

66. @joel__lord
#midwestjs
Auth Server
app.post("/login", function(req, res) {
// POST for login
if (!req.body.username || !req.body.password)
return res.status(400).send("Need username and password");
var user = users.find(function(u) {
return u.username === req.body.username && u.password === req.body.password;
});
if (!user) return res.status(401).send("User not found");
var token = jwt.sign({
sub: user.id,
scope: "api:read",
username: user.username
}, "mysupersecret", {expiresIn: "10 minutes"});
res.redirect(req.body.callback + "#access_token=" + token);
});

67. @joel__lord
#midwestjs
Auth Server
// Requires ...
var users = [...];
app.use(bodyParser.urlencoded());
app.post("/login", function(req, res) {
// POST for login
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
app.listen(8080, () => console.log("Auth server running on 8080"));}

68. @joel__lord
#midwestjs
API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

69. @joel__lord
#midwestjs
API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

70. @joel__lord
#midwestjs
API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

71. @joel__lord
#midwestjs
API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

72. @joel__lord
#midwestjs
API
var express = require('express');
var bodyParser = require('body-parser');
var randopeep = require("randopeep");
var expressjwt = require("express-jwt");
var app = express();

73. @joel__lord
#midwestjs
API
// Requires ...
var jwtCheck = expressjwt({
secret: "mysupersecret"
});

74. @joel__lord
#midwestjs
API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

75. @joel__lord
#midwestjs
API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

76. @joel__lord
#midwestjs
API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

77. @joel__lord
#midwestjs
API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
res.status(200).send(randopeep.clickbait.headline());
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
res.status(200).send(randopeep.clickbait.headline("Joel Lord"));
});
app.get('*', function (req, res) {
res.sendStatus(404);
});

78. @joel__lord
#midwestjs
API
// Requires and config ...
app.get("/headline", function(req, res) {
// Unprotected
});
app.get("/protected/headline", jwtCheck, function(req, res) {
// Protected
});
app.get('*', function (req, res) {
res.sendStatus(404);
});
app.listen(8888, () => console.log("API listening on 8888"));

79. @joel__lord
#midwestjs
Front-End
Add the headers

80. Live Demo
https://github.com/joellord/
secure-spa-auth0

81. Delegation!

89. Introducing OpenID Connect

90. @joel__lord
#midwestjs
OpenID Connect
! Built on top of OAuth 2.0
! OpenID Connect (OIDC) is to OpenID what
Javascript is to Java
! Provides Identity Tokens in JWT format
! Uses a /userinfo endpoint to provide the info

91. @joel__lord
#midwestjs
OpenID Connect
Scopes
! openid
! profile
! email
! address
! phone

92. @joel__lord
#midwestjs
OpenID Connect Flows
Authorization Code
scope=openid%20profile

93. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

94. @joel__lord
#midwestjs
Authentication Flows
Authorization Code

95. @joel__lord
#midwestjs
Authentication Flows
Authorization Code
/userinfo

96. @joel__lord
#midwestjs
OpenID Connect
Full flow
https://openidconnect.net

97. Delegation!

98. I Don’t Care About Security
@joel__lord
joellord
MidwestJS, Minneapolis, MN
August 10, 2018