Spruce 🛠 Setting up your first dapp powered by Sign-In with Ethereum

[Music] [Applause] no i'm fine cool let's get started um yeah thanks for coming this is the signing with ethereum workshop so we are going to give you a short intro on spruce and signing with ethereum and then go into some live coding sessions um yeah so we at spruce okay i'm oliver i'm leading the signing with ethereum um initiative at spruce and this is sam who is a software engineer at spruce um heavily involved in you know wallet integration and so on so at spruce we let user control their data across the web um so today today for keys i'm primarily used for signing transactions on ethereum but um for us at spruce it's actually more than this so we have we see that the keys have a larger potential and one of the use cases where we see um keys in wallets being used is for example for synonymous ethereum but we also have a decentralized self-sovereign data storage solution which is called kepler where you can use the wave ethereum login assertions more downstream to get access to your self-sovereign data sign with ethereum is a standard for signing in users with user control keys with your serium keys more specifically the standard was developed by spruce together with the serum foundation and enes we followed a very inclusive process we hosted community calls we have an issue improvement proposal and we have a discord group where we can exchange thoughts and facilitate discussions and problem solvings um on science ethereum so you're also like invited to join the discord to participate in the discussion um so what is signing with ethereum it's you know used to sign into an application and an example of how this works you can go to login.xyc there's an example that shows um you how to use um synonym with ethereum with your um no ethereum web 3 wallet so essentially it's a very simple process so first you have to connect your wallet then you have to create a specific synonym with serial message it has a few fields that i will talk about in a few seconds and then you get designed by your webs3 wallet and then you essentially authenticate after you verified the signature and verified the fields so it's it really helps you with contextualizing interactions so i think it will become one more important and yeah so it's currently um most steps they are just connecting the ethereum accounts connecting their wallets but um you actually also want to like um log in the users to remember things about the users like preferences and so on so you know you want to get from connected car that has to restart the game every time to the session sam that continues um the game from the last save state so before we had signing with ethereum the standard the eip we had a couple of different options of how this can be achieved so these on the left side there are a few examples of how this was used by different apps and the the goal was really to just um you know merge all these approaches come up with a unified approach and on the right side you can see um how a signing with your message looks like that complies with the standard and so really like the standard erp-4361 was really the job was really um to get things done basically to just unify the different approaches so we can actually get better ux from wallets so if having like a standard like this we would allow bullets like metamask or thali to render a nicer ux when a user wants to sign in but it also adds security specifically we we have some means that allow you to do mitigate phishing attacks so for example if you go to malicious.com and malicious.com generates a sign-in message they need to put and they would put like microsoft.com as their domain in it and the wallet needs to sign the message then the wallet can detect uh you are malicious.

