Privy 🛠 Build dapps quicker with Privy while keeping user data safe

[Applause] [Music] so hello everybody uh we got 30 minutes and we're going to talk a bit about privy and how you can use privy to build awesome apps to delight your users and protect them at the same time during this hackathon which is super cool so before we start i'll introduce myself so who am i so i like to describe web to me as like the past decade of what i've been doing which is a lot of web 2 stuff i worked at cruise self-driving and pinterest social networking and a whole bunch of things and then six months ago what happened was my curiosity kind of led me down a web 3 rabbit hole where i decided to build an nft collection to kind of learn by building and i took the red pill and i swallowed really really hard and that just led me down a whole rabbit hole where i got really excited about all this tech learning solidity or the info that was missing and that was there or the potential and so what that has led to is a career change and now i'm kind of a builder at privy which i'm going to talk to you about today i'm the creator of the blockchain smokers so this right here is blockchain smoker 192 of my collection and i'm a big privacy tooling advocate and so i'm here today to talk to you about preview and what it can do to help you with your privacy infrastructure needs so how we're going to structure this we're going to talk a little bit about a problem that i like to call the user data problem after that we'll talk about how privy is a solution to this problem pretty fixes this and finally we're going we'll get into the fun stuff with a live demo so what do i mean by the user data problem so if you've either developed or even been a user in web 3 you've probably seen and been confused by this screen and this screen like many others is kind of like displaying the underlying issue that sessions are really hard and having a session that kind of propagates between experiences is a very challenging problem uh to the point where even great companies like metamask do a poor job now in addition to this we have another problem in web3 which is kind of shocking and there's a tweet here from earlier this year which is kind of funny and sad at the same time where megadow like kind of couldn't reach out to some guy because they only had the wallet address on their lists and if they couldn't reach out to him within us an amount of time they were going to have to dump 600 million worth of heath now this is crazy and this is because notifying off chain is kind of unsolved which is wild like web 3 has a lot to do still that's crazy let's talk a bit about a positive example so here we have like the open c profile page and you'll find profile pages like this on a lot of web 3d apps um and what do you see here you see like some information about the user some of it is public like the username and the bio but then other stuff like the email maybe in this case there's none but there could be like other kind of kyc data and you want to handle those like you want to have those so you can create personalized experiences like users come back to your app if it has a delightful experience and you can only really do that if you personalize and you can only really personalize if you have this kind of personal information so delightful which experiences require personalization for that we need two things at the very core you could you need more but at the very core you need user sessions for like in between session state and you need user tables to persist that state and to persist user information between sessions okay so we want to save user data what do we do that's hard and there's a debate about this right now you may have heard this debate the on-chain versus unchain problem i think vitalik was on a podcast recently literally debating this like two weeks ago and there's a lot of it's just it's not clear where the limit should be but i think it's very clear that there should be a limit and some data should never be on shane and the example i like to give is like your social security number you probably don't want that to be unchained ever right and so if some stuff is on chain and some stuff is off chain then we need to bridge that and so let's say your ledger and you're keeping user data like name postal address all these things off chain well guess what you can do it wrong it's actually very hard to get right and so ledger had a they got porn basically where like they were doing great on their security for their um hardware wallets but they were doing a lot less great on their postgres db they had pii data in plain text that got hacked and this shows that like when you do decide to kind of take user data off chain doing it right is really risky okay if you are gonna do it there's an old ada oh a famous adage that says don't roll your own crypto now there's a reason for this it's really hard um there's many mistakes you can fall into which are typically terrible for you like timing attacks and brute force attacks and weak randomness attacks architecture flaws which is a really big one um injection attacks and i could go on now you can build your own crypto but if you are going to do it you have to do it right and doing it right takes an insane amount of time and energy and expertise now you could choose to do this but typically when you're building a dap that's not where you want to spend your time and expertise and that's why you kind of shouldn't so we have a problem here right great products require personalization pii but collecting that is risky and if you do collect it it's hard privacy matters this is a big one i really like this one like one of the reasons why i kind of pivoted my career to web 3 is that i think the web 2 got something really really wrong and it's privacy and a lot of these business models are kind of built around an asymmetrical kind of knowledge of the users and in web 3 we have a crazy good opportunity to redefine how we do privacy and how we do interoperability of privacy and that's really cool and finally we need a bridge for off-chain data as we discussed cool so we have an issue um and this is where privy comes in and i'm going to talk about it in a second but you can find our homepage at providerio and i'm going to talk now about like kind of what it is and what we do and you can follow along with blobby who's on mascot on the second one cute little ghost cool so what is privy now at its core our mission is very simple we want to allow you to associate user data to wallets privately so bridging on and off chain data now at a very high level like the most core kind of thing we use in our js libraries oh actually i'll get that in a second so first of all like in a few bullets what do we do we have apis they're very simple we have js javascript libraries and these help you manage your off-chain data we have end-to-end encryption user storage so how does that work that means that like on the client everything gets encrypted and then gets sent over the wire like as cipher text and then you get it back as cipher text and you're going to decrypt it on the client and i'll go deeper into this but basically what it means is you have end-to-end encryption storage which is the right way to do kind of privacy and we also have sign-in rate ethereum session management which kind of solves those two issues i was talking about of data persistence and session management we also have transparent cryptography we're building in public and our crypto libraries are all open source and privy can never see your data in plain text the way we architected this is like we never see it and finally privy is ready to use right now and honestly it's going to make you kind of develop on steroids cool so at a very high level what does our architecture look like at a high level so at the bottom there you have the browser that's where you the developer is building a dap and that's where your stuff lives and maybe you have some unchained components which are on the right and then you kind of want to link your user which is in this case represented by the encryption keys in the metamask logo like you kind of want to link that and associate some off-chain user data with it and that's where privy comes in and you can see that like from the browser you can interact directly with our permissions engine which we'll get into in our data store to store and retrieve this user data so how do you do that what does it actually look like so and this is where like this is really if you're going to remember one thing from this talk remember this slide this is like the thing that's super powerful that privy does it has two cores privy put and privy get right so in this example i have a user id which is ox 872 and i'm not going to read at all and in the first four lines i'm kind of calling and saving two fields email and age and i'm saving them to the scripted data store and then on the second i'm just retrieving them now this looks really basic but actually there's a lot of stuff that goes into this so for this put call what's going on is like on the front end preview is first checking with our permissions engine that whoever is authenticated with the session whether it be the user or the developer like your app or a public kind of uh authentication like if they have access to this field right or read access depending on if they do we kind of encrypt it all on the client and then send the ciphertext up and then for privyget you're doing the same thing you're kind of checking with the permissions engine if the person that's requiring these fields is allowed to see them and if they are then you're retrieving that as ciphertext and decrypting everything on the client so this is ridiculous like you're doing so much in like so few characters with put and get you're kind of doing user data kind of encrypted storage in like the best manner possible it's awesome so that's the storage and the other critical part is sessions which i mentioned earlier so how do sessions look like so what we built and this is because after building a few apps we realized that session management is something that is like a key pain uh we built like a wrapper that makes it really easy to like kind of manage user sessions so this uses like um in browser providers like metamask or coinbase wallet and so in this slide it's kind of showing you like the api of our series session cb stands for sign in with ethereum which is in the ap standard and so you're initializing the session here and then you're just authenticating the user that's going to call up like the metamask notification they're going to sign a message you're going to know it's there and then basically under the hood we're saving things to local storage and we're persisting that like in between your views and then you can also create a client with that session and then you know who's authenticated it's the user that signed that message right so when you decide to retrieve fields later you know that who it is and so if there are fields that only the user can see they can see them and so in this last line i'm doing that i'm getting the email and maybe in this case only the user can view their own email cool so that's storage and sessions done so let's recap real quick with privet you can kind of get back to building products really quickly and you can do it right and doing it right used to be really hard you no longer have to have this trade-off we think that's really exciting you have you can store encrypted user data you can use signing with ethereum sessions and by the way everything i just showed you you don't even need a back end this is why this is a very hackathon friendly project you could just do this in two seconds with only your front-end so we do have a console which you'll need if you don't have a back end to kind of admin your fields and your permissions and i'll get into this we'll see how it works in the demo cool so we talked about the privacy problem we talked about the privy solution and now i have time to do a live demo with privy flush now i hope the wi-fi is going to be stable because it was a bit flaky earlier now before we get into the demo i want to do a very quick primer on permissions but if you're a developer this is probably sounding very familiar most things are defined by who can read them and who can write them this is true of like unix files all the way to like in privy the field so in privy each field has read and write permissions associated with it and who are the roles like who essentially could can read and write and there are three in privy they're self and that's the authenticated user think the user that kind of signed the message with the metamouse wallet there's admin that's you the developer that's kind of passing in the secret and public api keys that you got from us and then there's public and so you can imagine any kind of combination of these exactly like you schmod kind of like files on unix to see who can read and write them cool so i'm going to show you a demo and then we'll dive into the code on how it's working so the demo is this fun little app called privy flush which is kind of like encrypted dropbox where you can send encrypted files to an ethereum address so like everybody has an inbox by default and you could send the file to someone so you could maybe use this to like send a love letter that was very secret or maybe you were a bit more serious and wants to send like kyc data like someone's passport photo or driving license cool so i'm going to switch to the browser now so here we go this is pretty flush please appreciate my design skills so here what's going to happen um is that we're not logged in so i can't do anything yet but i'm going to sign in with ethereum and to make things more clear for you guys i have two kind of addresses i'm using here like my primary my secondary on my metamask and i put them here like my private my primary is 1d4a and my secondary is os 885. cool so i'm going to sign in with my primary here we go so i'm signing in with ethereum and this is the signing with ethereum standard by the way which is an eap that's super simple and it's just like it's normalizing and standardizing what this string looks like so that we get metadata that is a machine possible so we're signing this and now like the app knows that i'm signed in as uh this metamask account which for me is called push x cool so my inbox is empty and i'm signed in as one ox1da4 so it's this guy right and i'm going to send a file and for now i'm going to send a file for myself and so this is the file it's this uh driving license that i photoshopped i'm a developer not a designer so please forgive me and so i'm just going to send it to myself so i'm just going to copy the address from here and i'm going to put it in there i want an address and send and it is flushing okay so hopefully it worked and now i'm going to refresh the page and you got mail look at that and so now i can download and indeed i can see this so i just want to go over what happened here like i uploaded a i encrypted the file all on the client then i saved like the encrypted ciphertext somewhere and then i could retrieve it at a later time but when i retrieved it when i hit download like on the client we just downloaded the ciphertext and the privy client was decrypting it so that's super cool we just implemented like dropbox but with encryption out of nowhere and i'll show you how quick it was it's kind of crazy now there's a problem here though i can't send files to other addresses so i'll try i'll show i'll show you that it fails so i'm going to try and send like the same uh oops i don't know what i picked there i'm going to refresh something terrible has happened one second maybe the window's open ah i think you may be onto something no that's not it uh let me let me try hard quitting i'm going to restart the server this is what live demos are and this is what we're here for okay restarting the server see if that refreshes things localhost 3000. here we go i'm still logged in here we go yay okay so i'm gonna try and send it and we said i'm gonna try and send it to the second address who is not me right i'm logged in as ox1da and sending it to ox885 and so when i do this i'm here when i do this i'm going to get an error the error is not permitted to perform this operation on the field cool so why is that that's actually super simple if we go to the console so we see the the field here by the way it's inbox that's the inbox for the user the permissions is self and so that means that i can read and i can write only me self being the authenticated user so what i need to do is change this and i'm going to change it to we need a special access group actually so let's create that we're going to do one where anybody can write to me and only i can read so i'm going to create an access group i'm going to call it public rights self read and i'm going to say only i can read and anybody can write so anybody can write me like a love message so i'm saving this and now i'm going to say for my field for my inbox field i'm going to edit it and i'm going to say the default permissions are public write self-read cool so now anybody can write me so we've saved it now let's go back to our app here and i'm going to try i'm going to refresh and i'm going to basically try this again but we'll try a different file this is this is another nft so i'm going to send this and we're going to send it to the 085 and it's going to flush cool and now i won't see it here right so what i need to do is sign out and then sign in with the other address and we'll go and see if we got it back signing in with ethereum not connected this should work come on okay [Music] one second i'm gonna see if maybe it's because i'm con sessions are hard this is what i was telling you so maybe if i disconnect this and i switch to this and i kind of refresh now i sign in there we go sessions are hard so i'm logging in as the second address oh there we go it was it had to cue the things and we should have the file which we don't so this something went wrong okay i'm not going to live debug we should see it here and i probably made a mistake copy pasting the address i apologize about that cool so the demo is done i want to kind of kind of show what it would look like if we wanted to add a field so let's jump into the code real quick so this is by the way there's a lot of boilerplate code here but it's just like a create next app so if you're familiar with javascript and next this is like pretty straightforward so i'm going to go to like the pages and there's the main page which is index and that's where most of the code that we're doing lives so here we're using a session which is using our sign in with ethereum sessions that i talked about earlier it's using a react hook to kind of persist it throughout pages but what we care about and i'm going to look for it is privy.session.privy which is where all the preview interactions are happening so we can see there's really two two places where this is in action and it's like on page load we're loading the inbox by doing a session.

