Video details

Luc van Kampen - Passwordless with Web 3 and React - React Live 2022


Luc van Kampen - Passwordless with Web 3 and React
Ever been curious about passwordless authentication or web3? Ready to throw away your password forever? Join my talk and learn about the world of web3 authentication and what web3 technology could do for us us.
#reactlive #jsworld #jsworldconference #frontendlove #frontenddeveloperlove #javascript #reactjs #angular #react #vuejs #vue #vue3 #typescript #graphql #jamstack #amsterdam #conference #svelte #sveltejs #next #nextjs #staticsite #css #html #nuxt


All right, good morning, React Live. I am super nervous. I'm going to start this talk off with mentioning the fact that I was told by multiple people to imagine all of you in your underwear. Considering I would not like to leave this stage with PDSD, I will not be doing that. So you're good. All right, so passwordless authentication with Web Three. This is me, I exist or something. No, as it said a second ago, I'm a front end consultant. Passionate people, they're awesome. And I understand that we're having a short break. The timing is off a bit, but should be good. So I will try to keep it short. All right, this is path from zero to hero past with list authentication with Web Three. All right, so the agenda as follows. First, we're going to talk about the problem. Don't worry, you don't have to actually remember this. I'm just going to go through it really quickly because it's important or whatever to have an agenda. So we're going to talk about the problem, we're going to talk about password list, we're going to talk about Web One versus web Two versus Web Three, talk about migrating the Web Three identity management. And last but not least, if there's time, a short demo. Obviously I won't be doing a live demo because technical difficulties. To get started, I do have to give some disclaimers. So does my phone, apparently. All right, here we go. I will go very fast. Again, I am nervous. This is my first talk, so it's going to be fun. If I do go too fast, there's recordings, deal with it. If I pick your interest, that's awesome. There is more to find on Loop Doc computer, on my blog post and other stuff. And otherwise we have an amazing talk after this, hopefully full stack with Web Three by Nader. So that's going to be great. Last but not least, I cannot guarantee that I'm funny, so my apologies yet again in advance. Also, I have tried to include as minimal code as possible and as much cool images, just like earlier today. Although I am not as good as Maggie, we're going to give it a shot. So also, quick, thanks to Alba for getting me into slide of slidev is awesome. You can code your presentations or whatever. And for React Live for having me today. Alright, password authentication. Let's be real. There is only one reason that I like passwordless authentication. It's because it's cool. Okay, I'm kidding. It is obviously because passwords are a pain. It doesn't matter whether they're stored here in your head, here underneath your keyword, like I see some of my coworkers do, or in your favorite password manager, which exists. Password managers. The question is why? Why do we need a password manager? Bit Warden, LastPass key Pass and many others aim to solve a problem that shouldn't have been there in the first place. We deal with passwords and all this fun stuff every day and you're supposed to have a different one for each site and somehow remember all of them and the minimum of this many characters, the capital letters, numbers too complicated. So pastor manages aim to solve this problem. I'm a bit ordinary fan because all of these fun reasons but the real question is why do we need this? And it's because password one, two, three explanation mark is just not going to cut it. We need something secure enough or at least secure in the sense that a potential hacker or attacker is going to spend way too much time trying to get it and give up. Right? If you have your 30 character password, if the site even allows it, then you should be good to go. So it's about security. Something like this could be a secure password. Agreed. That is if you stored it in a password manager only use it on one website, had it automatically generated, buy some random seed, blah blah blah blah blah. And if it wasn't password one two, three in base 64. So website developers saw this and they said, well we could either go to Google and beg them to add password list to Chrome or we could just add multi factor authentication. Good luck. You're going to be carrying your phone even more. You want to use Bstick to log in? Yeah, but you're going to have to press the button. So multi factor authentication consists of something, you know, like the password, the problem which we previously discussed and something you have like your phone, right, where you get SMS tokens or OTP tokens or all that fun stuff. Something you have like physical mail. My bank, fun Fact sent me three envelopes when I signed up for a bank account. One sent through Postanel, one sent through DHL and one sent through FedEx and they all contained a snippet of my password. Sucks that I'm friends with all the postal guys because I'm addicted to AliExpress so they probably have it as well because they're friends too now and then. Last but not least if according to RFC 1149 you want to do it through messenger carrier pigeon not recommended, will take a long time to log in. Great excuse for your manager. So what if we wanted all of this lovely multi factor authentication goodness but in a single factor? How do we go about that? So allow me to imagine you this the flow a user experience story. Okay, this is the way that I envision past this authentication. Obviously your interpretation may differ but it's pretty simple. Allow me to show you. First I want to see the thing. This is some kind of website. There is a login button. Sadly I can't run up to the screen and press it because they told me to stay away from there. But great, a button seems pretty self explanatory so far. Secondary. I want to prove who I am. We're not going to question the means of proving who I am for this specific slide. And then last but not least, I want to profit. Because every good presentation needs to end with a point. Profit. Because profit capitalism. So we call it password is authentication. Great. Obviously there's already a ton of implementations out there. I wasn't allowed to say shitload that deserve a mention, right? So I'm just going to go through them. They're great, yet they're all still work in progress. So, first of all, PIV, open, PGP, FETO U two fido with like two with resident keys or whatever. It's another nightmare. Anthony has a blog post about that. And Web Three with the wallets, which is what I will be discussing today. So I see you looking at this list and you go, PIV, open, PGP, feedwft, feed, two, resident keys. What the hell are all these things? So what is Web Three? Right? So before I get to even use the word Web Three in a presentation, I'm going to have to say some buzzwords, and I'm going to prepare you here. I'm only going to say these buzzwords once. I will not be repeating these again. Okay? So here we go. NFT exchange rate. Okay. Market, cap, crypto. Great. Okay, now that I've said these, I will not be repeating these again. I hope the crypto chats are happy now I will continue with my presentation. Please do not sacrifice me. So what is Web Three? Before we can talk about what Web Three is, we need to question that number over there. Because I know what the web is, I think, and there is a three, which means there is probably a one and a two. So it's time for a history lesson. Boring. So let's start off. We started the world with Web 1.0, I hope. I don't know why we put that .0, by the way. There is no .5, but fine, Web 1.0. Web 1.0 had one simple goal. Transfer documents. Okay, so Bob wants to talk to Alice, and vice versa. Alice wants to talk to Bob, and they need a way to communicate. So we had Http later, Https, we had the HTML, all that fun stuff. So transferred documents, right? Bob and Alice were having a great time until Alice got mad at Bob because that's how marriage works. And Bob started just shortening all his words and putting them in weird enters and adding ASCII art around it. And Alice was just like, I'm done with this. So they needed a standardized way to do this HTML, and it also came with this fun hyper text link thing feature. I don't know, I just work here. So come 2004, which we later denounced at the beginning of Web Two, web Two had a focus on user generated content. Bob could now talk to the World Wide Web. I think that was from before I was born. No, I'm joking. And second of all, it would be an API driven world where your mom could talk to your smart home, could talk to your bank, could talk to your mom. Please don't tell my mom about my finance. I spent way too much money on AliExpress. Anyhow. And then later we realized that maybe with the great efforts of Twitter and Twitter bots and everything, but maybe it wasn't such a great idea to let your neighbor care. And on the Internet regardless. Come web 3.0. Okay, so we finished our history lesson. We're at Web 30 now, right? But what? So Web 30 has a couple of points as well. It's decentralized. I'll get back to that in a minute. Secure and it's open source. Open source? What is that? So I will cover this really quickly, but it's distributed processing. The user controls the data. Everybody is part of the network. It's not just some server and some data center. And last but not least, we heavily rely on cryptography to make everything safe, secure, and be able to trust each other. Right? Because if I run a computer, you run a computer and someone over there runs a computer, then how are we all going to agree what is currently happening without somebody running on stage and going, nope, that's not happening. Right? Again, me using swear words. So I see when people look at this, they see distributed processing, they see user control, they see cryptography sketchy. We're going to launder money and a lot of the people will say goodbye to the data center, but not so quick. Yes, with Web Three, hosting has shifted. We're not talking about some megacorporation in some huge data center. Google and Facebook, they build their own data centers. It is ridiculous how much work goes into those things, but I'm addicted to systems, so those are great. But in this case, the user pays for the hosting the way they do. That is for every read and write. Sorry, let me rephrase that. For every write, the user is charged a small amount. We're talking 10th of a cent, depending on what chain were based on or what smart contracts were using, et cetera. And reading is free, which in my opinion, it should be. If I want to load data, that shouldn't cost me anything. And I understand that in the modern world, we're selling our soul to the devil or Google Analytics, and it's great. You know, you get ads for products you've already bought and then you're like, okay, I don't know what to do with this. But in this case, all you do is you make sure you have enough money to pay for your Internet bill and some money on your computer and you're set for years. Because in this case, instead of one big corporation paying the hosting fees, it is every user. Everybody in this room chipping in a tiny bit. So what are the differences between Web Three and Web Two? Believe me, I'll get to password list. Calm down. So, in web two, we have the back end. You're NodeJS, your Dino, your Python. They're great. They're awesome. I love them. In web three, however, we've adapted. We've added new features, we're talking smart contracts, we're talking solidity, we're talking Ethereum, we're talking all sorts of specs that have come out whose names I can't even remember. I'm too busy remembering all the RFCs that the ITF comes out with, because remembering the code for HTCPCP and HTCP CPTA is just so great. Next, we have the databases. Your Zillow, your Cassandra, your Redis. They're great, too. In web three, however, we have the blockchain, decentralized yet again, user controlled yet again, et cetera, et cetera, et cetera. CDNS, your Netlify, your Cloudflare, your for sale are the Interplanetary file system or file coin or similar things where we are all hosting the data. And everybody that has a node, everybody that is part of the system, every single computer. The gig of space you have left on your iPhone is contributing to this network, right? If one person in this room has my website on their phone or on their laptop, suddenly everybody else has a faster loading page. And last but not least, the front end, your favorite react, your view, your angular and your spelt and your many more options. You thought I was getting rid of angular, didn't you? Unbelievable. Okay, so the big question is, when we look at all of this, how do we maintain our identity, right? Because identity is important. I don't want to lose who I am, even though I live in a huge society with a bunch of individuals and everyone is obviously different. So the way we do this is through public key authentication. Big words. Public key authentication is super simple. It secures communication. It secures the fact that you can sign a transaction. And it is a lot better, I can tell you, than sitting on a piece of paper because I can grab a pen. You can grab a pen. She can grab a pen. Anyone can grab a pen and forge my signature. Kept my point. Verifying your identity through usage of the above and many, many more things. So public key authentication is not new. We've seen this all over the place. We're talking GPG. Signing your Git commits, right? Hopefully you do that. I don't know. Some people don't. A lot of people don't. It gives you a nice check mark next to your commit. Come on, guys. Okay, a nice verified thing on GitHub secure shell, SSH to log into your servers. I don't know how many of you do DevOps or ops or server management, but I'm a weirdo, and I like hosting everything on my own infrastructure. So SSH is my daily driver at this point. TLS and SSL. Hopefully at least all of you are using Https today for your websites. If you're not, yet again, I will be disappointed in you not that that matters because I'm just some random guy on this globe, but https TLS SSL public Key encryption, encrypting, email, something governments could learn a lesson from, and the blockchain and many more implementations. So I mentioned signing earlier, and I want to get around to talking about that real quick. Why is this better than a signature, right? On paper? Signature, because we're still talking about signatures. Just a digital one. So imagine this. You have your private key, you have your public key, and then you get a payload. Hi there. I'm Loose Mince. That's my nickname, by the way, if you want to try and find me on the Internet. And I'd like to sign in the loop to a computer. Not that that has a login screen, but for purposes of this example, I don't want to use any third party websites and have somebody get mad at me. So loop computer is what we're signing into. So we sent this payload and we're requested, can you please put a signature down? This underneath this. Can you please put a signature down? So I take my private key, I walk up to the screen, I'm going to do it anyway, and I just like, wham, thanks. I pressed twice, I got too excited. There's my signature. That was a big fail. And TADA. So I take my private key, I take the payload, I take somebody else's public key or whatever, and then it is signed. We now have some kind of compound thing, some kind of subject thing, some kind of user ID thing. Do you see how this is basically just JWT, but signed by the user instead of by the server? It's pretty crazy. If we add our public key to this, the server now knows who we are, can check that we are who we say we are because our signature and our public key match. Congratulations. We know that you're a looseness and that you're trying to sign a loop to a computer. Hopefully none of you are taking that down because I'd like to log in securely. So let's talk about this, the Flow a Revised User Experience story. Okay? So we take what we talked about before, the see the thing proof who I am. Again, we're not going to talk about the means and profit, and we're going to look at it this way. Okay? Here's a sign in screen. I have an extension installed here called MetaMask specifically for ethereum based chains, but it's besides the point. It's an extension that lets you safely store your private key and sign transactions. And it just exposes an API to the JavaScript world using window ethereum or window e. Great. Over here we have a Connect wallet button with a cool gradient, which is fancy web. Three terms for the log in button, and we press that. Unfortunately, even though I am Dutch, I'm not tall enough to reach that button, so I will not be trying but you press your button and then you get your little pop up with your payload. Seems like we've seen this before, right? So, great. We run up to wait, we press yeah, we're signed in and profit. We're there. Okay, we're there. We're logged in. Obviously, this has loosened studio. I have an ENS name for the average user. It would show their public key. This is the Rickroll link. But that's fine, right? Maybe my example is paraphrased a bit. So great. We profit. So if we compare them side to side, we see the thing, we prove who we are, proof who we are, and we profit. Seems pretty good. Okay, so let's talk code. I'm going to be very short here with my code. I have seven minutes remaining. My aim was to try and get through this. I will not be doing this live. Don't worry, we won't have any technical difficulties. But there will be code ahead. Okay, it's going to be React. I'm using our React template. It's just like create react app, but it's a little more minified, a little simpler. And we're going to create a custom hook, import our stuff. I'm using At Web three React core here. It's a great library that lets you combine ethereum and salona and a bunch of other things. So you can easy use their APIs. And if you want to switch, you can. And I'm importing Ethernet project, which is one of the open source projects that lets you interface with the window data theory. Might be a lot nicer. We create our hook, use off, then we run our function, and then we return it. Yes, I understand this is a wrapper, but believe me, once you get into all this fun goodness, you're going to want to add extra stuff. So just use off. Let's use our hook. Here's our main app components. We have Active. We have if we're active, show the home page. Otherwise, show the login yet again. Here's the part where I bash it and I say, please use a turnary statement. But thank you very much. Next, let's create our login component. We have a login button. We just add the hook with the activate function. We create our function. We sign the function and we call Activate and we give it an injected connector, which is a really fancy way of saying, please let me talk to MetaMask. Great. Awesome. Nice. And it works. So let's see it in action. So the following is going to contain a GIF. And usually Slidev decides to just run my gifts the entire time. So if Rick Astley is dancing in the background, my apologies, but let's give it a shot. All right. See, it started at the end. Connect wallets, MetaMask, next button, connect button. And we're logged in. This is pretty smooth. I didn't have to pull out a physical key. I didn't have to pull up my phone. It's still secure. It's the same way we sign into our server remotely. It's the same way we do Https, everything. It's great. Obviously, the sauce or source code can be found at git. Comusmanweb three offdemo. And then the question you most likely will have is, what are the next steps? Where does this go? Obviously, if you're using the blockchain and you're using your smart contracts, you can just put a line in there saying, Require user signing, or the user needs to at least submit this amount of whatever currency we're dealing with or whatever. You can add amounts to certain actions. Something could cost something. We can create things on the blockchain. We can create objects, all this crazy stuff. Or if you're a more centralized kind of person, we just talk to a back end. I have enough websites that, well, maybe not, but soon, that use Web Three authentication, even though the back end is still hosted on my own server. Great. And all you'd have to do from your back end is just send a request to the front end saying, here's the payload, please sign. You know what I mean? Like the interrogator that walks in that says, here's your nondisposure agreement. Sign the thing, or we're not letting you out. Okay, so great. We can talk to it. We can sign transactions. We can do all this fun stuff. We can use a bunch of other libraries, but it works. So what about the future? Are we seeing all the data centers disappear in, I don't know, the next tomorrow, next 24 hours? In my opinion, no, most likely not. I think that there's a lot of things we can learn from Web free. There's some awesome stuff being done out there. And even though not everything obviously deserves to be the winner, I do think that we're heading into a new era. Call it a Web 2.5. Obviously, this is my prediction for not the future, a future which is Tom Scott quote, in case you know Tom Scott. But the idea is that in Web 2.5, we can take our Web Two technologies and our Web Three technologies and find a happy medium, a transitioning ground, if you will, a place where we can benefit from both, where your manager will still be happy because the server costs are skyrocketing, because the Amazon costs are skyrocketing, and because sales are doing good, because they have control over the user. So let's take a moment to breathe. We're almost at the end. Lunch is in sight. Don't worry. After I gave this presentation the first time, a lot of people came for like, hey, Luke, I like your presentation style. Why? And they were like, can you explain blockchain? So there is a talk blockchain from zero to hero on my YouTube, if you want to go watch that. I don't know. Next, I just want to rick rolled the entire theater. But last but not least, this is password, this authentication with Web Three, I'm your host loosemans. Well, for this talk I'm the speaker loosens, but fine, whatever. Thank you for listening. If you have any questions, speak now or forever hold your peace. Just kidding. You can come after at the end of the lunch break or whatever. During the lunch break? I don't know, some time. Or hit me up somewhere else. You'll know where to find me. The slides are available on loot, dot show slash web three off where my blockchain presentation slides are also available. I don't know why you'd want to go back through these, but sure, do your thing. That was the end of my presentation. Thank you very much.