How To Build Your Own Auth
Syntax - Tasty Web Development Treats17 Maalis 2021

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 Links Caddy Fastify ××× 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

Jaksot(968)

872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

Wes and Scott answer questions about HTML semantics, TypeScript, adapting to AI’s impact on web development, and the best and worst browsers for developers. They also tackle project planning, deploying SvelteKit apps, and navigating online opinions in tech. Show Notes 00:00 Welcome to Syntax! 01:04 Best container element for a grid of products? 04:50 TypeScript null checks 09:44 Adapt to AI or get left behind Syntax Episode 870 13:13 Why did 3D never take off? three.js React Three Fiber Rep Fitness Rack Builder Maxime Heckel GitHub Universe The element 18:53 Podcast audio and video in one feed? Who Smarted? 21:06 Brought to you buy Sentry.io 22:30 Best and worst browsers for web dev? Firefox Edge Chrome Arc Safari 27:39 Why use a lock file for managing dependency versions Don’t gitignore your lock files! 30:34 Should you build your own sync engine? Scott’s Naive Sync Example 34:21 Best practices when starting a new project from scratch Habit Path 38:33 How to deploy a SvelteKit app on something other than Vercel or Netlify Coolify Crash Course 42:54 The reality of online opinions in tech 48:10 Spending $120k on an app idea 54:12 Sick Picks + Shameless Plugs Sick Picks Scott: My Mind Wes: Metal Detector Shameless Plugs Scott: Syntax on YouTube Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

29 Tammi 202557min

871: Coding Agents Cursor + Windsurf Tips

871: Coding Agents Cursor + Windsurf Tips

Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project. Show Notes 00:00 Welcome to Syntax! 04:12 What are AI Agents? Cursor Features, Windsurf Features. 07:25 Brought to you by Sentry.io. 07:50 Chat Mode. 08:11 Composer Mode. 08:55 Agent Mode. 10:03 Inline Chat Mode. 11:02 JavaScript Set Methods Demo. Wes’ Example on X. 16:10 Fire Dispatch Data. 20:01 Rules Files. Cursor Directory. 22:37 Use screenshots. 23:36 Refactoring to separate files. 23:53 Use it to experiment. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

27 Tammi 202527min

870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

Wes and Scott talk with Kevin Hou and Varun Mohan from Windsurf about the evolving landscape of AI in coding, and the future of software development. Show Notes 00:00 Welcome to Syntax! 00:50 The origins of Windsurf and Codeium Windsurf Codeium Vs Code Cursor 03:14 Rethinking IDE UX 05:45 Will Microsoft eventually implement these AI features in VS Code? 09:27 The "agentic" editor concept 17:58 The future of software development with AI 24:37 AI in large codebases 28:22 Brought to you by Sentry.io 28:46 How does AI stay current with frequent language/library updates? 33:07 Behind Windsurf's fresh design 35:23 Challenges with forking VS Code 38:47 AI and future innovations 43:04 How Windsurf approaches AI experimentation 45:11 Pricing and user segments 48:38 Will Windsurf ever run in the browser? 50:58 Sick Pick + Shameless Plugs Sick Picks Kevin: Ricoh GR IIIx Varun: Di2 Shifter Shameless Plugs Windsurf Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

22 Tammi 202557min

869: Node + TypeScript in 2025

869: Node + TypeScript in 2025

Scott and Wes explore the experimental world of running TypeScript in Node, breaking down the differences between type stripping and compiling. They cover the pros, cons, and quirks of the current implementation, plus explore tools like tsx, ts-node, and even alternatives like Deno. Show Notes 00:00 Welcome to Syntax! 00:41 Brought to you by Sentry.io. 01:29 Running TypeScript in Node. 01:45 Experimental Type Stripping. 03:17 TypeScript refresher. 04:05 TypeScript can be compiled and/or Type Stripped. 05:09 Current Node implementation is only type stripping. 05:40 Limitations of no compiling. 05:57 Enums. 08:30 Other issues. 08:35 Parameter properties. 09:20 Experimental transform types. 10:01 Importing types with type keyword. 11:17 No need for sourcemaps. 11:42 No dependencies. 13:08 Other tools. 13:25 tsx. 14:28 ts-node. 14:44 JSDoc. 16:30 Deno and Bun. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

20 Tammi 202518min

868: The State of JavaScript

868: The State of JavaScript

