Skip to content

Instantly share code, notes, and snippets.

@drmikeh

drmikeh/cookies-and-tokens.adoc

Created January 11, 2017 23:27
Show Gist options
  • Save drmikeh/67ea44d4d01814a8c12fb1a54cb3098b to your computer and use it in GitHub Desktop.
Save drmikeh/67ea44d4d01814a8c12fb1a54cb3098b to your computer and use it in GitHub Desktop.
Download ZIP
Cookies and Tokens for AuthN
Raw
cookies-and-tokens.adoc

Authentication with AngularJS

Review

Authentication (AuthN) is used to establish and verify a user’s identity. Typically there are 3 functions for the user to perform:

  1. Registration

  2. Login

  3. Logout

In addition the client and server must manage a user session so that the user does not have to re-enter their credentials (login id and password) with every request.

Session Management

When we implemented sessions in Unit 2, we used a typical Browser Cookie based scheme. Here is an outline of what that entails.

  1. The user enters his/her credentials into a Login form and submits the form to the server.

  2. The server verifies the information is correct.

  3. The server serializes the user into a value that uniquely identifies the user. We used the user’s MongoDB id (user._id) to uniquely identify the user.

  4. The server puts the user’s id into a cookie and returns the cookie back to the browser.

  5. The browser stores the cookie.

  6. The browser sends the cookie for each HTTP request that goes to the same domain that returned the cookie. For example, if we login to www.mytodoapp.com and get a cookie back, the browser will store that cookie and resend it with each request to www.mytodoapp.com.

  7. To logout a user, the server simply needs to invalidate the cookie (i.e. tell the browser that the cookie is now invalid, expired, defunct, etc.).

AuthN with AngularJS

With AngularJS we can use either cookies (as above) or tokens. The latest trend has been to use tokens and there is even a standard called JWT (JSON Web Tokens).

So what is the difference between cookies and tokens? Turns out that it is a little bit like comparing apples to oranges.

What are Cookies?

  • Browser cookies are a mechanism for storing information in the browser that ties the data to a specific server address (domain). Your browser keeps track of cookies from servers such as Facebook, Google, Twitter, GitHub, etc.

  • You can use cookies to store just about any information, such as:

    • a user login session id

    • contents of a shopping cart

    • searches the user has performed

  • Each cookie has a policy that determines how long the cookie is valid. Examples are:

    • session cookie: the cookie is only good for the duration of the Browser session. Once you close the browser tab the cookie goes away.

    • persistent cookie: the cookie is valid for a certain duration or until a certain date.

What are Tokens?

Tokens are simply a format for encrypting data, such as a user’s login id and other information about the user. The encryption should be secure so that only the server that encrypted the data can unencrypt it.

What’s the Problem with Cookies?

Nothing really. Well cookies are generally only supported by browsers. So if you are building a native app (such as a mobile app) then you either need to support cookies in the native app or don’t use cookies.

The real problem lies with what information we are putting into the cookie and how we verify that data with each client request. If we put a user’s id (or a session id) into a cookie, then we have to hit the database to confirm the data with each request. This can be expensive when we have lots of user requests.

We can get better performance by putting the information we need about a user into the cookie (or token). Then to verify the information, we just need the server to unencrypt it, which is usually much faster than reading from a database.

Summary

We can use cookies or tokens to track a user’s session. With cookies the traditional approach has been to store some information in the cookie that is also stored in the database. But with each client request, we must verify the data in the cookie against the data in the database requiring a database read.

With tokens, we can store whatever data about the user we desire. Verification of the token is done via encryption / unencryption instead of via database access.

How does this impact AngularJS?

If we use cookies we can do the same thing we did in Unit 2 - i.e. let the browser manage the cookies.

If we use tokens then we have some options in how we manage the token on the browser side:

  1. Put the token inside a cookie (hey cookies can store anything, remember?)

  2. Store the token in JavaScript memory in the browser (it will get lost when we close the browser tab).

  3. Store the token in the HTML5 Web Storage (localStorage or sessionStorage).

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment