I've Tried NEW Passkeys in Laravel Starter Kits

Hello guys. This week Laravel core team released passkeys in all Laravel starter kits by default. Here's a tweet by Ben and in this video, I will show you how it works. If you don't know what passkeys are, this is the definition from the official Laravel docs. This is authentication for authenticators such as Face ID, Touch ID, and others. So, in my example, I will use Touch ID on my MacBook Pro laptop. So, in this video, I will show you how it works with the newest Laravel installer. I updated to the latest version, so passkeys are enabled there. And also, later we'll dive into the code and see how it works under the hood and how complex it is. And then finally, we'll talk about how to enable passkeys in existing Laravel projects with or without Laravel starter kits under the hood. Let's dive in. So, first let me show you passkeys in a new Laravel project installation. So, you do Laravel new, you choose starter kits. All of them have passkeys. And then the wizard is working after a few more choices and at some point you will get this question with choice of options. So, they separated the features to enable or disable. This is another new thing in Laravel starter kits with passkeys, which are enabled by default. So, you don't need to even change anything. So, all those features may be enabled or disabled for example, but all of them enabled by default and then you just hit enter to proceed. And then when the installation is done, you can proceed to your home page and in the login form, you would expect to have passkeys. But no, they are not visible. Why? And this is important. Passkeys work only on secure HTTPS connections. In this case, locally, I deliberately made that not secure because this is the default locally on Laravel Herd. So, now if I clear, do CD to passkeys and run Herd secure, Then it will enable HTTPS for that domain. And now if I refresh my page, I have HTTPS here and a button to sign in with a passkey. But now at this point I don't have my passkey yet, so let's register. Let's go to sign up. I will use fake filler Chrome extension to sign up and I just need to change the password to something more memorable because I will need to repeat that password in the security section. So create account, not now, and then I go to settings and security. And this is where I need to reconfirm that password and then I confirm and then at the bottom we have passkeys. Let me zoom that in. So this is how it looks. Add passkey. And if I click that one, I assign passkey name, for example, MacBook and then register passkey. And now look what happens. First, it suggests LastPass, which I will not do because it's my local thing. And then it suggests Chrome passkey and then I will continue. And now I will put my finger on MacBook Touch ID and that's it. And here I get an error, invalid origin, not in the list of allowed origins. And this is another gotcha that I wanted to show you. With HTTPS it's not enough to secure the browser itself in the code. Don't forget to change your app URL to HTTPS like this. And now let's try again. Security, add passkey, MacBook, register, and continue. Touch ID again. And there we go. I have my passkey registered. Now look what happens if I log out and then I log in and click sign in with a passkey. I have two passkeys actually, one from the previous testing, so I choose this one. I Touch ID and then I'm inside. So no password or even email needed anymore. Really convenient for many users. So, basically to enable passkeys in a new Laravel project with starter kits, you don't need to do anything. It's enabled by default. You just need to enable HTTPS. This is one of the examples of Laravel philosophy of batteries included by default. But, if you want to know how it works, let me show you some code. So, this is the commit to Livewire starter kit by Ben and Wendell from Core Laravel team. And this has quite a lot of features including install features command. But, what we need to pay attention to in terms of passkeys functionality is this. Composer JSON has Laravel Fortify newer version. And this is actually what powers passkeys. It's inside of Fortify, which is general package for authentication in Laravel starter kits. Also, it has a package chisel, but it doesn't really matter in this case. It's for internal mostly cleanup of scripts. Then also in the config Fortify, we have passkeys enabled. And some more configuration around passkeys is this. And finally in the same file, feature passkeys with confirm password true is also enabled. Then also have a new migration, so database table of passkeys. Let me show you what's inside. So, this is the database table with my MacBook passkey with credential ID and public key credential ID and last used at. So, nothing really fancy except for encrypted credentials. Also, in the package JSON, we have Laravel passkeys, which is the front-end part of that passkeys mechanism. And I'll show you that in a minute. And then the front-end part, the JavaScript with that Laravel passkeys and then the component for passkey registration with Alpine JS here. So, the thing that you saw visually, this is in the blade. And then those are included in the security blade PHP with those things on top. This is Livewire single-page component, if I remember correctly. So, all the logic with load passkeys, delete passkey, and all of that is added on top of security blade, and then this is the HTML part with flex in this case, but similar is in React and Vue starter kits. And also in the login blade on top, we have x-passkey verify. By the way, in all those changes, you can see Shazzle here, and this is the point of Shazzle. I don't want to stop on that too much. It's basically for Let me show you the repository instead. It's public, but it's kind of for internal use for building post-install scripts, remove unwanted features from Laravel starter kits. Side note, roughly a month ago, Wendell from Laravel posted this article on the official Laravel blog how they manage different versions of starter kits or variants, which are 21 were 21 at the moment. Maybe it's more now. So, they have some internal packages to keep that all in sync. It's pretty complex thing and fascinating to read. So, I will link that in the description below. And the final important thing that I haven't shown you from this change is in the Fortify service provider. We have rate limiter for passkeys, which in this case is set to 10 attempts per minute by default per credential ID or IP address. Now, let's dive a bit deeper, and you will realize how complex that feature release is. So, we covered starter kit change, but under the hood, there's Laravel Fortify. And in one of the newest versions, which was actually released 3 weeks ago, so it's not that new, feature passkeys by Ben, and this is the pull request here kind of explained, but also we have two new packages under the hood. We have Laravel passkeys composer package, and the one that you saw already, Laravel passkeys JavaScript client. So, see how many layers just to implement Passkeys. In the files changed in the 45, we have config for Passkeys. We have the same things that we saw already in the starter kits. Also, Laravel Boost skill is updated. By the way, update Laravel Boost and update skills because they constantly keep changing and updating the skills for all the Laravel ecosystem. And basically, if you want to get deep into how 45 works, you can take a look at that pull request deeper. And then in composer.json, we see Laravel Passkeys as a separate new internal package. By saying internal, I mean it's still public. It's not private, but it's not that talked about because it's kind of under the hood. Similar like Laravel MCP package is powering Laravel Boost, but everyone is talking about Laravel Boost and not many people talk about underlying MCP. But if you go to Laravel official repositories and search for Passkeys, you see those two Passkeys server for Laravel and then Passkeys client. I don't want to go too deep what's inside. If you're really into it and how it works, you can take a look here and read everything. But basically, what you need to know is for Passkeys to work, they need both. So, JavaScript client and this package is designed to work with it. What that Passkeys server does is actually adding these routes related to Passkeys. And then if we take a look at the front-end client Laravel Passkeys, which is installed with npm install or it happens automatically if you install starter kit, then the starter kit also adds something like this in your JavaScript. And then there are framework helpers depending on the starter kit or the framework you choose, React, Vue, and Svelte for JavaScript. And then that package on the front-end expects, where do I have that, these endpoints that you saw just a minute ago. So, yeah, that whole ecosystem of starter kit, then Fortify, then Passkey server, and Passkey client, this is how it all works seamlessly together. And then it raises the question, how do you enable that in your Laravel project, existing one, not Laravel new? And this is tricky. So, as an example, I asked my colleague Neringa to implement something like that in older Laravel 13 demo project, which was with Laravel 13 starter kits with teams functionality, but without the new passkeys. And this is how much work it is to enable. So, basically, you need to configure and install all those packages that I mentioned manually. So, front-end, Laravel Passkeys, then Fortify, then blade components, rate limiting. So, basically, you need to copy things one by one from different files that I showed you just a minute ago. So, for example, security blade, you just go and copy various parts, or maybe you can ask AI agent to do that, but there's no basically install in existing Laravel project, and this is easier. So, this is the easy case when you have already starter kits, you just need to copy-paste and move things around in existing files already with the same structure of starter kit. And if you have Laravel project totally not with starter kits or with older starter kits, which don't have Laravel Fortify even, then it's even more tricky, and we haven't even tried it. And for that case, actually, maybe I would recommend another way. So, there's a package by who else? Spatie. So, Laravel Passkeys, use passkeys in your Laravel app with almost 500 stars, created, as you see, the first commit 2 years ago, so pretty old and solid, which makes it easier in existing project to add the passkeys. And by the way, credit, it's based on Laracasts course on passkeys. And if we very quickly take a look at the documentation, passkeys in action, this is the video, in fact, a few videos, also a useful link about passkeys in general, how they work, and they are explained. I will link that one in the description below, including explain it like I'm five, so you can read even deeper about what's under the hood. So, for that particular package from Spatie, it's installable, composer required, then you configure the user model, and then do the things on the front end as well with different NPM package dependency. And yeah, you can read the docs for the rest. But this is not really trivial. Passkey as a security thing, it's quite complex under the hood, and that's why I keep saying you can dive deeper and read it yourself. I will not cover it in this video, otherwise it would be like 2 hours. But on the surface, what you need to know is Laravel Fortify has now passkeys enabled, and this is in starter kits of Laravel by default. So, if you are creating new projects with Laravel new and latest version of Laravel installer, passkeys will be automatically included. What do you guys think? Have you used passkeys as a user yourself or as a developer maybe without that new package and new functionality? Let's discuss in the comments below. That's it for this time, and see you guys in other videos.