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
#CoderCruise
About Me
@joel__lord
joellord

8. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

9. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

10. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

11. That reminds me of OAuth!

12. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

13. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

14. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

15. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

16. @joel__lord
#CoderCruise
OAuth - Flows
Authorization Code

17. @joel__lord
#CoderCruise
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
#CoderCruise
Authentication Flows
Authorization Code

33. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

34. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

35. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

36. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

37. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

38. OAuth - The Flows
Implicit Flow

39. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

40. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

41. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

42. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

43. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

44. @joel__lord
#CoderCruise
Authentication Flows
Implicit Flow

45. Tokens 101

46. @joel__lord
#CoderCruise
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
#CoderCruise
OAuth
Tokens
Refresh Token
! Enables you to get a new token
! Longed lived
! Can be revoked

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

49. @joel__lord
#CoderCruise
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
#CoderCruise
Front-End
Add the headers

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

81. Delegation!

89. Introducing OpenID Connect

90. @joel__lord
#CoderCruise
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
#CoderCruise
OpenID Connect
Scopes
! openid
! profile
! email
! address
! phone

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

93. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

94. @joel__lord
#CoderCruise
Authentication Flows
Authorization Code

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

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

97. @joel__lord
#CoderCruise
OpenID Connect
In Action

98. Delegation!

99. I Don’t Care About Security
@joel__lord
joellord
CoderCruise, The Bahamas
September 1st, 2018