Authentication, Part 1

We need to know who are viewer is so we can show them their video! That means we need to plugin authentication.

Authentication in Frontend Land

We have two applications we need to think about in terms of auth: frontend and backend. Ideally the auth scheme will be seamless between both!

• Moving away from cookies to JWTs
• A quick review of JWTs and how they work
• MFA, 2FA, OMFG

Services vs. Home-rolled

We can do so much more with Auth these days! Here are some services to consider...

• Auth0 and Okta
• Hanko
• Firebase and Supabase

Hello Nitro!

We'll dig in and leverage the built-in server that comes with Nuxt: Nitro.

• File-based routing, using fun convention
• Sending an auth code
• Verifying an auth code

Some Opinion: let's ditch passwords

I've run my own business for the last 15 years and the best decision I made was to ditch passwords (when I can). Browsers and phones are very well equipped when it comes to authenticators and biometrics - let's use them!

Code to Help

I whipped out some commands at the start of this episode in the console - here they are:

<span class="hljs-built_in">mkdir</span> server &amp;&amp; <span class="hljs-built_in">cd</span> server
<span class="hljs-built_in">mkdir</span> api
<span class="hljs-built_in">mkdir</span> lib
<span class="hljs-built_in">touch</span> lib/smtp
<span class="hljs-built_in">mkdir</span> api/auth
<span class="hljs-built_in">touch</span> api/auth/send-link.js
<span class="hljs-built_in">touch</span> api/auth/validate-code.js

<span class="hljs-comment"># Modules</span>
npm install nodemailer dotenv jsonwebtoken

I also created an SMTP service, which is this:

<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> dotenv <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;dotenv&#x27;</span>
dotenv.<span class="hljs-title function_">config</span>()
<span class="hljs-keyword">import</span> nodemailer <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;nodemailer&quot;</span>;

<span class="hljs-keyword">const</span> client = nodemailer.<span class="hljs-title function_">createTransport</span>({
  <span class="hljs-attr">host</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">SMTP_HOST</span>,
  <span class="hljs-attr">port</span>: <span class="hljs-number">465</span>,
  <span class="hljs-attr">secure</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">pool</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">auth</span>: {
    <span class="hljs-attr">user</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">SMTP_USER</span>,
    <span class="hljs-attr">pass</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">SMTP_PASS</span>
  }
});

<span class="hljs-keyword">export</span> <span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">sendMail</span>(<span class="hljs-params">args</span>){
  <span class="hljs-keyword">await</span> client.<span class="hljs-title function_">sendMail</span>(args);
}