privy.com file and we're saying for the logged in address get the inbox field and then the second one is on the send which is the hook of when you post a form it's saying put file and you're giving it to the destination address and you're posting it to the field inbox and you're part pasting the file so real quick what would it look like to kind of add a message let's say we wanted to build over the hackathon i don't know encrypted messaging you could do this with preview really easily now i'm going to just create a new field here i'm going to call it message i'm going to do the same public read self-read kind of permissions cool and then in my app i'm going to create a new constant this is like a react hooks i'm going to call it message and a hook to call it set message and this is oops and this is used it's true it's a string and we default it to the empty string cool thank you very much i forgot the closing bracket uh the the computer is like this and it's just breaking my wrists cool so then we're going to get it here const message and we're going to do the same thing session.privy.get remember that and we're calling the session uh address that's for the oops for the logged in user and the field was called message cool so we're getting it and then if it exists because it could be null let's set it set message okay message here we go uh dot text so this is like a privy client thing cool so if we get it we're setting it to the variable message so now we have kind of the message in our handler memory in the thing message we need to go and display it so let's go display but beneath you got mail so this is where you got mail is so if you do i'm going to kind of add a div that just shows the message and i guess we could i guess we could show this only if the message exists uh which in react you do like this there we go cool so um what i forgot to do is that when i'm sending it um we need to set something to the message so for now let's go let's go write hello world so i'm going to do an away session.privy.

put this time it's just put destination address uh the field is message and let's just say whatever you guys want nyc hello world and you could obviously make this more dynamic but i'm keeping it simple for now cool so now we're saving it uh when we upload the form and we're hard coding it to this message and then we're going to get it so let's go try it out so we'll go back to privy flush so now i'm going to send a file to myself so i'm logged in as so i'm going to send it i'll make sure to send it to that so i'll send this loverboy and i'll send it to myself oh at x65 here we go it's flashing cool i'm gonna refresh i'm something's not going right and i don't know what it is although it is it was just slow you got mail and why don't we see the message let's go see in a console we can actually view data and so for the user ox885 there is a message i can't see it by the way this is cool so because like only the user self can see it like me as the admin can't see it um and so here it's not there but there is a field and it's it's there somewhere so i wonder why it's not seeing it i promised this was working earlier message dot text session profit.get okay i'm not going to debug this live i'm just going to do one last thing message and it was called message yeah this should work i can't think about why it's not okay um one last time okay i will i will debug this and send it in in our discord later i'm sorry about that cool i'll go back to the demo because we have only a few minutes left um so i just want to kind of emphasize it's broken at the end here but i promise it works i want to emphasize how easy it is to build like really powerful powerful kind of things with privy and so the demo i gave you is like encrypted files or like sending encrypted messages but you can actually go and see at demos.privy.io we have a few others we have like a pii demo let's say you're like an nft marketplace or someone who has to do kyc requirements you could collect them here you could go see that we have a send demo that shows how to collect email addresses so then notify your users and we have a quick start to get going and all this is open source by the way you can go find all our stuff at github preview io cool so um let's go back to our presentation so for this hackathon you can kind of find us at privy io you can make an account right now at console.providerio uh and our documentation is at uh doc stop private i o we have a discord and we have prizes so if you build anything with privy kind of we're going to consider you for this price you should go ahead and so our three categories are best data driven ux most interesting data stored and most creative cool so i have a few minutes left um i will take your questions how does it work okay so uh i wish i had the architecture diagram i'm going to kind of talk you through it then so the way it works is we use um okay i don't want to get this wrong live we because like the cryptographers have a whole thing here but like we use like a hardware security module which is like a dedicated hardware that's whose job it is to only kind of handle private keys and sign things and for each customer they have like a root key that's in that module and then we use that to like sign the right keys for each field and so when you kind of request a field both to save or to put you first go through our permission permissions engine we know kind of who you are and we can say this person can or cannot see the field and if you can then we go and fetch the rookie we ask it to like create a public private symmetrical key pair and we sign the field with that and that's how you do it like on the front and back end now we can get into like much more detail here and like we this is public and we want it to be publicly auditable so like come see me after and i can kind of redirect you to the cryptography people of my company uh because it's not my specialty and i don't want to miss them that's a great question right now there's i mean so i don't want to talk too much about pricing but like right now you can send pretty much anything because we have free tiers and in the first month it's fine uh down the line you'll be they'll be pricing per user and so like it'll you'll kind of pay for usage there yep great question so the question is is it only about encryption or does it also have like storage plugins like ipfs so it's a really good question so right now the way we architected it we can kind of swap out the storage component so right now it's kind of owned by us in our cloud storage but down the line we absolutely have plans so that you can kind of swap it out to either on-prem or ipfs airwave or whatever you want like the storage is completely decoupled right like there's the permissions engine that checks the permissions and then there's like the encryption that happens on the client and then you're sending ciphertext so you could really store it anywhere and so that's something we plan to kind of open up later cool thank you [Applause]