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

Links

××× 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

How To Build Your Own Auth

Syntax - Tasty Web Development Treats