Almost Everything You Ever Wanted to Know About Web Authentication in Node

Everything You Ever Wanted to Know About Web Authentication in
Node @rdegges *Almost

I’m Randall Degges Run Developer Advocacy at Okta Python /
Node / Go Hacker

The Journey

REGISTER LOGIN DASHBOARD

0x00 - Getting Set Up

Assumptions Node https://nodejs.org/en/ Mongo https://www.mongodb.com/

Install Dependencies $ npm install express $ npm install pug

Prepare the App $ mkdir views $ touch server.js $
touch views/base.pug $ touch views/index.pug $ touch views/register.pug $ touch views/login.pug $ touch views/dashboard.pug

Create Basic Templates ➔ Home ➔ Register ➔ Login ➔
Dashboard

block vars doctype html html head title SS-Auth | #{title}
body block body <!DOCTYPE html> <html> <head> <title>SS-Auth | </title> </head> <body> </body> </html> ➔ views/base.pug

extends base block vars - var title = "Home" block
body h1 SS-Auth! p. Welcome to the SS-Auth! Please #[a(href="/register") register] or #[a(href="/login") login] to continue. ➔ views/index.pug

extends base block vars - var title = "Register" block
body h1 Create an Account form(method="post") span First Name: input(type="text", name="firstName", required=true) br span Last Name: input(type="text", name="lastName", required=true) br span Email: input(type="email", name="email", required=true) br span Password: input(type="password", name="password", required=true) br input(type="submit") ➔ views/register.pug

extends base block vars - var title = "Login" block
body h1 Log Into Your Account if error p ERROR: #{error} form(method="post") span Email: input(type="email", name="email", required=true) br span Password: input(type="password", name="password", required=true) br input(type="submit") ➔ views/login.pug

extends base block vars - var title = "Dashboard" block
body h1 Dashboard p. Welcome to your dashboard! You are now logged in. ➔ views/dashboard.pug

Create Basic Web App ➔ Define Routes ➔ Render Templates
➔ Start Server

$ node server.js Create Basic Templates

0x01 - Forms

<form method="post"> First Name: <input type="text" name="firstName" required/> Last Name:
<input type="text" name="lastName" required/> Email: <input type="email" name="email" required/> Password: <input type="password" name="password" required/> <input type="submit"/> </form> You know... HTML!

$ npm install body-parser // server.js const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false })); app.post("/register", (req, res) => { res.json(req.body); }); Form Data

0x02 - Databases

$ mongo MongoDB shell version: 3.2.11 > Mongo

> use test; switched to db test > show collections;
> db.users.insert({ email: "[email protected]", password: "woot!" }); WriteResult({ "nInserted" : 1 }) > db.users.find(); { "_id" : ObjectId("59247d0f3dacfc7ef19a41d2"), "email" : "[email protected]", "password" : "woot!" } > The Basics

$ npm install mongoose // server.js const mongoose = require("mongoose");
mongoose.connect("mongodb://localhost/ss-auth"); Mongoose (ORM)

// server.js const mongoose = require("mongoose"); let User = mongoose.model("User",
new mongoose.Schema({ firstName: { type: String, required: true }, lastName: { type: String, required: true }, email: { type: String, required: true, unique: true }, password: { type: String, required: true }, })); Models

app.post("/register", (req, res) => { let user = new User(req.body);
user.save((err) => { if (err) { let error = "Something bad happened! Please try again."; if (err.code === 11000) { error = "That email is already taken, please try another."; } return res.render("register", { error: error }); } res.redirect("/dashboard"); }); }); Creating Users

> db.users.find() { "_id" : ObjectId("59248139c6670c68737612bd"), "firstName" : "Randall", "lastName"
: "Degges", "email" : "[email protected]", "password" : "woot!", "__v" : 0 } Verifying

app.post("/login", (req, res) => { User.findOne({ email: req.body.email }, (err,
user) => { if (err || !user || req.body.password !== user.password) { return res.render("login", { error: "Incorrect email / password." }); } res.redirect("/dashboard"); }); }); Authenticating Users

0x03 - Sessions

Home Page Dashboard What If... Billing You had to enter
your credentials over and over again on every page you visited?

Website The Idea Login Unique ID Hey! Remember this value!
I need you to send it back to me next time you visit so I know who you are! Browser These are sessions.

Browser Server Cookies Cookies Authentication Cookies

HTTP Requests / Responses { "User-Agent": "Mozilla/5.0 ...", "Content-Type": "text/html"
} <html> … </html> Headers Body

Set-Cookie: session=12345 Body { "Set-Cookie": "session=12345" } Creating Cookies Set-Cookie:
a=b; c=d; e=f

Body { "User-Agent": "cURL/1.2.3", "Accept": "*/*", "Host": "localhost:3000", "Cookie": "session=12345"
} Reading Cookies

client-sessions $ npm install client-sessions const sessions = require("client-sessions"); app.use(sessions({
cookieName: "session", secret: "woosafd32532wfsf", duration: 30 * 60 * 1000, // 30 mins }));

Using Sessions app.post("/login", (req, res) => { User.findOne({ email: req.body.email
}, (err, user) => { if (!user || req.body.password !== user.password) { return res.render("login", { error: "Incorrect email / password." }); } req.session.userId = user._id; res.redirect("/dashboard"); }); });

Verifying

app.get("/dashboard", (req, res, next) => { if (!(req.session && req.session.userId))
{ return res.redirect("/login"); } User.findById(req.session.userId, (err, user) => { if (err) { return next(err); } if (!user) { return res.redirect("/login"); } res.render("dashboard"); }); }); Improving the Dashboard

0x04 - Storing Passwords

{ "_id" : ObjectId("59248139c6670c68737612bd"), "firstName" : "Randall", "lastName" : "Degges",
"email" : "[email protected]", "password" : "woot!", "__v" : 0 } Current User Data

Password Hashing! Given a hash, you can never retrieve the
original password that created it. Hashes are one-way. The same password always generates the same hash.

Hashing • md5 • sha256 • bcrypt • scrypt •
argon2 • etc. • SHITTY • NOPE! • SAFE • AWESOME • YES!! • NO

bcrypt (pseudo) var password = 'hi'; var hash = bcrypt(password);
console.log(hash); // $2a$10$uS.pE0aS0NlsgbvLd6EruO5VDKllinIZLF3C84OYzWHFiyKYfZVXy

Improving Registration $ npm install bcryptjs app.post("/register", (req, res) =>
{ let hash = bcrypt.hashSync(req.body.password, 14); req.body.password = hash; let user = new User(req.body); user.save((err) => { // ...

Improving Login app.post("/login", (req, res) => { User.findOne({ email: req.body.email
}, (err, user) => { if (!user || !bcrypt.compareSync(req.body.password, user.password)) { return res.render("login", { error: "Incorrect email / password." }); } req.session.userId = user._id; res.redirect("/dashboard"); }); });

Our Improved User { "_id" : ObjectId("5924ad584f7ddf1eea467408"), "firstName" : "Randall",
"lastName" : "Degges", "email" : "[email protected]", "password" : "$2a$14$czZ5IJCRsi7TvqwW8InVsOOnzBffT3e19unr1ecFq0XQGiTatN0wm", "__v" : 0 }

Homework! http://plaintextoffenders.com/

0x05 - Middleware

app.use((req, res, next) => { if (!(req.session && req.session.userId)) {
return next(); } User.findById(req.session.userId, (err, user) => { if (err) { return next(err); } if (!user) { return next(); } Smart User Middleware user.password = undefined; req.user = user; res.locals.user = user; next(); }); });

function loginRequired(req, res, next) { if (!req.user) { return res.redirect("/login");
} next(); } app.get("/dashboard", loginRequired, (req, res, next) => { Force Authentication

0x06 - CSRF

Let’s Say...  <form> <input type="text" name="account"/> <input
type="text" name="amount"/> <input type="text" name="for"/> </form>

Cross Site Request Forgery Hey Randall, Check out this picture
of my dog! <img src="http://bank.com/withdraw?account=Randall&amp ;amount=1000000&for=BadGuy">

CSRF Tokens Browser Server CSRF Cookie GET /login Login Page
w/ CT POST /login w/ CT NO! >:S

CSRF Protection in HTML form(method="post") input(type="hidden", name="_csrf", value=csrfToken)

CSRF Protection $ npm install csurf const csurf = require("csurf");
app.use(csurf()); app.get("/register", (req, res) => { res.render("register", { csrfToken: req.csrfToken() }); }); app.get("/login", (req, res) => { res.render("login", { csrfToken: req.csrfToken() }); }); // and all other places that call render // and have a form

0x07 - Security Best Practices

User Server secret Always Use SSL

Use Cookie Flags app.use(session({ cookieName: 'session', secret: 'some_random_string', duration: 30
* 60 * 1000, activeDuration: 5 * 60 * 1000, httpOnly: true, // don't let JS code access cookies secure: true, // only set cookies over https ephemeral: true // destroy cookies when the browser closes }));

Wear a Helmet const helmet = require("helmet"); // manage http
header security app.use(helmet()); $ npm install helmet

Don’t Roll Your Own ➔ Passport ➔ Node-Login ➔ Aqua
➔ Okta

Code https://github.com/rdegges/ss-auth Slides https://speakerdeck.com/rdegges Resources @oktadev @rdegges

BONUS! JWTs suck for web authentication.

What are JWTs? - JSON data - Cryptographically signed -
Not fancy - Not encrypted

What’s a Cryptographic Signature? Randall Degges That’s a signature!

What Do JWTs Actually Do? Prove that some data was
generated by someone else.

How Do People Use JWTs?

Why Do JWTs Suck?

You’re Going to Hit the DB Anyway

Don’t Sign Things Twice Randall Degges That’s dumb! Randall Degges

Why ARE JWTs Good For? AUTH PROVIDER (GOOGLE) STATIC WEBSITE
API

Almost Everything You Ever Wanted to Know About...

Almost Everything You Ever Wanted to Know About Web Authentication in Node

More Decks by Randall Degges

Other Decks in Programming

Featured

Transcript