David Atanda is an Engineer at ConsenSys. He returns to the show alongside Steve to talk about using Web3 Auth in a Vue app for user authentication. He begins by talking about the difference between Web2 and Web3. Moreover, he dives into the process of using Web3 Authentication and its features. 

Hello everybody and welcome to another exciting episode of Views on View. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host as I always like to say. Today, our special guest is David Atonda. How are you doing, David? I'm David Atonda. I'm a radio host and I'm a radio host.

 

Yeah, I'm doing great. Happy to be here. It's like my second time on Views on View, so yeah.

 

Oh, it has, okay. I thought I recognized the name. I'd have to go back and look. David is coming to us all the way from Lagos, Nigeria. So

 

Yeah.

 

thank you for making the long trip over the internets to join us. So before we get started into our topic today, David, why don't you tell us about yourself? Give us a little scoop on who you are, what you do, why you're famous, and we'll go from there.

 

Yeah, I'm David Asanda. Currently UX engineer at Consensus. I work specifically on Infura. So technically my job is basically to create pixel perfect components or interactions on the web. So for my current job just means I'm able to like do that on the biggest scale for projects you know in Web3 and enabling a more decentralized Internet in that regard.

 

Okay, so speaking of Web3, that is going to be our topic for the day. And what we were gonna talk about is using Web3 auth in a Vue application for user authentication. So for starters, let's define some terms. So we've talked about Web2 and Web3 is the term du jour, shall we say, for cryptocurrency, blockchain. Using those kinds of technologies. I think most people think of it again in terms of cryptocurrencies such as aetherium or Dogecoin or any of the other Cryptocurrencies, so did I get that right? What's the what's the best way for you? How do you define web 2 versus web 3?

 

I feel like web 2, as we all know it and we've seen the internet, you know, it evolves and 999 and all of that, email, MySpace, YouTube, and all of that. Web 3 was created in order to have a system whereby everybody gets to own their data, right? And it's permissionless, meaning it doesn't have like a lot of... How do I put this? You don't have a lot of centralization, right? So no one person.

 

Distributed.

 

Yeah, exactly. So you give everybody access regardless of where you are, your location. You're not limited by that. You can as well access and pay for things wherever you are. You can access information without being constrained to a particular location. I believe that's how I feel it is, or how I explain it in terms of, 

OK. So in particular, we're going to talk about using web3 to authenticate within a Vue app and how you can do that. Now, the tool that you've talked is web3auth.io, which is a product. So I guess my first question is, one, how does this work? And for someone, to be able to use web through authentication, do they have to have like a wallet, a cryptocurrency wallet or something along those lines?

 

Yeah, so usually they suppose to have like a wallet. So we're talking decentralized wallet, DeFi wallet, right? Not decentralized, not even like centralized exchange like, you know, Binance or Coinbase, all of those guys, right? You would need to own like a DeFi wallet, like in a MetaMath, Rumble, and yeah, where you actually have your private keys to be able to 

 

So you do have a wallet, but it's not for money. It's for storing keys, crypto keys. Is that the correct way to say it?

 

మాలికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికిక

 

To sign into what? I'm sorry, I can't understand. Gotcha.

 

still access dabs without any wallet that's it yeah

 

Okay. Okay, so you mentioned using the social, so like a Twitter login, a Facebook login, does that include like a GitHub login? I'm sure which is pretty common for developers

 

Yeah, exactly, exactly.

 

to use. So how does that work? How does that integration work then?

 

means that they cannot authorize anything right without you actually you know um like clicking on it or whatever so they can't do anything for you in the background they basically are just there to make things easier for you to access those apps right so on the engineering side it gets way more complicated than just them holding part of the keys but that is basically like the overview of things really you just need to like improve user experience um in web today i know apparently the bm market and all but you know like moving into like the net bull run and having more people jump on the Web3 hype. So yeah, it helps to make things easier for everybody to you know take advantage of SpaceHand.

 

Okay, so what is Web3 Auth then? You said it was released sometime last year, I believe.

 

yeah yeah i've been following them it's really like i think they raised like a bunch of money like last year in q4

 

So

 

so yeah they're also like a startup company right just to like um improve the space basically i think

 

it's a startup, okay.

 

then it's making an infrastructure company right to just make it easier to onboard new people um in squab 3 and all of that uh that's i believe that how they came about um from what i've read about them

 

Okay, so what are the products that you're using then of theirs to, because they have multiple products it looks like. That's what we're going to implement, excuse me, integrate into

 

Yeah.

 

our Vue app, correct?

 

yes so they have um a modal sdk which means you just have like install um i think we're pretty modal three outs modal they have like the npm packages right where you just install it and um yeah you're able to like have the modal pop up so you don't have to build the modal right you just install the the sdk download that and it's like trigger their modals pop up so then once 

 

Mm-hmm.

 

use just to simplify things and all that rather than to build their own custom bot.

 

Yeah, so I'm looking at their documentation, and there's a page on Web3 Auth JavaScript SDKs. And so they have Web3 Auth modal, and then a Web3 Auth no modal. And from what I'm reading, it appears that the no modal is what we would call a headless type of SDK, where you could use your library of choice to create your own modal and buttons, and then you just have to wire the buttons up appropriately.

 

Yeah.

 

So, okay, so what is this product giving to you? Is it just the SDK to create it? Where, you know, let's, okay, so let's say for instance, I wanna use this in a, my own view app, and I want people to be able to log in using Web3 Auth. Do I separately have to have? the infrastructure, the wallet, or the DAP created, or what has to be done ahead of time, or does this tool and this company handle all of that for you?

 

yeah so they abstract a lot of things for you right um although you're facing things like use their keys your their keys and their website and all that so you sign in um i think they have definitely have like they have a paid plan i think about 69 dollars or whatever um depending on what's on your package and all of that but um yeah what they do they are able to abstract all of that work away from you you just need like a key, like once you sign up, you will get a key all of that for your project, for your project right and you will say you build that on your front end as an environmental variable, environment variable rather and you know pull into your your view app and use it right but they abstract like all of the work for you which is like super cool ʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻ

 

OK, so this, OK, I'm still trying to get my head around this just because I'm web 3 ignorant when it comes to actual implementations and stuff. So you're going to buy this, one of their plans that handles, oh, up to, OK, so the plans, you pay for so many active wallets. So I guess it depends on how large a user base your application is going to have, right? So they have a free plan that goes up to a thousand monthly active wallets. And then 0.04 cents or dollars, excuse me, if I'm reading this correctly, for every additional wallet. Then they have plans that go up to 3000 wallets, MAWs they call them monthly active wallets, up to 10,000 and then custom, you know, for the large enterprise.

 

yeah yeah do you have like different plans depending on the number of wallets you know meaning like the number of users you have right um yeah based on your application i love that

 

Uh-huh.

 

so i know they have like a free plan also um i think

 

Right, that gives you up to a thousand monthly active wallets.

 

yeah exactly that's how they they handle their pricing really um but i think at the end of the like their pricing is based on the value they are offering and when you're in the kind of application so if you are in the web3 space rights and you're building a bunch of things that are focused on like newbies or web3 people that are not or like none I can say like in the last web3 back just like people are not really into the space that don't really understand You know wallet and you really don't stress them to like go through all of that And they develop a position that your product has that పికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికికిక ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya ndi wèp tè di apikasiya

 

Okay, so then when it comes to implementation in the Vue application, how does that work? I'm assuming it's like any other SDK or library that you're going to integrate where you install it via npm and then include in your component. And if you're using the modal, there's some methods or maybe even components. Are there any particular view wrappers that you found? Or is it all strictly JavaScript, and you have to add the view goodness to it?

 

So they have like an SDK thing specifically for like Vue or that can be used in Vue. I think in general it works like within Vue still, right? Like the Web3.odd slash modal npm package and they also have like other packages like

 

Right.

 

mp3 wallet, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, mp3 wallet connect, 

 

So have you actually implemented this kit in any applications yet?

 

Yeah, so they have like a sample application, which you could probably put in the description of this video, right? That sample application that I've used here, but yeah, they have like a sample application that illustrates how it works on a low level. Yeah.

 

I'm saying have you in any of your applications, have you been able to successfully implement this yet?

 

Yeah, well, I've gone through like their sample application and I've basically just like, you know, looked through it and seen how it's done. So yeah, but I've not implemented my own personal application separately away from their sample application. But I've gone through it and yeah, I think it's really cool. Yeah, although I implemented it on the React application a while ago, but yeah, on the AppDir application, no, not personally. But yeah.

 

Okay, so assuming, so when you implement this, how does it interact with your Vue app? In other words, is it, you know, I would assume it does the authentication on the infrastructure on the blockchain somewhere, and do you get some sort of like a JWT, some sort of token, is it a cookie in a browser? you know, that gets sent or how does the, what are you giving back to use for authentication for your particular user and integrate with your backend system?

 

Yeah, so once you install like the SDK download back, I can share that separately because they're like, I think about three or so, like depending on how it's been implemented. But once you're able to... um install like the web 3 model as wep3 model Atelier or slash model or whatever right? That's the package name exactly right What happens is you? Obviously using the composition api right you have all those packages installed then you initialize that particular package, right? um using like your an object that contains the name of your of your to the Web3Ords dashboard. So you have a dashboard on Web3Ords, right? Where you add obviously the name of your project, the creative project, the name of your project, and the particular chain that project is on, right? And you're able to create it, and you're able to get like a client API, sorry, a client ID that you need to, right? Just as you have any other SDK, right? And once it's initialized, your UI. You're able to sign in.

Okay. So yeah, I suppose going much farther would require actually looking at code, which is something hard to do on an audio podcast.

 

