Frontend Access Control Using Digital Assets

And let's start. Imagine if you have your favorite social network blocked without no notice. Or if you have a social fake account. Or someone asking money to your friends or telling your mom that you are in trouble. This has happened to me more than once. And my mom knows exactly what to do. And she knows that it was never me.

And if she had some doubts, she would call me. But this is annoying. And this is a bit complicated. But this can happen. And sometimes it's so difficult that you are you.

This can happen because some systems are centralized and they have the decision by themselves. And it's not that really you have your identity in that system. It depends on them, not on you. And we can do this in a different way. And I'm here to teach you how to do that. And I'm creating this live with you. So we are starting accounts using blockchain technology here.

And imagine that even the digital access is always evolving. We start with passwords. And now I can use my finger. I can use my face. Or even I can use some identity related to blockchain as well. And in order to use that, we are using NFTs. And I will explain why we are using NFTs during the talk as well. If you'd like to have the presentation, this is the most important slide for you. Because I have this. I have other QR codes, other links in the middle. But if you have this, you have everything.

So I'll give a minute to you. And this is, we are starting first doing some really, really basic concepts. What's blockchain? What is smart contract? What is NFT? Then I'm creating a smart contract live here. I'm publishing in the blockchain in a network. After that, I will get my smart contract published and use in a front-end that I developed. It's local on my machine now. And you can see how I can use that smart contract, that's the NFT itself, to unlock some content and to prove that it's my identity over there. So it's just that I just told you now.

Let's go forward. First of all, what is a blockchain? This is really, really basic. Blockchain is a chain of blocks. And the blocks are connected using cryptography. And we can say as well that the blockchain is a distribute ledger. And this maintains a continuously growing list of the records. And we call that the blocks itself. And all of these, remember, are linked by cryptography. So this is a security way to link this related to hash because you cannot change nothing in the past without changing everything that happened later. And because this is decentralized, we have copies of the blocks in different places with different nodes. If we try to change something in the past, you must convince everyone that this is right. And this is so hard. So we used to say that the blockchain is transparent and also it's secured and immutable because of that. And yes, we have the blocks in the blockchain.

The block has the transactions, the timestamp, you have the order of this. The hash is the cryptographic part and a special number here. So talking about the transactions itself, when we talk about blockchain, we are talking about a state machine. So each state is like a photo. This is the first photo, and we can have some balances, some information. If I'd like to go to the other state, I must do a transaction to change the photos, to change the state. And this is what's happened on blockchain. The transaction will be inside the block.

So we can have the world state updates using the blockchain. And with validation of everything that's happened.

Talking about the smart contracts themselves. So smart contracts, they are not smart. They are not contracts. They are computer programs. And they are published and executed in a blockchain environment. Because you already know that the blockchain is immutable, so the smart contract, the code, the source code itself is immutable as well. And we don't have no one in the middle that can stop your smart contract if it's designed to not be stopped at any time.

One thing important related to the smart contract itself, remember, the source code is immutable. You cannot change it. But inside your smart contract, you can have information that you'd like to update the information itself. Each time you are updating an information, it's a transaction.

And, okay, NFTs are smart contracts. They are a kind of smart contracts. We have some standards to define an NFT. And a NFT is a smart contract.

The collection of NFTs is a smart contract. And each NFT in that collection, in that smart contract, are unique. Because they have a unique identifier. And each smart contract in a blockchain, it's unique as well. It has your own address. So you can really say that an NFT is a unique piece that you can own and prove that it's yours.

And when you talk about the difference between the traditional user access versus the NFT-based access, NFTs will be on your wallet. And the wallet can be on a web browser or your phone or whatever. But the wallet is a set of keys, a public key and a private key. And the NFT will be in our wallet. And only you have access to this wallet. So you are the owner and you can prove that.

Some examples for you, like using NFTs to give you access. Like Forbes do this to have some access to their content. Or we have these VFriends that are cute. And also you can have access to the characters or something related to that. NBA has a collection of NFTs. And this is interesting because they are dynamic. The NFT is not only a photo. You can update your NFT. And they are dynamic. And they were changed related to the points in games. So another one, I think, is this. I can go a bit forward to almost our quote. Is this. It's time to build it.

This is what I'm using here. I'm using React and especially Next.js. This will be the user interface. I'm using Veeam. This is a library to connect my front-end with the blockchain. If you look for a web extension that is a wallet.

And I'm using Solidity. This is the language to create the smart content itself. And the smart content will be published in a blockchain. I'm using Sepolia blockchain. This is a testnet for Ethereum. It means that it's not a real blockchain. It's a copy of a blockchain where we can do everything without having any concerns, any costs related to money or pay something or do something wrong.

So, how to store the accounts using blockchain? If you'd like to do this later, you already have the other QR code. This is a QR code to a Gitbug where you can do step-by-step everything. Create the wallet, create the smart content, create the front-end. Now here, I have less time, so I have some parts late. This is the smart content itself. So, what do I have here? Smart content and the language can change. It depends on the version. This can have different behavior.

So, in the first line, I'm defining what is the version of the Solidity language that I'm using. Then, I'm importing a library. This is a standard called ERC-721. A standard is not an obligation. It's a suggestion to you to use that so that people talk the same language. If I'm using this standard, I know what kind of function I should have in my smart content. This library brings the code of the NFT itself for me. The content itself, it's my content.

The content itself, it's my content. It will be called Open Access. I have only a number to have the unique identifier. I have this function called Grant Access to create a piece in that NFT collection, to create an NFT in the collection. This is the safe mint function. It means that if you have this NFT in your wallet, you have access to something. Let's see what it will be. I will come back later to talk about this.

Let's go to the practical part first. This is Remix. It's an environment to deploy smart content. It's online in your browser. You don't need to install anything here. This itself is my smart content, open access.sol. This is exactly the same that I showed you before in the slides, the presentation. Here we are. I'm going to the deploy and run transactions. Here, I can deploy my smart content in the blockchain. I am already connected to a web wallet. My wallet is this, the Metamask wallet. We are connected. If I scroll down, I can deploy my content live now with you. Here we are. Confirm. Now, I'm waiting for this transaction to create the content. It's in a waiting area. We are waiting for some validator in the network to get my transaction, add it in a block and then add this block in the blockchain. It's done because it's confirmed now.

If I come back here and scroll down, I have here the address of my smart content. Each smart content is unique in a network.

This is the address. What I'm doing now, I'm going to my application. This is my frontend. I have an environment variable here that is the address of the content. This, I did in another day. I don't have this now. I pasted the address that I just got on my smart content. Let's save this. I will show the result and then come back a bit to what more we have here.

Let's see the result of this. This is running now. If I come back here and go to this local, you can see that I don't have anything here. No sign. Let's connect my wallet first. This is the only thing that... Oh, but this is the final result. This is the old one. I didn't update it yet. Let's update this. Refresh. Connect my wallet again. Yes. Now, yes. I already showed you the end. Okay. Now, you can see that I don't have the access and I have this button grant access. This button grant access is calling this function grant access. It means that I'm minting the NFT for my wallet. I don't have any restrictions to do that. I'm not paying nothing extra to do that.

I'm paying a small fee to add the transaction in the blockchain. It's only this. Again, we are waiting this transaction. Be confirmed. Be confirmed. When it's confirmed, the NFT will be on my wallet.

Yes, it's confirmed. If I come back here again, if I refresh, I must connect my wallet again. Okay, let's connect. But when I do that... Why not yet? Yes. When I do that, now I have the VIP image that is exclusively for the people who have the NFT only. In the same way that I have this VIP image, I could have that content from Forbis, or I could access a special blog, a special content, and go to some kind of application that only the members can have that. This is another way that you can authenticate to go to some application.

Let's understand the code a bit better now. Remember that I came here. So, it'll be better to go here because I summarized this. Well, before that, sometimes people ask me about the costs of this. When I'm creating the smart contract, yes, I pay to create the transaction, to create the smart contract. Every time I'm giving access, I'm creating a transaction as well. It's paid. But when I'm checking if that wallet has the NFT or not, I'm not paying nothing. The read is always free. Only when you are doing a state change, you are paying something. Okay?

This is how I'm integrating the smart contracts with React. I have this library, the Vim, and I have this create wallet client. Here I'm using, defining that I'm using the Sepolya chain. Here, it's like the so-called way that we used to do that. We are looking for this window.ethereum. If you have that, it means that we have a wallet, a web extension in our browser that's a wallet.

If I have that, I will try to connect with that wallet. I must get authorization of the wallet. After that, the front-end itself, I get the wallet connection, and I have the control access token. This is the address of my NFT.

In order to access any smart contract in a blockchain, you must have two things. One, the address of the contract itself. Two, the definition of the functions that you have in that smart contract can be the inputs and outputs. We call that the ABI. Here I have the address, and I have the ABI that I already defined.

I'm connecting with my wallet. After that, the only component that I created is the access controller view. This component depends if it has the NFT, it's true or false. If I have the NFT, it will have a different behavior like you saw before. You also have access to this. This code is published as well. If you install ABI Wallet, you can try to buy it yourself later as well.

