Syntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats

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

Featured Speakers

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers HostScott Tolinsky Guest

Topics Discussed

Episode Summary

Executive Summary: The episode is a deep dive into building authentication systems, focusing on JWTs, sessions, cookies, local storage, hashing, salting, CSRF, and cross-origin concerns. Wes and Scott explain the end-to-end flow of registration and login, why they rebuilt auth from scratch, and why HTTP-only secure cookies plus server-side session tracking offer strong control and security.

Main Topics: Why rebuild auth from scratch: Scott explains moving away from Meteor and Accounts.js to gain full control over verification, session handling, and feature parity without package limitations. JWT fundamentals: The hosts break down JSON Web Tokens into header, payload, and signature, clarifying that JWTs are encoded, not encrypted, and are useful for carrying user/session data. Sessions, access tokens, and refresh tokens: They describe a two-token flow where short-lived access tokens authenticate requests and refresh tokens validate active sessions against the database, allowing session revocation and multi-device session management. Passwords: hashing, salting, and comparison: The episode explains how passwords should be sent over HTTPS, salted, hashed, stored securely, and later compared with bcrypt instead of being decrypted or stored in plain text. Cookies vs local storage: They compare storing JWTs in HTTP-only secure cookies versus local storage, highlighting server-side accessibility, SSR convenience, and protection from client-side access. Cross-origin and CSRF concerns: The discussion covers CORS configuration for browser-based cross-domain requests and CSRF risks created by automatic cookie sending, plus the need for CSRF tokens or same-site protections. Auth tooling and practical stack choices: The hosts mention tools like NextAuth, Passport.js, Auth0, Caddy for local HTTPS, and Hasura/Prismic/LogRocket sponsors as supporting infrastructure for modern web apps.

Key Arguments: JWTs are not encrypted; they are encoded and signed, so sensitive secrets should not be placed in the payload. Server-side session tracking combined with access and refresh tokens gives administrators the ability to revoke logins and manage multiple devices. Passwords should always be salted and hashed before storage; plain text storage is a major security risk. HTTP-only secure cookies are generally preferable for web auth because they are inaccessible to JavaScript and work naturally with server-rendered requests. Local storage is less ergonomic and less secure for auth because tokens must be manually attached to requests and are unavailable on the initial page load. CSRF remains a separate concern even with HTTP-only cookies because browsers automatically attach cookies to requests unless protections are added. Using HTTPS/SSL is essential because login credentials and cookies must be protected in transit. Rebuilding auth can be worthwhile when existing packages are too broad, brittle, or incompatible with the exact requirements of the app.

Data Points: JWT structure: 3 parts - A JWT consists of a header, payload, and signature. Access token expiry: 90 minutes - Wes says the access token expires after about 90 minutes. Two-token model: access token + refresh token - Their auth flow uses both an access token and a refresh token stored in cookies. Session storage: database table of sessions - They maintain a dedicated sessions table to track active logins and revocation. Caddy local HTTPS setup: 2 lines of configuration - Scott says Caddy enabled local HTTPS with only a couple lines of config. LogRocket free trial: 14 days - The sponsor offer includes 14 days free. Hasura offer: 3 months free - Listeners can get three months of Hasura Cloud for free with a code. Hasura offer limit: first 100 listeners - The free Cloud deal is limited to the first 100 listeners. NextAuth setup: ~20 lines of code - Wes says adding GitHub login with NextAuth took about 20 lines of code. Course discount: 25% - Scott promotes an annual subscription discount on Level Up Tutorials. Advanced React coupon: $10 off - Wes mentions coupon code syntax for his course.

Pivotal Quotes: "JWTs are not necessarily secure. You're not going to want to put something secure inside of a JWT that the client can access." — Wes Boss: Explaining that JWTs are encoded and signed, not encrypted, so their payload should not contain secrets. "Cookies, HTTP only, secure cookies are the way to do authentication in my mind." — Scott Tolinsky: Arguing for cookie-based auth over local storage for web applications. "It was literally seconds." — Matt Holt (referenced by Wes): Describing how quickly Caddy could be set up for local HTTPS after Wes initially hesitated.

Implications: For developers, secure auth is less about memorizing acronyms and more about combining the right primitives: HTTPS, hashed passwords, server-side sessions, and HTTP-only cookies. The episode suggests modern web apps should favor revocable, low-friction auth flows over simplistic token storage.

🔓 Sign Up for Unlimited Episode Search

About Syntax - Tasty Web Development Treats

View all episodes from Syntax - Tasty Web Development Treats