Wes and Scott talk about the State of JavaScript survey, tends, popular features, and the evolving landscape of tools and frameworks. Show Notes 00:00 Welcome to Syntax! 00:27 Brought to you by Sentry.io 01:16 The state of JavaScript Twitter fantasy football 02:27 Syntax features The State of JavaScript survey 05:27 Logical assignment 07:49 Strings 08:18 Arrays 14:16 Sets 2025 New Years resolution: use maps and sets more and objects / arrays less. 16:10 Browser APIs 22:50 Library tiers list 27:21 Upgrading from M1 Mac Chris Coyier - M4 30:08 Front-end frameworks 32:18 The top front-end frameworks used at work 33:49 What is the highest paying framework? 35:01 Meta frameworks 36:32 Meta frameworks pain points 42:33 Testing tools 43:58 Build tools 44:41 Most used libraries 46:33 Back-end frameworks 48:34 JavaScript runtimes 50:35 Serverless runtimes 51:25 Other languages people are using 52:49 AI tools 53:37 The State of JS Awards 57:18 Sick Picks + Shameless Plugs Sick Picks Wes: Headted Vest Scott: Super Mario Party Jamboree Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

15 Tammi 20251h 2min

867: Zero Sync is the Future of Data Loading

867: Zero Sync is the Future of Data Loading

What’s the deal with Zero Sync? Scott and Wes dive into this cutting-edge database tech, exploring its real-time interactivity, blazing-fast performance, and how it stacks up against the competition. Plus, they break down setup, querying, authentication, and whether it’s ready for prime time. Show Notes 00:00 Welcome to Syntax! 01:59 Brought to you by Sentry.io. 02:21 Today’s agenda. 02:52 What is Zero Sync? The Docs. InstantDB. 07:02 Zerobugs loading speed. 11:04 Real-time interactivity. 11:38 Why is it different? 12:11 How to get it set up. 12:58 Querying Data. 16:22 Writing data. 16:31 Upsert. 17:39 Authentication and permissions. Johannes Schickling Ep 767. 19:27 Preloading. 19:41 Migrations and deployment. 20:17 Some extras. 21:16 CreateSubscriber. 23:08 Can you use this today? Zero Syn Roadmap. Scott’s YouTube Video. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

13 Tammi 202529min

866: 2025 Web Development Predictions

866: 2025 Web Development Predictions

Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes! Show Notes 00:00 Welcome to Syntax! 02:00 Brought to you by Sentry.io. 03:09 The agenda. 03:40 Temporal Javascript api will ship in Safari and Chrome. Temporal Proposal. 06:23 On device AI. WebGPU API Dawn Native WebGPU 10:26 Models will plateau. Bolt.new, v0, Lovable.dev. 13:40 Web Awesome will become the most used web components library. Web Awesome. 15:57 We will be using more web components. 16:59 A push towards the ‘standard stack’. 19:38 We can really use relative color. 21:39 Vanilla CSS comeback. 23:35 A complete Mixins / Functions API for CSS. 24:27 Conditionals will ship in all browsers. 25:50 People will still make vertical centering jokes. 27:08 VSCode will be feature parity with Cursor. 28:22 Framework choice will matter less with AI tools. 29:12 OpenAI will launch a browser. Dupe.com. Buy Now! The Shopping Conspiracy. Krazy Binz. 37:18 React will drop Babel. BabelJS. 38:05 React Server Components will pop. 39:46 Remix will relaunch as something entirely different. 41:11 React Native will have it’s time. 42:06 Svelte will get component-based islands or data loading. 44:19 Server Runtimes, Bun will continue to do non-standard, lovable things. 44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite. 46:06 Laravel will release a CMS. 47:57 Vite will stay king. 48:03 Rolldown ships in the next version of Vite. Rolldown. Statamic. 49:35 Sick Picks & Shameless Plugs. Sick Picks Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb. Wes: Stats App. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

8 Tammi 202552min

865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about. Show Notes 00:00 Welcome to Syntax! 00:43 Brought to you by Sentry.io. 01:23 Question 1: Array Sort Default Behavior. 03:24 Question 2: Splitting Into Individual Words & Characters. 06:06 Question 3: NodeJS Stream Backpressure. 09:07 Question 4: Custom Middleware Rate Limiting. 13:00 Question 5: Transform Function Property Changes. 15:18 Question 6: TranslateZ & Will-Change Performance. 17:52 Question 7: Table Structure Best Practices. 20:23 Question 8: Dialog vs Div with Dialog Role. 23:21 Question 9: TypeScript Unknown vs Any & Never. 26:31 Question 10: Response Type Safety in TypeScript. 29:48 Question 11: Browser Isolation Types. 32:54 Question 12: HTML Quirks Mode Behavior. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

6 Tammi 202535min

Suosittua kategoriassa Politiikka ja uutiset

aikalisa
tervo-halme
rss-ootsa-kuullut-tasta
ootsa-kuullut-tasta-2
politiikan-puskaradio
rss-kuka-mina-olen
rss-podme-livebox
et-sa-noin-voi-sanoo-esittaa
otetaan-yhdet
rss-vaalirankkurit-podcast
rikosmyytit
viisupodi
rss-hyvaa-huomenta-bryssel
rss-merja-mahkan-rahat
lotta-paakkunainen
rss-aijat-hopottaa-podcast
rss-se-avun-kysymyspodcast
rss-50100-podcast
rss-raha-talous-ja-politiikka
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset