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(970)

858: How to Go Deeper With Your Learning

858: How to Go Deeper With Your Learning

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community. Show Notes 00:00 Welcome to Syntax! 02:48 Brought to you by Sentry.io. 03:54 How do you go deeper? 04:23 Pick a project and build it. 06:36 Read the docs. Svelte Docs. 09:07 Read the source. 11:19 Consume content: blogs, conference talks, etc. Dot Conferences on YouTube. GitNation JavaScript Conferences. 16:24 Discord and Reddit. 19:31 Get mentorship and ask questions. 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

9 Joulu 202424min

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget. Show Notes 00:00 Welcome to Syntax! 03:01 Brought to you by Sentry.io 04:14 Understanding signal-to-noise ratio 06:48 Using de-noise iZotope Voice De-noise 09:12 The importance of mic technique 10:28 Dealing with electrical noise 11:15 The proximity effect 13:01 Sound treatment vs sound proofing Sound Wavelength Calculator Syntax 516: Wes’ New Soundproof Office Studiobricks Randy’s Studiobricks video GIK Acoustics 23:33 Do egg crates work for sound treatment? 25:22 USB mics vs XLR mics Shure MV6 Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn 27:06 Video composition 30:18 How to improve your lighting 35:37 Choosing the right camera 36:58 The importance of codecs and bitrates 38:14 What to look for in a webcam 38:50 Randy’s packages for $50, $150 and $500-$1000 budgets 40:02 The $50 package/selecting your mic Feelworld PM1 Fifine K688 heyday Stone White Desktop Mic 43:53 The $150 package Neewer lights 45:32 The $500-$1000 package Shure MV6 Insta360 Link 2 Insta360 Link 2c Elgato Cam Link 4k Sonay a6000 51:07 Mic stand recommendations VIVO 56:50 Sick picks & Shameless Plugs Sick Picks Randy: etymologynerd on TikTok Shameless Plugs Randy: Randy’s 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

6 Joulu 202458min

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners. Show Notes 00:00 Welcome to Syntax! 00:50 Brought to you by Sentry.io. 02:23 Apple developer accounts and certificates. 06:58 Hono, SvelteKit, and using them together. 11:14 Rspack & Rsbuild over Vite? Rspack, Rsbuild. Rolldown, Rollup. oxc. Turborepo. 21:01 Quoting projects without seeing under the hood. 25:26 HTTP cookies, partitioned cookies, and chips. Partitioned Cookies. 30:29 Redirect codes; 301, 302, 303, 307 418 I’m a teapot. 36:22 Gaining inspiration for talks and posts. 40:02 My loading state is too fast! Should I use setTimeout? setTimeout Docs. 42:29 Interviews and landing the job. 49:50 Sick Picks & Shameless Plugs. Sick Picks Scott: Stainless Steel Cookware. Wes: Dim Lightbulbs, steelpan.guy on TikTok. Shameless Plugs Scott: Potluck Submissions. Wes: 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

4 Joulu 202456min

855: Fast Websites: The New Speculation Rules API

855: Fast Websites: The New Speculation Rules API

Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers. Show Notes 00:00 Welcome to Syntax! 00:49 Pre-loading, prefetching, and pre-connecting. CSS Wizardy. CSS Wizardy on GitHub. 02:06 Brought to you by Sentry.io. 03:16 Benefits of pre-loading, prefetching, and pre-connecting? 07:02 The Speculation Rules API. mdn web docs. 08:20 Isn’t that expensive? 08:53 Eagerness of the Speculation Rules API. 09:55 What is the cost for the site? 14:42 What is the cost for the user? 15:49 Next Master. Next Master. 18:07 The current prevalence. 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

2 Joulu 202424min

854: Animating the Web With Matt Perry: Exploring motion.dev

854: Animating the Web With Matt Perry: Exploring motion.dev

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation. Show Notes 00:00 Welcome to Syntax! 01:15 The Framer Motion story Motion 05:16 What’s the status of Framer Motion today? 09:08 What tech is Motion built on? 13:40 Is Motion entirely WAAPI? 16:06 Why hasn’t the Web Animation API gained more traction? 17:46 Does Matt design his demos? 19:25 Performance and testing 25:34 Brought to you by Sentry.io 28:10 Have other animation libraries influenced Motion? Svelte GSAP Anime.js 31:49 Micro-Optimizations in JS 36:02 How do you test frame rates? 38:03 Graphics programming and shaders Maxime Heckel Maxime’s blog 39:58 What is the future of Motion? 41:42 What’s the difference between layout animations and the Vue Transition API? 46:35 Sick Picks & Shameless Plugs Sick Picks Matt: Grime music P Money Ghetts Shameless Plugs Matt: Motion.dev Sponsor Motion 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 Marras 202450min

853: The State of Frontend

853: The State of Frontend

Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs! Show Notes 00:00 Welcome to Syntax! 00:53 Brought to you by Sentry.io. 01:15 About the survey. Follow along! State of Frontend Survey 02:10 Frameworks. 06:15 Rendering frameworks. 07:35 State management. 09:14 Other libraries. Just: Dependency-free Utilities. 13:34 Data. Syntax Episode 453. Syntax Episode 833. 16:39 Hosting. AWS Amplify. 19:51 Continuous Integration. 21:30 Micro-frontends. 23:25 Package Managers. pnpm Link Workspace Packages. Corepack. 28:35 JS Runtimes. 29:47 Typescript. 33:13 Browser Technologies. 35:05 What is app property? 38:20 Progressive Web Apps. 40:11 Styling tools. 43:17 Testing. 45:39 Code editors. 49:02 Build tools. 49:17 Linting tools. 50:26 Operating systems. 51:17 The future trends. 54:14 Sick Picks + Shameless Plugs. Sick Picks Scott: Candle Warmer. Wes: Flighty iOS App. Shameless Plugs Scott: Syntax on Bluesky 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 Marras 20241h

852: Cloudflare Tunnels

852: Cloudflare Tunnels

Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected. Show Notes 00:00 Welcome to Syntax! 01:17 Brought to you by Sentry.io. 02:09 How do Cloudflare Tunnels work? 03:52 Publicly exposed webhooks. 04:09 Apple Pay. 04:40 Snipcart. 04:54 Accessing servers when away. Jellyfin, Home Assistant. 07:47 How to set up Cloudflare Tunnels. 10:00 Security risks. Cloudflare Access & Zero Trust. 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

25 Marras 202419min

851: The Future of VS Code and Copilot

851: The Future of VS Code and Copilot

Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors. Show Notes 00:00 Welcome to Syntax! 00:32 Cassidy’s keynote at GitHub Universe 03:23 New Copilot features 04:55 Use cases for prompt engineering 09:20 UI and UX enhancements 19:18 Copilot Extensions 20:38 Brought to you by Sentry.io 21:26 Multi-line suggestions? 27:00 How do you develop new ideas in this space? GitHub Next 35:42 Copilot in Xcode GitHub Copilot code completion in Xcode is now available in public preview 39:16 VS Code experimental features @code 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 Marras 202442min

Suosittua kategoriassa Politiikka ja uutiset

tervo-halme
aikalisa
rss-ootsa-kuullut-tasta
ootsa-kuullut-tasta-2
politiikan-puskaradio
rss-kuka-mina-olen
rss-podme-livebox
rss-vaalirankkurit-podcast
otetaan-yhdet
viisupodi
et-sa-noin-voi-sanoo-esittaa
rikosmyytit
rss-hyvaa-huomenta-bryssel
rss-asiastudio
radio-antro
rss-kiina-ilmiot
rss-poliittinen-talous
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-kaikki-uusiksi
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset