BUIDL for All: Native Mobile Web3 Apps by Jungho Bang

GM everyone. Uh, thanks for joining my talk about native mobile web 3D apps. Uh, my name is Jung-ho. I'm a software engineer at Coinbase. Uh, actually, please note that uh, the views here are my own and if there should be anything to blame, it's all on me.

So, uh, why mobile? Um actually I I spent some time to prepare this slide and I realized that um I expect uh we all came to this session because we already kind of feel or know that mobile is going to be mobile is where the next billion users are. So probably you'd need me to go over these big numbers or like give you some like history lessons on how web two apps evolved with mobile. actually mobile dabs or like mobile web 3 apps are already out there. There are like social apps like uh web 3 messenger like tribes, NFT marketplaces or defy apps and the numbers are growing and even some like web 2 giants like Twitter or Instagram they started to like adding web three features to their platform.

So then why are are we here? So what makes building mobile web 3 apps so different? Like isn't it just like calling some Infura or Alchemy calls instead of just web two APIs? Well, the biggest difference that I think on building web three apps is about wallet specifically about like web to uh add to wallet communication. Uh wallet is your like web three identity.

Devs needs to communicate with wallet to ask users to do certain actions. Um so this talk uh is about tab to wallet communication especially on the like mobile devices where uh you have some kind of like unique constraints. Uh and before we jump into it, let's quickly go over some existing solutions that we use with dabs on the desktop. Um there are like many different method that you use like hardware wallets or like online wallets like MTC or smart contract wallets. But on this talk uh let's focus on the most popular ones which is like desktop wallet and mobile wallets through relay servers.

So first browser extension desktop wallet like uh Coinbase wallet or Metamas. Uh these browser extensions inject uh EVM provider and turn your regular browser into a web3 browser. Uh so the tabs can use this provider to communicate with wallet and the key here is that tab and wallet are on the same program browser where they are on the same device. So communication between the provider the DAB and wallet is fairly simple. You can just use these kind of like um web browser APIs to send and receive messages between DAB and wallet.

Uh so the communication here is direct to each other. When using desktop tabs with your mobile wallet and your phone, we are in a different scenario. Now the tab and your wallet are no longer on the same device. So to communicate to each other, they need some sort of like intermediary to pass messages to each other. for example like wallet link relay server for coinbased wallet or wallet connect uh and the messages are encrypted end to end so it's secure the relay server doesn't have access to the content of the message so it's good and to share the information about the session uh usually uh it uses like QR code scanning uh I think it's something like yeah uh sharing a PO box with your friend to talk to each other like wallet link is like a post office and the session for your for the tab and wallet is like PO box to just like pass messages.

Uh so these are the most popular method that we use currently for desktop deaths and can we use this method for mobile deaths? Um actually yeah it's kind of you can you can actually use that uh and that's why we already have handful of mobile web mobile web 3 apps out there. Um let me just quickly go over how they work. So first uh there is a way to use the good old window. Ethereum on your mobile phone.

Uh mobile wallets like Coinbase wallet have a uh so-al inapp browser or tab browser in it. So you can just dip link into this wallet, open up your web app, run some like web three tasks and get users confirmation and go back to your apps and use the data. Uh and that's actually how Twitter mobile app works. Uh it asks the user to sign certain messages with some nonsification. But uh as you can see the whole the flowchart is quite cumbersome since you need to build and host a separate web app for this whole process.

Uh and this might not be something familiar to most of the mobile developers like at least for me and it's not suitable for like anything complex beyond some like simple tasks. Then uh what about the relay server method? um actually seems a lot more promising because first of all wallets already know how to talk to these like relay servers and here you don't need to scan the QR code because you can just deep link uh you can just share this uh session info with deep link and it's already like end to end encrypted so it's secure all good well uh there's one big difference in mobile use case uh compared to how we use this method for uh like desktop apps. So communication happens within a single device and your phone has some constraints there. So mobile devices have quite limited support for multitasking which means that like you can normally use just only one app at a time and when the app gets backgrounded the process could get suspended and you might lose connection to these relay servers and even in like super ideal cases requiring this kind of like dependency on the like external services could introduce like reliability issues.

So can we have a direct channel between client I mean the mobile DAP and wallet without having intermediaries. Uh that's what I'm going to talk about today. Uh introduction was quite long. Uh and this so mobile wallet protocol this is a new app to wallet communication protocol built natively for mobile uh which has this nice aspect. The first thing how does MWP provides direct channels and making it more reliable without external dependencies.

um well it uses tip links to send messages to each other uh by serializing and encoding messages into some sort of like URL. So for example here this is uh some example message. It has an identifier of your app as a sender and it has a some content with requests with some like JSON RPC calls and some metadata and you uh MWP encodes this data into a string and appending it to deep link URL of recipient. So that's it. Uh problem solved except uh deep links are not secure at all.

Um if you're curious yeah you may like Google this like you may read more about it like URL hijacking but earlier I said that MWP is like secure. So how can you ensure security? Uh actually what does even mean by being secure. So I think it's about ensuring authenticity and confidentiality. Authenticity is about uh from the perspective of the recipient, you should be able to verify the incoming messages is actually coming from the sender.

Uh well, this problem sounds quite familiar to all you like cryptof fox. Uh it's quite like well-known problem in cryptography. You may just use like message signature or uh in MWP we use uh something called defy helman key exchange. Um it might sound a bit overkill but uh first let me just try to explain it in 10 seconds. Uh each pier generates key pairs.

Uh by the way the keys I'm talking about here is nothing to do with your uh ethereum account. It's just like pure generic cryptographic keys. So gold keys here are private ones. Client has circle ones, wallet has rectangular ones. They first exchange their public keys with each other.

It's safe because it's just public keys. What Dy Helman gives us is that by using private your private key and public key of your peer, both of you can derive the same identical key on their own. So since these peers now have a shared secret, they can just encrypt and decrypt messages between them and they are the only ones who can do so. So nice uh you can drive a same shared key. So with that we can ensure authenticity.

Recipient can just check whether the message can be decrypted with the shared key shared secret that you have. Um confidentiality is in opposite direction. sender should ensure that the message is kept secret and accessible only by the recipient. Uh well actually we already solved this like you can use a share secret uh from this whole like defy helman uh stuff and encrypt all the messages. So you can ensure that only your peer can decrypt this.

Uh but there's actually one more thing about confidentiality. uh you don't want to send this message to some random apps even though they cannot decrypt this. You just want to make sure that the message is going to reaches to the intended recipient. How can you do that? Um actually this problem as well has been also addressed in like mobile operating systems.

Uh it's called universal links on iOS or app links on Android. So instead of using like custom schemes, you can just use domain your domain to receive deep link messages. Uh it it works like this. So when uh your my app uh claims to the OS that okay from now on I'm going to handle all the links to myapp.com uh within my app and then the the operating system needs to verify whether that is a like valid claim.

uh to do that it goes to that domain and check whether the domain actually hosts this kind of like configuration file to prove that my app indeed controls the domain. So that's how MWP ensures security but actually uh okay now you can have a like share secret but I didn't talk about like how you're going to actually how how does a wallet decide to grant key or not with what kind of like criteria well first you need to get users confirmation but what kind of client information should the wallet give to the user to help them make uh such a decision. Uh we already have this for desktop dabs. It works like uh you show confirmation pop like this. Uh and it shows the domain of the dab like vook.

io and if the domain looks suspicious like vendk.io users would not approve this and actually uh I already talked about like using domain for verification purpose several slides ago for like using universal links. So like OS use this why not wallet would use this one. So this domain verification method is pretty simple. You just go to the domain and check whether the config file is there.

So the client app can prove that indeed controls the domain. So wallet just would ask the user whether they are okay to respond to this domain. What's nice about this approach is that like wallets just can reuse the like same user confirmation flow. they already use for like desktop web apps. And this whole process is like truly decentralized like all you need to like prove yourself uh authenticity is just like hosting some config file on your domain and we don't need any sort of like centralized registry to have like list of apps or wallet.

Uh so we called this process of like client acquiring permission from wallet as henching. So on this like sample handshake message, the sender field here is actually a public key of the app uh and you pass your like universal link domain uh which will be used for callback and authenticity verification and on the wallet side uh it checks whether the domain is actually configured for this client app and if it's actually valid it asks for users confirmation and if user allows the wallet creates the key pair for this session and with the public key of the client app wallet can drive a shared key. Then wallet sends back the response along uh with its own public key wallet public key and the content of message is encrypted and it can be fed by only by the peer that who made the request. Uh so upon receiving the response client can also derive the same share secret using its own private key and the public key that you got from the web. So MWP is secure and it has more nice aspects too.

First uh it's optimized for mobile UX. Uh it allows like something called like batch request. Uh you can make a request with like multiple actions like action is like JSON RTC call. Um so uh actually I have to say the credit goes to uh John uh at Tydx. Tydx was one of the like first apps tried our new SDK uh and this idea of like battery request is like solely his idea.

Uh it enabled like huge improvement in UX to just reduce number of like app switching. So thank you so much Sean for your contribution and it's also easy to use strongly typed it has like nice auto completion. uh but I'll just move on and the protocol is now implemented in all major developer platforms like Swift for iOS, Android, React Native and Flutter. Uh and also I have to say uh it was possible by like massive effort by like many engineers and coinbase and by the community as well like he at tribes built like flutter uh library for us and gave us great feedback on the protocol and I have to give like huge shout out to Vishnu uh uh my colleague. He uh not only built the like libraries for Android, React Native and host libraries for wallet, he also helped me refine the protocol so that it can work on like not just iOS and on on Android as well.

So thank you all for your contribution. So you can find these like implemented SDK like client libraries on all major dependency management systems like Coco, Maven, npm uh so on and we also provide a host library for wallet. It's available on V native and yeah it's actually used by Coinbase wallet as well. It's they are all fully open source uh and the spec is also available as well. Um so um looking ahead uh we expect to see more wallets coming uh Coinbase retail uh NPC wallet is going to support this soon and we are also talking with other wallets as well.

Uh we are going to add support for like mobile browser as well because like any web app uh you can have can which can just like send and receive deep links you can use this one. Uh and also I'm looking forward to seeing new more like new mobile web3 apps built by all of you. So that's uh mobile wallet protocol direct and more reliable uh ensuring security with cryptography and some mobile technologies. It's fully decentralized. Uh it has like patch request support and it support multi chain.

I didn't mention that but it supports like multi chain agnostic. Uh if you want to learn more um just come say hi at the like base home base uh booth uh or yeah you can reach out to me at uh Twitter or like jumbo.eth uh so looking forward to hearing from you. Uh oh actually like one more thing uh and uh little PSA from Coinbase wallet uh we want to learn from you uh how we can serve you developers better so please fill out this form you can just scan that or just come to uh our booth uh and we will send you some free test um so that's it uh let's build for next billion users thank