You have an overview here. How can you learn more about it? If you go to our developer hub, and by the way, the NFTs are standard, but I work at Chainlink Labs. Chainlink is a company which focuses on connecting the smart contracts with any kind of information that is not in a blockchain. We have the blockchain being a trust environment, a mutable environment, but we have all the rest of the world. Chainlink has different services to do these kinds of connections. You can check out how to do this with NFTs and other points as well. If you are really a beginner, maybe you'd like to start from zero. The bootcamp is to do that. This year, we already did two bootcamps with two weeks. Each bootcamp, two hours per day in different languages. English, I am from Brazil, so Portuguese, Spanish as well. We have other in Turkish, Mandarin. And you can learn from zero. Create your wallet, create your first smart contract, create your first NFT, and use different Chainlink services.

And this is the presentation again. If you didn't get it in the beginning, you have the chance now to get the presentation. And this is me. You can call me Sol, but my name is Solange Gheiros. I am a Developer Relations Engineer at Chainlink Labs. So these are my contacts. Feel free to contact me. And yes, I came from Brazil. I'm here in Europe to this conference. It's really amazing. I love this conference.

Wow, Solange. Thanks a lot. That was really great. First question is for me. I noticed that when you were deploying, there was a button in the Metamask plugin to speed up. Why would we not always want that? Why is it an option to speed up? You always want the fastest deployment, right? Yes, the speed is related to how I'm paying to have the transaction in the blockchain. So imagine that in the moment that I send the transaction, the network doesn't have too many transactions in that moment. So it's cost less. In the moment that we have more transactions, it's like more movement in the network, it could be more expensive. So imagine that you send the transaction in a moment that was not so expensive and then the fee is higher now. So you can update the fee to pay a bit more to do that and speed up your transaction. So it's a cost thing. Yes. And can you also then pay less and just say, tomorrow's fine? After you send the transaction, no, because if you try to pay more and in that moment it's cheaper, you are already paid. But it's only if you'd like to pay less. And I have a fun history related to this. Imagine that in a moment, like it was 2021, now all the fees are so good. But in 2021, I did a transaction and I decided that no, I pay only this.

But in 2021, I did a transaction and I decided that no, I pay only this. Only a few. My transaction was in the waiting area, we call it the main pool, for three months. Three months? Yes, exactly. And you pay more about it. Exactly. But this is like in the past, the blockchain used to have more problems related to prices and the costs. Now it's more stable related to that. We have some improvements in the blockchains to do that, especially on Ethereum, that is the main blockchain that we have as much content where the smart content started. Also existing some layer 2s that they are second blockchains based in the main blockchain. And they can, a transaction in a layer 2, it's a fraction of cents, like it's almost zero. And you don't care more about this.

Next question is, I think for me, blockchain has a bit of an image problem. Because people associate it with crypto. And if you're not interested in crypto, people don't look at it. And what I noticed is you're basically logging in to access hidden or paid content, but you need to connect a wallet. And what do you think about the terminology of wallet? Because it doesn't make sense to me that it feels like, it feels a bit weird. I'm just logging in, right? Yes, but today, do you have the Google wallet? And can you have access to some conference with the QR codes stored in your wallet? This is possible today. So the wallet is bringing this kind of things now that's not only related to money, but we used to have our identity in our wallet, our physical wallet. If you have a ticket to a game, you put in your wallet. It's the same concept, but it's online. Yeah, so it's an access pass and just like your bus pass that you have in your physical wallet.

What is the incentive of using an access control solution where payment is necessary when well-tested and free solutions are already available? Well, first of all, you can have this kind of access without paying because there are some concepts that are account abstractions or where other institutions can pay the fees for you. So you really don't pay nothing more, depends on the system.

Okay. Then I get the terminology. Thank you.

Next question. What is the incentive of using an access control solution where payment is necessary when well-tested and free solutions are already available? Well, first of all, you can have this kind of access without paying because there are some concepts that are account abstractions or where other institutions can pay the fees for you. So you really don't pay nothing more, depends on the system. But remember that I started my talk talking about the ownership of things. So the ownership of your account in some systems. And some systems, they are the owner of you in that system, and you don't have the other choice. If you can have your ownership outside in a system that is decentralized and you have the control of this, you can choose where you'd like to use your identity and which part of your identity you'd like to share with that system.

Next question. Yeah, we have time. What is the advantage of using blockchain to grant user permissions rather than just using a visual database such as Postgres? Usual database, not visual. Yeah, it's almost what you said before. But talking about the difference between a blockchain and a non-blockchain, a normal database, we are talking about how you can trust the information, how easy it is to update a normal database. If you have the right access, you can do that for sure. How you can update a blockchain. Only creating a transaction. This transaction will be recorded, so it's transparent. If you'd like to see, any person can see that the transaction happened and you must have an approval of all the nodes or a great part of the nodes in that network. It means that you cannot have a transaction to do something that is wrong. And in a normal database, you can do that. So I think this is the most difference related to have information that are tamper-proof.

Okay. Well, thanks a lot. That's all the time we have for our Q&A round.