com but you want to sign into a not up another application actually and can warn the user with a yeah with a ui with an error message which is very similar to what is done at the moment with with browsers and tls certificates um what flows are currently supported with sunny with ethereum so there are two main approaches so one is the what we call direct authentication flow that's really like you know you go to an application a website and then you use your meter mask directly or your more generally your web stream wallet directly to sign the message we have also another approach which is we are running a community governed identity provider where you can use um you know existing authentication protocols like automatic connect but this is more like you know bridge the world between web 2 and the web 3 worlds i think that's basically it for the introduction i think we can just go to the live coding session because that's the reason why most folks are here and i will hand over to sam who will show you a demo of how you can do that basically the direct authentication approach will use metamask to sign in all right let me make this a bit bigger okay can you guys see this uh maybe one more okay let me also kill this one all right um all right um so what i want to show you guys is uh log in xyz uh so this is the live site um log in xyz is like just a simple implementation of signing with ethereum um so maybe a bit about the stack uh there's a front end built using salt and then the back end is just like a simple express api server it uses like mysql as a database and instead of using like login password for user management we're using sign with ethereum so let's dive in we could do a quick example and then we can just walk through this example so go sign with ethereum i hit it let's see asked me to sign in with my account i hit sign and uh i could vote for my favorite emoji so uh previously i voted it remembers that i voted so i'm gonna hit reset i'm gonna vote again i'm gonna vote for rainbow submit and it's updated um so this is the live site so let's look at our local example and walk through it a little more um so um in our local example oops let me sign out um there's a couple of security features um in the science theory message like oliver mentioned uh maybe the first one is a nonce and that's kind of that happens locally so um let's see um so your your client should grab a nonce from the server uh this kind of prevents replay attacks every time you're signing the knot should be different so if i go actually it's probably worth inspecting network requests so if i go and uh connect with metamask uh all right let's see um sorry of course live demos i forgot to do something anyway uh i wanted to show you guys the request to grab the nons um it's happening locally uh it makes a request to this uh uh express endpoint to grab the nonce just a random number um and it's saved to the session so uh if i go back to metamask and i sign this message um it logs me in so what's actually happening so let's see we're making a request to the uh we're making the sign-in request uh so we're sending our our message um and we're sending a signature so uh if we look at our server um and we look at the sign-in request so we're able to reconstruct uh the message and verify it um basically uh by checking the the chain so we basically are able to reconstruct the message using this uh package cv message you can reconstruct the message in a variety of ways but what we do in the core part of this is validating message maybe in an existing [Music] like it may be legacy username password uh maybe we'd hash the password and then say okay does it match in our database here we're checking it on chain we're checking the signature uh it's just we're checking it's valid um if it is valid or if it's not valid maybe you just throw an error also we checked the nonce that came back so we the client reports the nonset used and then we checked to make sure that's the same knowledge that was signed so this is just like some simple validation make sure this is the user we want and if it is we issue a cookie and then we continue with whatever user flow we want so in this user flow we're voting so now i'm logged in i got back a session cookie i'm able to vote and my vote uh ideally counts um i introduced a bug on the local instance so i cannot submit trying to figure out like right before this um but i assure you it does work um so yeah uh so that's kind of like a uh just a simple example of like how we use this in uh just like a simple server so uh with that um maybe one other thing um kind of what oliver was mentioning some of the work we're working on is um oh man so many so many things um uh just like domain validation um so this is like just a way to test like metamax features um so if you did sign in with the request you can have a wallet this is uh basically a test build just to see if this works um where you can parse the message display it in a different way um and then sign in versus like just a regular signing flow just lets users see different things um like and then also maybe if there's like a phishing attack maybe the domain isn't mismatched the wallet can uh warn the user and say hey the signing request you're not just signing a regular message there's something up with this message it's pretending to be a regular sign request you can get some warnings um and then if you want to sign you can really agree to it and then sign so there's some there are a lot of benefits to using this and kind of for maybe the ecosystem overall um so with that i'll leave it to oliver cool i think that microsoft microsoft cool right so this was the direct presentation demo that um uses um the the webs3 wallet directly so there is you know no central party in between or something like that there's also nothing really stored on chain the interface is really just between the the app or the application and the web three wallet the nuance validation generation needs to be you know handled um either by you know by an api or by the app itself um i also want to show you a demo um of the openly connect flow and for this we we have like prepared a social connection for the off zero marketplace so essentially i would try to no switch to the other one there's my mouse on the window try to hit but i think now i have the problem that i can't really see what i'm doing okay let me just mirror my screens maybe that's easier so is it now mirrored yes so when i right cool okay so this is um the of zero integration so you can just then log into your of0 tenant and then it's really easy to configure sending with ethereum with r0 so essentially what you can do is you can go to the marketplace search for ethereum here it's a social connection and there's a description of how you would um configure cv so sign up with ethereum with your of0 application i can create a new one let me just example just say cv demo let's say it's a single page application then what i want to do is to add the synonyms ethereum login to this cb demo but first i need to find the social connection here um so for this it's actually required to so since this is an you know community governed openly connect provider that of0 connects to we would need to register the just created application as an openly connect client in the community government or mobility connect provider so i can just um first click add integration and because um so what what happens is actually that the opmedic connect provider would give me a client id and the client secret that i need to enter here in the social connection configuration but first of all i need to get my off zero domain and since the registration is based on a simple post request i can use curl register a new client the otc server would give me the client configuration so essentially most importantly um the client id and the client secret because this is the stuff that i need to do that i need to use for the for the cb configuration so it's under connections here so it disabled google because by default um google sign-in is enabled but since you want to use cv we enabled cv so one sec i think i need to since i didn't configure it in the first place i might need to find it here again so at integration already exists okay then i can manage it here and interesting save changes and now what is really cool about of0 um is that you can actually ah sorry i think i did something wrong now it's the wrong browser profile the connections here okay so i was i had actually have actually two browser profiles that's the reason why i got confused here so i apologize for that it's a client id and client secret save so now my cv connection is configured with my cv demo application i can go to my demo application go to quick start and you can just download the configured example for [Music] for of0 using the cv social connection i just created so of0 provides some you know um sample codes for for any kind of front-end frameworks also for supporting different types of architectures page applications but even apis and just normal back-end applications oops so let's just and then i think i need to also take care of one last step since i'm running the demo locally i need to configure this that's basically you know um or to allow the demo to run from localhost you need to set an allow list load call back it's here and i think that's not necessary save changes and bim run serve dude um oh yeah okay now it works so if i go to my browser and hit up the page then this is like the fully configured i'm of zero example i go to login and it didn't okay maybe i need to connections for whatever reason it's not enabled here why is it not enabled here okay it's also like the demo effect but normally you should be able to just um i think i hope you get the idea um that um you can then just um add cb as a social connection to your either existing of theory application or to a new of zero application and then you have like basically an openly connect provider that allows you to authenticate with cv and that's it so that's the that's the openly connect um flow um compared to the authentication flow where you don't need this um identity provider in between um um yeah yeah sure so let me just go back to the presentation i think we have five more minutes um maybe i can just uh also like um conclude the presentation now um so cv so we have like um a bunch of um um you know we have um docset um our documentation is on docs.log docs.login.xyc if you want to learn more about it so we have cv core packages in different languages typescript go rust et cetera the core packages have a couple of functions so it's really like therefore creating a signing with a serial message for verifying a message and for passing a message so this is like the core functionality and then you the the launch generation and then and the verification like triggering the non-certification etc something that you would need to be need to build either in the front end or in the back end and we also have a bunch of integrations so which browser can you actually see yeah if you go to docs uh locking xlc so you can see here we have the quad packages in typescript rust lxc et cetera but you also have integrations with existing authentication frameworks like next off gs or like you saw the off zero example we also have some added support to different applications which are very common in web spree um so i think a lot of people a lot of dows are using this course you can use um cb we created the cv plugin um for this course you can authenticate sign in into your discourse i'm using science ethereum we also have a few bounties for the hackathon for bounties so one is for creating new use cases that use cv and we have two boundaries for adding cv to existing projects and we also have a bounty for extending our either our cv core libraries or our integrations like um the discourse integration for example um yeah sorry that um the demo um didn't work so well um but um um but i hope you got the idea and you can try them out and if you go to login xyz all the code is in our github repositories so that's basically it so we wanna open the floor for um open for questions um if you if you have some otherwise you can find us also in the hallway outside thanks for your attention [Applause] any questions okay if there's no further questions then thanks a lot and see you see you around [Music] [Applause] [Music] you