Introduction

[00:00:00]
>> So welcome to Fullstack Authentication. My name is Maximiliano Firtman, F-I-R-T on Twitter, firt.dev, my website. And we're going to spend the whole day doing a fullstack project. So we're going to see how to do authentication these days. So we're going to start from scratch, creating a classic login form and see how we can do it better.

[00:00:22]
And then we're going to end up working with passwordless authentication with Face ID, Touch ID. We're going to see how that works on the web. So I'm a mobile web developer. I've been doing web development for a while. I'm from Argentina, by the way. So I've been doing JavaScript and progressive web apps for a while now.

[00:00:44]
So HTML since 1996, so long time ago. The same as JavaScript and web apps in general, and also I've been a back end developer in the days of classic ASP. Even before that, Pearl, not sure if anyone remembers that, but also PHP, .NET, Java, Python, and everything that you can count there.

[00:01:06]
I authored 13 books, typically on web, mobile, web performance, and more than 150 web apps in general. So I've been implementing login mechanism for a while as well. So let's start and jump directly into our topic, authentication. So today we will cover these ideas. First, what authentication is?

[00:01:33]
But actually, why it's important, I think that most of us understand the basics of why authentication is important. We wanna identify users and we wanna make sure that is the user and not someone impersonating the user. From that basic idea to other things like, what's the difference between authentication and authorization?

[00:01:53]
That is not actually the same thing. So we're going to talk about the state of techniques. So where we are right now in terms of the evolution of how we want to authenticate users on the web. We're going to start with login forms, because they're still there. So we will cover the basics in case you are starting with the web, maybe you are a recent full stack developer and you wanna implement your own login system.

[00:02:18]
Well, we're going to start with the basics of the forms, but we're going to see also new authentication flows that are part of today's design guidelines. And on that side, we're going to talk about the data structure. So how you should structure your database, for example, or object-based databases, it doesn't matter.

[00:02:39]
So we're going to see how that structure looks like. Then we're going to also create some APIs. So the endpoints, server side, the RESTful APIs to actually make that work. In terms of APIs, we're going to see credential management API, web authentication, also known as WebAuthn, and we're going to talk about passkeys and passlinks.

[00:03:02]
So we're going to talk about those new ideas that are, let's say coming, but they are kind of there, okay? So we will get there with time. So pre-requisites. So I'm going to write JavaScript, HTML. So if you know HTML and JavaScript, you're good. I'm going to use Node.js for the backend.

[00:03:22]
So having some experience in Node.js helps. If you don't have experience with Node.js, It's okay. You will understand the JavaScript code anyway, it's not is a big deal. And at firtman.github.io/authentication, you have a step on step guideline of everything that we're going to do today, including the links for these slides, in case you wanna follow along, and also the link for the repo that we will use later.

[00:03:52]
So I will give you that link again later, if not, it's in the instructions, okay? So, that repo, we're not going to start 100% from scratch. So I already have the HTML, the CSS, so we don't spend time on that and we spend time on the important part for us, that is authentication