Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How To Build Your Own Auth

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">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!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Hasura__Sponsor_15" name="Hasura__Sponsor_15"></a>Hasura - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 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: <a href="https://hasura.info/freetrial">hasura.info</a>. We’ve also got an amazing selection of GraphQL tutorials at <a href="https://hasura.io/learn">hasura.io/learn</a>.</p> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 01:51 - Overview</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://www.leveluptutorials.com/">Level Up</a> uses a <a href="https://jwt.io/">JWT</a> & secure cookie-based authentication and tracks sessions via a db table.</li> <li class="has-line-data" data-line-start="21" data-line-end="23"> <a href="https://www.accountsjs.com/">Accounts.js</a></li> </ul> <p class="has-line-data" data-line-start="23" data-line-end="24"> 05:13 - <a href="https://jwt.io/">JWT</a></p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> Base 64 encoded (not encrypted) token that contains data. We have both <code>accessToken</code>s and <code>refreshToken</code>s.</li> <li class="has-line-data" data-line-start="25" data-line-end="36"> JWT has three parts: <ul> <li class="has-line-data" data-line-start="26" data-line-end="28"> Header <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> What kind of algo was used</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="34"> Payload <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Data about the user</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Email</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Username</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> UserID</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> refreshToken, authToken, sessionId</li> </ul> </li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Signature <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> 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.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="36" data-line-end="38"> accessToken <ul> <li class="has-line-data" data-line-start="37" data-line-end="38">A short lived JWT that contains the <code>sessionToken</code>, <code>userId</code> and expires after 90min.</li> </ul> </li> <li class="has-line-data" data-line-start="38" data-line-end="40"> refreshToken <ul> <li class="has-line-data" data-line-start="39" data-line-end="40">A long lived JWT that contains just the <code>sessionToken</code> and doesn’t expire.</li> </ul> </li> <li class="has-line-data" data-line-start="40" data-line-end="41"> JWT can be decoded and read, but you have to encode them with your secret.</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> JWT can be stored anywhere, there are two main places:</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 20:26 - Cookies</p> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> 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.</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server.</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Note: Safari has stricter rules than others for same domain cookies (e.g. <code>localhost</code> won’t work).</li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 34:26 - Sessions</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> 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.</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false.</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Sessions also have <code>sessionToken</code> which are generated on authentication or create account.</li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 38:10 - <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a></p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Cross-origin-resource-sharing</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Can be super tricky to get working cross-domain</li> <li class="has-line-data" data-line-start="56" data-line-end="58"> You usually have to actually visit the website for the cookie to be set, even with lax cors</li> </ul> <p class="has-line-data" data-line-start="58" data-line-end="59"> 46:06 - <a href= "https://developer.mozilla.org/en-US/docs/Glossary/CSRF">CSRF</a></p> <p class="has-line-data" data-line-start="60" data-line-end="61"> 48:47 - Authentication process</p> <ul> <li class="has-line-data" data-line-start="61" data-line-end="63"> <a href="https://www.npmjs.com/package/bcryptjs">bcrypt.js</a></li> </ul> <p class="has-line-data" data-line-start="63" data-line-end="64"> 52:13 - Helper Packages</p> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://next-auth.js.org/">NextAuth.js</a> is super easy</li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="http://www.passportjs.org/">Passport.js</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> <a href="https://auth0.com/">auth0</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="Links_68" name="Links_68"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://caddyserver.com/">Caddy</a></li> <li class="has-line-data" data-line-start="70" data-line-end="72"> <a href="https://www.fastify.io/">Fastify</a></li> </ul> <h2 class="code-line" data-line-start="72" data-line-end="73"> <a id="_SIIIIICK__PIIIICKS__72" name= "_SIIIIICK__PIIIICKS__72"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Scott: <a href= "https://remarkable.com/store/remarkable-2">reMarkable 2</a></li> <li class="has-line-data" data-line-start="74" data-line-end="76"> Wes: <a href="https://www.netflix.com/title/80202236">Opration Odessa</a></li> </ul> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="Shameless_Plugs_76" name="Shameless_Plugs_76"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> Scott: <a href="https://www.leveluptutorials.com/pro">Node Fundamentals Authentication</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="78" data-line-end="80"> Wes: <a href="https://advancedreact.com/">Advanced React</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="Tweet_us_your_tasty_treats_80" name= "Tweet_us_your_tasty_treats_80"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

How To Build Your Own Auth

Poslechněte si podcast