Hey

 

Um, for sure. So last question I can think of is, okay, so this is a bunch of work, obviously, and require some different infrastructure on the backend, which is what the web auth.io people are doing for you. Uh,

 

Yeah. Correct.

 

and we've talked about it, how it's decentralized. So what is the benefit? of using this type of system for authentication in a view app? Is it security? Is it because it's decentralized? Is it harder to hack? What are the benefits of implementing a system like this?

 

yeah so you know we didn't do up three spheres it's it's a thing whereby pre the last bull run which we had the dodge coin explosion all of that stuff right what happened is you needed to have a wallet to interact with protocols like beyond like centralized exchanges right like interact with actual protocols itself just have like a wallet which required you to i don't know if you heard of this but like a seed freeze whereas if you lose that seed freeze it means you've lost your wallet because the whole idea of having a wallet is in order for you to be your own bank in quotes right so nobody can take that wallet away from you 

 

Right, I get that. So WebAuth abstracts a lot of the functionality for you, right, if you're to use their SDKs. They handle the wallets and all the encryption and whatever goes on behind the scenes to make sure you're unique. But above and beyond that, what's the benefit of using this whole type of login? Is it speed? Is it security? Is it decentralization, et cetera? What is, as compared to the normal, you know, the Web2 authentication, for lack of a better term, that we're using now. OK. So before we wrap up, was there anything we haven't covered about Web3 Auth in Vue and that we wanted to cover, that you wanted to cover?

 

I don't think that anything... Obviously I can drop the link of github repo But yeah, I feel like

Cool. All right, well, thanks for coming on to talk about this. I know I still haven't gotten my head fully around blockchain and crypto and how that works just because I haven't had time. But for

 

Yeah.

 

those who are listening who might wanna investigate this, again, the product, the company is web3auth.io, number three, and it's got details and docs on kits and so on. So that's. Something for those who want to delve into it, here's your chance. All right, so with that, we will move on to picks. Picks are part of the show where we get to talk about things that may or may not have absolutely anything to do with tech or with you, or could be food, movies, books, kids' games, you name it. I'll start out and save the guests for last. And on Hacker News came across an interesting story. And it's an article from the New York Times. And it's sort of things I've talked about before. And it has to do with remote versus in-office work, especially with the explosion of remote work since, you know, over the past three years. And it's titled, What Young Workers Miss Without the Power of Proximity. And having worked in IT for over 25 years and spent probably the first. 13, 14 years in an office environment, and since 2009 I've been remote. I've seen the pros and cons of both environments. And what the gist of the article is, is that basically your junior employees, you youngers, the one who need tutelage and help and feedback are the ones that benefit most from being in the office, where the more the senior people who don't necessarily need as much of that can function much better. in a remote, but for like a junior person coming in and this is their first job and they start out remote, they really miss a lot. And I know that, you know, from my days of being in the office, I know that there's quite a lot that happens, quite a lot of feedback and learning and helping each other that you don't get so much when you're remote.

 

Thank you.

 

But anyway, like I said, it's called What Young Workers Miss Without the Power of Proximity and I'll put a link to that in the show notes. And then... With that, we get to the dad jokes of the week. I prefer to think of those as the highlight of the podcast. Other people might think differently.

 

I'm sorry.

 

So I'll start out. So I told my wife recently that I was building a model of Mount Everest. She said, is it to scale? I said, no, it's to look at.

 

Okay, that's about it.

 

Right? It's not the climb. Yeah, anyway. So... So if, here's a question for you. If zookeepers say that you can't buy the animals, then why

 

Mm-hmm.

 

do zebras have barcodes?

 

Thank you.

 

Right. And a friend of mine on Twitter sent me a great cartoon. I put it on my Twitter that you can see it. That shows a zebra with a QR code on it instead of the stripes and says, "'Dude, you gotta upgrade.'" And then finally, I asked the librarian when I was at the library if they had any books on different noise levels. And she said, "'Sure, what volume would you like?'

 

That'll be very good.

 

Yeah, that got an eye roll from David for those who aren't watching. So, those are the dad jokes of the week. So David, have you been able to come up with any picks for us?

 

have not, except Google One quickly.

 

Oh, that's okay. You know, if there's maybe a TV show or shows or movies you watched recently or something like that, that's fine if you don't.

 

Yeah, I don't.

 

No picks. Okay, well with that, we will wrap up the episode. Thanks for coming on, David. Appreciate hearing about Web3 and how it can be used with Vue. It's certainly something worth investigating further. If people want to follow you or see what you're working on, your coding, what are the best places to do that?

 

ʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻʻ

 

Yeah. All right, we will put a link to the show notes to David's Twitter account and you can follow him there. I am wonder95 on Twitter and GitHub and just about anywhere else on the socials. So anyway, thanks everybody for listening and we will talk to you next time on Views on View.