Integrating Passkeys with the Safe Smart Account - ETHGlobal Brussels 2024

[Music] hello uh please raise your hand uh how many of you have thought how difficult or complex uh managing different keys can get okay and and also how difficult accessing to these keys can get as well right especially not talking about EAS but uh multi signature accounts that have multiple wallets so today uh we will be talking about pass keys that uh offers a new ux Improvement to handling U all these keys so the talk is integrating pasis with the safe smart account uh my name is Herman you can find me on Twitter at hermo and please important thing this is just a developer review some things are not audited so if you are playing around with this do it in uh demo apps or testing apps but not in production yet until the audits are finalized that will be soon we will cover a few topics uh brief introduction to pasis and safe and the benefits how to integrate them with the safe cor SDK what contracts from safe are involved in this process and a bit of the flow and Fin finally a a demo to Showcase how the user experience looks like so let's start with uh pasis pasis are a standard authentication method that lates biometric data like the touch ID or the face ID to provide a uh user uh experience that is much better also unlike traditional passwords with pass Keys you don't need to remember uh complex strings of characters and uh you can just rely on your uh on your physical data so some of the benefits or key features that pass keys and safe uh provide are simplified authentication uh using biometric uh data and Hardware Keys B Keys simplifies the authentication uh flow also crossplatform compatibility as safe passys is defined is designed in a way that is compatible with multiple devices as long as they support the web auen API enhance security uh as the private Keys uh associated with pasis will not uh leave the the device the the physical Enclave in the device so it's more secure also additional multiactor Authentication ation with uh multi signature uh we see that blind signing uh is getting more common as the ux uh is uh is improving so offering a multiactor authentication is uh great for the users now audited contracts this is in Gray because uh most of them are audited but uh there are there's one that uh still is in the process and available on multiple networks you will see in the coming weeks months how the contracts that are involved in this solution are uh deployed there for now uh the demo will be on seol so let's start with the SDK and what are the different steps that you would need to follow in order to integrate paskis in your safe account first of all some imports you need to do creating a pasy using uh the web auen API from the browser initialize the SDK create a transaction signing in the transaction with the pass key and submitting the transaction so let's see all of them with the Imports first you need to you need to install two packages the relay kit and the protocol kit uh they please pay attention to the the versions because they are Alpha version as not everything is audited again so please uh use this just in controlled environments not in production and then uh do some imports from the relay kit importing the save for 337 pack and then uh getting a utility from the protocol kit Now to create the passy uh we will use the web auen API that the browser is providing so there's an object Navigator do credentials that has a method create that receives an object uh that is called public key and has some properties inside like the public key credential parameter with the algorithm for signing this is has to be the same that is implemented in one of the contracts that I'll show you today um show you later uh a relay in party information uh us user information and some other data you can get more information on our docs uh if you want to Define this sorry uh at the very end you need to get the pasy object which is which is what we are looking for is an object that has uh an ID for the for the pasy and uh some coordinates and you can get that with the extract pasy data method that is receiving the pasy credential so once we have the pasy object we can initialize the SDK uh we are going to do this uh pasis integration using the 4337 flow as well because we don't want just to uh abstract the keys but also the gas otherwise it wouldn't make much sense right so the say 4327 pack provides a method in it to initialize it where we can pass a provider the network we are using also Aigner in this case is the pass key object we created before it could be a private key or whatever but in this case we want to use the pass key and then some information from the bandler and the pay Master we are using a pimo infrastructure there here uh so the the API URLs and also a sponsorship policy ID in case you want to get your transactions sponsored at the end of this talk you'll see H well I will provide you one so during this weekend you can get all the save transactions using this flow sponsored by Pino and uh sponsored by us using pimo infra and then you can Define some options to configure your save if you want more uh owners apart from the one you are defining like the pass key or the threshold here is one but it could be different once we have our SDK instance initialized we need to create a transaction the one we want to ex execute uh for that we need to define the two value data of a transaction we can even do a batch so here we are creating an array of transactions that we pass to the create transaction uh method inside the c437 pack this will return a safe operation that uh the signers of the safe need to sign in this case because we initialize the SDK with the pasy the Pas key will be signing this how with the sign safe operation method here uh after calling this method in the UI is where the user will see the popup and they will need to provide their credentials or the biometric data once we have it sign it we can submit it with the uh ERC 4337 Flow by calling the execute transaction method there's an executable property where we pass the sign safe operation and that's it in in the future for your safe you want to add more pass Keys it would be something similar there is a method this case in the protocol kit instance that you would need to initialize as well uh and the function create at owner transaction will uh return a transaction with the right data to add a new Pass key so after that you would need to create the safe operation sign it with the pass key and and executed so one save can have multiple pys if you want now let's see what are the contracts involved in this solution it all starts of course with an account that is safe and safe uh can have can be extended the functionality with modules and fallback handlers have you heard of them can you raise your hand okay uh modules basically allow to uh execute save transactions with different um with a different way of validating the signatures so they can have root access and the fallback Handler is a a contract that can Implement some methods that are not implemented in the core account but when these methods are called in the account the account will fall back so it's a way to add more functionality for these two we will use uh or we are using the say 4337 module which is a contract that is uh adding all the um all the compatibility with thec 4337 and we need to enable it as a module and as a fullback Handler this everything is just done by the SDK here I want to show case a bit what is happening behind so we don't have two instances but one instance that is used uh in this with these two different roles now the the account is multi signature can have multiple signers but if you are using a pasy you need to set up that pasy as a signer when I say that pasy I'm uh referring to a contract that will uh validate the paski uh signature here we are using the save web outen Shar signer uh this contract is a single tone in every Network or in any network at some point um that will be able to that that should be enabled or should be added as a signer on each uh account if you want to use aasis if you want to use more pass Keys then there are other contracts uh like the safe web auen signer proxy uh that can be added and that would be used for a second signer and we can add more and more this proxy is a single tone and also has a factory you can call to deploy it and the main difference is that if we are deploying an account with a 4337 we just can deploy one contract which is the save and not appr proxy at the same time so this share signer should be used for the first time as it's already deployed there and then if you want to use more pasis the SDK is doing this uh it would deploy uh this other contracts and now with the ERC 4337 how the flow would would look like is uh something like this are you familiar with the ERC 437 flow validation and execution uh faces well it starts with uh the bandler or after you create it and signed the the um well the transaction you send it to the bandler the bandler to the entry point and then uh the the entry point is calling your save to validate the the signatures it is providing the transaction and the signatures the save is um forwarding this to the module that will process it and to check the signatures it will detect that it was signed by a contract the one from the pass key so is not able to uh check the signature the account itself so it will need to check with the share signer that will also check with the Au that is a contract that sa created to do the validation of the signature and at the end it will return to the entry point uh if the validation was successful or not after that the second part which is the execution phase uh the entry point will call uh the execute user up in the in the save the save will let the module to create a transaction and to send it to the Target this was very fast uh but now we will see a demo hopefully if I can share my screen or yes okay so here is how uh an integration of safe and pass keys in adap would look like we have this is like the login page where you can create a new Pass key or use existing one if you are uh an existing user so if we want to create a new one we can click we can decide where we want to uh uh create the the pass key we will select now uh the Local Host the pass is called save owner will only be saved in this device I can use the touch ID and now um it is interacting with the web auen uh API from the browser and you will see that it calculates the save account that is not deployed yet until the first transaction is executed and then we will be able to mean an nft gas l so this is uh the save we will that will be ours now we can mint an nft this save is configured as a uh one owner and threshold one so it will ask for our signature and we will use the pass key okay with a touch ID I'm signing the transaction and now it's executed so this uh Transaction what it did we can see it here in the save uh app we can go to the settings we see that it has an owner this owner is the contract that we saw before that is associated with the pasis if we go to the modules we see that it uses the 4337 modules and uh if we go to the transaction we see a transaction executed with the creation of the save and the meeting of the nft if you want to get more information you can copy the transaction has paste it in tenderly it may take uh a bit of time and there you can see yeah it takes a a little time to get it from there and there you can see all the trace of the transaction but we don't have time for that so let's go back the slides and after the demo um we have some resources on GitHub with the safe cdk if you are interested in seeing how uh all this integration is implemented safe modules if you are interested in seeing the implementation of the contracts that we showed and the safe modules deployments to see where these contracts are deployed also I recommend uh checking the docs do docs. safe. Global uh where we have uh some guides tutorials and some context on uh all of these regarding passys and finally what we are or what you are expecting the bounties we have we have three tracks uh the first one is 4K uh two prices in total 4K uh for the best app integrating pasis creating a a dab similar to the one that I showed that uh showcases this uh this way of signing the second track is uh related with the ERC 4 um ERC 7579 you can read more in the in the website 4K as well two prices and the last one is like a wild card for the best app related with save 2K and if you want to get your transactions sponsored uh this weekend you can get this code and copy paste it in the initialization of the save 437 pack feel free to come to our booth anytime to uh well to check any questions and thank you for attending [Music]