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)

Scott Tolinski Origin Story 🎧 📹 💻 🕺

Scott Tolinski Origin Story 🎧 📹 💻 🕺

In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes UofM Performing Arts Technology Devin Kerr Jamie Schefman Michelle Chamuel Guitar World Ghostly International Q LTD Michigan Creative Ford GTB Level Up Tutorials Scott Concussion Atya Sick Picks Good Hertz Shameless Plugs Wes' Courses Level Up Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

16 Elo 201756min

Accepting Money on the Internet 💰💸

Accepting Money on the Internet 💰💸

In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Apollo React Apollo GraphCool Stripe PayPal Braintree Stripe Docs HTML5 Autocomplete Types Stripe Radar Royal Bank PayPal WorkAround Stripe Atlas Transferwise Stripe Bitcoin Sick Picks ChefSteps What Cha Tea Shameless Plugs Wes' Courses Level UP Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

9 Elo 20171h 3min

How to Slam Dunk Freelancing 🏀🤑

How to Slam Dunk Freelancing 🏀🤑

Sponsor Deliciousbrains WP Migrate DB Pro - Use the code SYNTAX for 20% off Show Notes Stickers - SOLD OUT MORE SOON Scott's Personal Website on Gatsby Gatsby Codealong Gatsby MJML Email Framework The E-Myth Revisited Book Design is a Job Breaking the Time Barrier Basecamp Trello Freshbooks Wave Sick Picks Hyper Key + Karabiner Elements Better Touch Tool King of the Road Twitter Wes Bos Scott Tolinski Syntax

2 Elo 201758min

JavaScript Tooling - 004

JavaScript Tooling - 004

Show Notes Deliciousbrains WP Migrate DB Pro WesBos Website Level Up Tutorials WHY USE WWW? Webpack Babel ESLint Prettier Babili Prepack Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma. CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace. Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. React Native for everyone Twitter Wes Bos Scott Tolinski

26 Heinä 201749min

CSS Preprocessors and Structuring CSS - 003

CSS Preprocessors and Structuring CSS - 003

Show Notes WesBos Website Level Up Tutorials GraphQL Dinosaur JS Conference Angular Pug / Jade EJS BEM Methodology Stylus Rupture Less Sass PostCSS PostCSS Autoprefixer RuckSack cssnext LostGrid Bootstrap Haml Babel Flickity Plugin webpack Compass React Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar. Vanilla Hide menu bar icons on your Mac. Power Blocks One set of Power Block replaces racks of dumbbells Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. The Sketch Course & UX Prototyping with Principle Combo Limited Sale Price: $39.99 $49.99 Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world. Animate Your Ideas, Design Better Apps Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. Twitter Wes Bos Scott Tolinski

19 Heinä 20171h 3min

Webcam and audio access with WebRTC and getUserMedia() - 002

Webcam and audio access with WebRTC and getUserMedia() - 002

Show Notes WebRTC Apple WebRTC Support GetUserMedia Slack WebTorrent https://github.com/webtorrent/webtorrent Soctt WebRtc Mirror - TBC MediaRecorder Electron Kap Wes Security Cam Scott Colorbars YouTube - TBC Wes Face Detection Fluent Conf Sick Picks Peak Design Everyday Backpack Everyday Backpack Video Quik by GoPro Splice Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. Level Up Tutorials Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free video tutorials. Twitter @Syntax @wesbos @stolinski

12 Heinä 201740min

React Tools - 001

React Tools - 001

Show Notes Wes Bos' Site Level Up Tutorials site Level Up Tutorials YouTube channel Scott Tolinski personal site Cloudflare Next.js Hacker News Example in Next.js GraphQL Graphcool create-react-app React dev-tools Redux dev-tools Preact.js React Storybook Meteor Blaze Sick Picks Wes: Parcel App Scott: Fish shell Shameless Plugs Learn Node React Native for everyone

5 Heinä 201750min

Syntax 000 - PREVIEW

Syntax 000 - PREVIEW

Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm

27 Kesä 20172min

Suosittua kategoriassa Politiikka ja uutiset

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