JSON Web Tokens

Not Your Grandma's Cookies


Thank Yous:

Rob Wormald: Introducing me to the world of JWT on IRC

And everyone else in the world who makes software development awesome.

Cookies and JWT

There are two standard ways to do authentication:

  1. Cookies (more traditional)
  2. JWT (pronounced "jot"...?) JSON Web Tokens

Each relies on something sent to the server with every request:
  1. Cookies: Session ID of some kind
  2. JWT: Encrypted JSON object identifying the user

Some Benefits TO JWT Over Cookies

  1. Enables CORS
  2. Stateless
  3. CDNify your site's assets
  4. Mobile Ready
  5. Protects against CSRF (Cross-site request forgery)
  6. Performance

Cookies In Action


$ git clone https://github.com/kentcdodds/ng-jwt-workshop.git

$ cd ng-jwt-workshop/api

$ git checkout cookie

$ npm install

* Optionally copy user.json to a new user.local.json file and modify to have your own user

$ node index.js

$ open http://localhost:3000

Cookie Pain

Stop the server
$ cd ..
$ git checkout -f cookie-pain
$ sudo vim /etc/hosts
Map hostnames to IPs to simulate different sub-domains:
127.0.0.1    api.jwtftw.dev
127.0.0.1    www.jwtftw.dev

$ node api/
$ http-server frontend/
$ open http://www.jwtftw.dev:8080
Checkout the console...

Oh No!

CORS error!!!


Stop the node server

$ git checkout -f cookie-pain-cors

$ node api/

Phew! No cors error...

Login... Get picture... 

Oh No Again!

What? No picture? 403 error? Refresh page! Hey, it logged me out!?!?!?


Reason: Server cannot set cookies across subdomains...

Enter: JWT...

JSON Web Tokens


Stop the node server
$ git checkout -f master
$ cd api
$ npm install

Startup node server again (make sure your http-server is still running).
See that everything works! Hooray!

Thanks!

Please leave me feedback through the app... (Link at the bottom)

*If you don't have it running locally, you can still submit feedback at http://kent.doddsfamily.us/ng-jwt-workshop/frontend/
but the server's not running there, so don't expect to be able to log in or anything...

Now go build something awesome :-)


Resources

Cookies vs Tokens. Getting auth right with Angular.JS

JWT Spec Draft

NG-JWT-Workshop

By Kent C. Dodds

Create a presentation like this

NG-JWT-Workshop

A demonstration of why and how to use JSON Web Tokens instead of cookies for Authentication in Web Apps.

  • 4,654
Loading comments...

More from Kent C. Dodds