Podcast summary and Notes on "jwt"

How To Build Your Own Auth

In this episode of Syntax, Scott and Wes talk about building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Hasura - Sponsor

With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn.

Show Notes

01:51 - Overview

Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table.
Accounts.js

05:13 - JWT

Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens.
JWT has three parts:
- Header
  - What kind of algo was used
- Payload
  - Data about the user
  - Email
  - Username
  - UserID
  - refreshToken, authToken, sessionId
- Signature
  - This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it.
accessToken
- A short lived JWT that contains the sessionToken, userId and expires after 90min.
refreshToken
- A long lived JWT that contains just the sessionToken and doesn’t expire.
JWT can be decoded and read, but you have to encode them with your secret.
JWT can be stored anywhere, there are two main places:

20:26 - Cookies

We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated.
Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server.
Note: Safari has stricter rules than others for same domain cookies (e.g. localhost won’t work).

34:26 - Sessions

Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session.
Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false.
Sessions also have sessionToken which are generated on authentication or create account.

38:10 - CORS

Cross-origin-resource-sharing
Can be super tricky to get working cross-domain
You usually have to actually visit the website for the cookie to be set, even with lax cors

46:06 - CSRF

48:47 - Authentication process

bcrypt.js

52:13 - Helper Packages

NextAuth.js is super easy
Passport.js
auth0

××× SIIIIICK ××× PIIIICKS ×××

Scott: reMarkable 2
Wes: Opration Odessa

Shameless Plugs

Scott: Node Fundamentals Authentication - Sign up for the year and save 25%!
Wes: Advanced React - Use the coupon code ‘Syntax’ for $10 off!

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

Syntax - Tasty Web Development Treats

enMarch 17, 2021

Hasty Treat - Authentication: LocalStorage vs Cookies vs Sessions vs Tokens

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax.

Show Notes

4:20 - How should we track users?

Token based - generally stored in the client
Session based - stored on the server
Token Based (JWT)

6:00 - Token-based auth

Stateless - the server does not maintain a list of logged in users
Scalable - you can use serverless functions easily
Cross domain
Data can be stored in JWT
Easy to use on non-web sites like mobile apps
Hard to expire tokens — you must maintain a list of blacklisted tokens

7:48 - Session-based auth

Stateful - generally you maintain a list of session IDs
Passive - once signed in, no need to send token again
Easy to destroy sessions

10:48 - How do we identify the user on each request? localStorage or Cookies?

A common misconception is that localStorage is for tokens while cookies is for sessions
With localStorage, we need to grab the token and send them along on each request
With cookies, the data is sent along on each request

11:25 - Security Issues