How to Build Front-End Access Control with NFTs

Rate this content
Bookmark

Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.

This workshop has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

FAQ

The workshop uses React and Next.js for the frontend, Solidity for creating smart contracts, and MetaMask as the web-based wallet. The smart contracts are deployed on a blockchain compatible with the Ethereum Virtual Machine (EVM), specifically using the Sepolia testnet.

A smart contract is a self-executing contract with the terms of the agreement directly written into code. In this workshop, smart contracts are created using Solidity and deployed on a blockchain. They handle the creation and management of NFTs.

The 'grant access' feature in the smart contract mints a new NFT to the sender's account. This NFT can be used to grant access to certain content or features within an application.

The frontend is connected to the blockchain using a package called 'viem,' which facilitates the interaction between the React/Next.js application and the blockchain. The connection involves importing necessary libraries, setting up wallet clients, and specifying the blockchain network (Sepolia testnet).

NFTs can be used in various real-world applications, including digital art, collectibles, gaming (like unique in-game items or characters), real estate (tokenized property ownership), and even as unique identifiers for personal identity or access control.

Using blockchain for digital ownership and access control provides a decentralized and transparent environment. It ensures immutability and trust, as transactions recorded on the blockchain cannot be altered without proper permissions. This decentralized nature also means that no central entity can block or compromise your account.

The instructor is Sol Enxigueros, a Developer Relations Engineer at Chainlink Labs. Sol is originally from São Paulo, Brazil, but currently resides in Amsterdam.

You can create a wallet using MetaMask, a web-based wallet extension for browsers like Chrome. The workshop provides step-by-step instructions for installing MetaMask, creating a new wallet, and securing it with a password and a set of 12 cryptographic words.

An NFT (Non-Fungible Token) is a unique digital asset based on blockchain technology. Unlike fungible tokens such as cryptocurrencies, each NFT has a unique identifier and cannot be exchanged on a one-to-one basis with another NFT.

The workshop aims to teach participants how to create a full application using blockchain technology, focusing on NFTs and digital ownership. It covers the basics of blockchain, smart contracts, and frontend integration using React and Next.js.

Solange Gueiros
Solange Gueiros
88 min
10 Jun, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Welcome everyone! Today we are talking about unlocking digital ownership and starting accounts using blockchain technology. NFTs are unique digital assets based on blockchain technology. Blockchain provides transparency and immutability. To get started with blockchain, you need to install a wallet, specifically the MetaMask extension for Chrome. To enable your wallet, share your wallet address with others to receive money. To obtain tokens for testing, we will use a workshop faucet that provides test tokens. To create an NFT, we will use the Remix online environment. We mint a new token to the sender, and this is the unique ID of the asset in the collection. To create a project, use the command provided and specify the project name. To configure the Next.js to use my image, create a dotenv file with the smart contract address. You can have basic or VIP access and unlock content using NFTs. Update the main page by connecting the wallet, granting access, and minting an NFT. Create a new account and connect it to the wallet. Access someone else's token and content. Recap of creating basic smart content using Solidity. Exploring the possibilities and use cases of NFTs, including their use in sports, gaming, and real estate. Exploring the unique nature of NFTs, their various types, and the importance of transaction validation and fees in blockchain networks. Exploring other blockchains compatible with Ethereum, their benefits, and the importance of transaction fees in blockchain networks. Thank you for attending the workshop and interacting with me.

1. Introduction to Digital Ownership

Short description:

Welcome everyone! Today we are talking about unlocking digital ownership and starting accounts using blockchain technology. Prepare your computer because we are creating a full application together. I will guide you step by step to ensure your success.

Welcome everyone, and today we are talking about unlocking digital ownership and what this means. We are talking about how to start accounts using blockchain technology. And by the way, prepare your computer because we are creating a full application here, and I'm sure that you can do this with me. I'm doing this step by step, so slow, and I'm guaranteeing all the steps with you to be sure that you can do this with me.

Let's introduce myself first. You can call me Sol, but my name is Sol Enxigueros and I am a Developer Relations Engineer at Chainlink Labs. And Chainlink Labs is a company focused on bringing the connections between blockchain and everything that is not in a blockchain. And by the way, we are talking a bit more about the blockchain today. These are my contacts, and I am from Brazil, but now I am in Amsterdam because I'm here. You have here the ATALC in the React Summit and the JS Nation as well. So I'm ready here to meet some of you if you came to the event as well.

So let's start with the real content. And we are starting, this is an overview of what we are seeing today. We have two hours and we can do an amazing application in these two hours and do this together. So we are starting talking, what are NFTs, digital access, some use cases related to this development environment. We are creating a smart content here. Wow. And then we are connecting this smart content with the front end that we are building. And what you can do with this. What can be the future. Let's see. So I'd like to invite you now to go to this link. So I will be adding this link for you now in the chat.

2. Collaborative Path and Introduction to NFTs

Short description:

This is a collaborative path where we can write together. Let's start by introducing ourselves. NFTs are unique digital assets based on blockchain technology. Blockchain provides transparency and immutability. Transactions in a blockchain are tamper-proof and signed by an account. NFT-based access uses your identity in a wallet and requires signing a message to prove ownership. Blockchain is decentralized, ensuring accounts cannot be blocked by a central entity.

And this is a collaborative path. Everyone can write together here. The same way you can delete everything, so be careful. And my first question to you here is what's your name? I am Sol and I came from São Paulo, Brazil. And you, I'd like to know a bit more about you. Hey Mariano. Welcome Mariano. Good to see you here. Wow, you are from Spain. Yes. Valencia. I'd like to know Valencia. I didn't know yet, but... Hablo castelhano. Podemos hablar, después. And we have Mihy, I'm not sure if I know how to say your name from USA. Amazing. And Asanka from Sri Lanka. Wow. And I don't know how to say your name. And Stoke did this from Cyprus. I did my master degree in Nicosia in Cyprus. And Nima, you are from Belgium. Wow. I'll be in your place in July as well to another conference. And I'm so excited to have all of you here with me. And you can see that we can write in the same line. So be careful with this. But we are together here and I mistake some spaces here. And we are almost done to go forward. Oh, we have Olek from Ukraine. Wow. Marco from Italy. And Harold from India. I was in an amazing hackathon in India last year as well. And Marius from Italy. Wow, welcome everyone. I'm so happy, so glad to have all of you here and prepare to create an amazing application with me. So let's move forward.

This is our basis. So every link that I may open on my computer, I'm sharing here with you. Every code that I'm doing, I will add in this collaborative pad how you can do this with me. So we are together all the time. Let's come back to our presentation a bit. And first of all, what are NFTs? We used to say that an NFT, it's an asset. But this is a unique digital asset. And this asset is based on blockchain. And what means based on blockchain? What is this like? We are talking about a different kind of technology where we have immutability. And we used to say that this is a trust environment, especially because when you have some transaction, some asset record in a blockchain, you cannot change this anymore if you don't have the permissions, if you don't have the right to do that. And when we talk about the many blockchains, we are talking about a public environment, a transparent environment. So blockchain brings to us more transparency and a place that we can trust a bit more. And we can say that blockchain is like a chain of blocks. And yes, we have blocks. We have the transactions in the blocks. Transactions can be like to create NFTs, to transfer NFTs, to do whatever they like to do with some asset over there. And every transaction, it's signed by an account. And on this way, this is tamper-proof. We cannot manipulate this kind of account as well. And this is the basic. So how can we use blockchain and NFTs to access something, to access an account? When you talk about traditional user access, we are talking about some user and some password. But when we talk about NFT-based access, we are talking about access made by your identity in a wallet. And you must sign a message or sign that you are the owner of this wallet to have this access. When we talk about sign something and proving that we are the owner, we are talking about managing some public keys and private keys, like imagine that you have a bank account and only you know the password. It's stuff like that. But this is in a way that, because it's in blockchain, another point related to blockchain, blockchain is decentralized. It means that it's not controlled by only one entity. And in this way, we can be sure that your account will not be blocked by a central entity, for example. And this is the main difference and one of the advantages of have accounts on blockchain. We are in a decentralized environment. And you can be sure that we are not blocked.

QnA

Watch more workshops on topic

0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.
Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs
JSNation US 2024JSNation US 2024
148 min
Hands-On Workshop: Introduction to Pentesting for Web Apps / Web APIs
Workshop
Gregor Biswanger
Gregor Biswanger
In this hands-on workshop, you will be equipped with the tools to effectively test the security of web applications. This course is designed for beginners as well as those already familiar with web application security testing who wish to expand their knowledge. In a world where websites play an increasingly central role, ensuring the security of these technologies is crucial. Understanding the attacker's perspective and knowing the appropriate defense mechanisms have become essential skills for IT professionals.This workshop, led by the renowned trainer Gregor Biswanger, will guide you through the use of industry-standard pentesting tools such as Burp Suite, OWASP ZAP, and the professional pentesting framework Metasploit. You will learn how to identify and exploit common vulnerabilities in web applications. Through practical exercises and challenges, you will be able to put your theoretical knowledge into practice and expand it. In this course, you will acquire the fundamental skills necessary to protect your websites from attacks and enhance the security of your systems.
OWASP Top Ten Security Vulnerabilities in Node.js
JSNation 2024JSNation 2024
97 min
OWASP Top Ten Security Vulnerabilities in Node.js
Workshop
Marco Ippolito
Marco Ippolito
In this workshop, we'll cover the top 10 most common vulnerabilities and critical security risks identified by OWASP, which is a trusted authority in Web Application Security.During the workshop, you will learn how to prevent these vulnerabilities and develop the ability to recognize them in web applications.The workshop includes 10 code challenges that represent each of the OWASP's most common vulnerabilities. There will be given hints to help solve the vulnerabilities and pass the tests.The trainer will also provide detailed explanations, slides, and real-life examples in Node.js to help understand the problems better. Additionally, you'll gain insights from a Node.js Maintainer who will share how they manage security within a large project.It's suitable for Node.js Developers of all skill levels, from beginners to experts, it requires a general knowledge of web application and JavaScript.
Table of contents:- Broken Access Control- Cryptographic Failures- Injection- Insecure Design- Security Misconfiguration- Vulnerable and Outdated Components- Identification and Authentication Failures- Software and Data Integrity Failures- Security Logging and Monitoring Failures- Server-Side Request Forgery
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
Bring Code Quality and Security to your CI/CD pipeline
DevOps.js Conf 2022DevOps.js Conf 2022
76 min
Bring Code Quality and Security to your CI/CD pipeline
WorkshopFree
Elena Vilchik
Elena Vilchik
In this workshop we will go through all the aspects and stages when integrating your project into Code Quality and Security Ecosystem. We will take a simple web-application as a starting point and create a CI pipeline triggering code quality monitoring for it. We will do a full development cycle starting from coding in the IDE and opening a Pull Request and I will show you how you can control the quality at those stages. At the end of the workshop you will be ready to enable such integration for your own projects.
Passwordless Auth to Servers: hands on with ASA
DevOps.js Conf 2022DevOps.js Conf 2022
32 min
Passwordless Auth to Servers: hands on with ASA
WorkshopFree
E. Dunham
E. Dunham
These days, you don't need a separate password for every website you log into. Yet thanks to tech debt and tradition, many DevOps professionals are still wrangling a host of SSH keys to access the servers where we sometimes need to be. With modern OAuth, a single login and second factor to prove your identity are enough to securely get you into every service that you're authorized to access. What if SSHing into servers was that easy? In this workshop, we'll use Okta's Advanced Server Access tool (formerly ScaleFT) to experience one way that the dream of sending SSH keys the way of the password has been realized.
- we'll discuss how ASA works and when it's the right tool for the job- we'll walk through setting up a free trial Okta account to use ASA from, and configuring the ASA gateway and server on Linux servers- we'll then SSH into our hosts with the ASA clients without needing to supply an SSH key from our laptops- we'll review the audit logs of our SSH sessions to examine what commands were run

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
The talk discusses the importance of supply chain security in the open source ecosystem, highlighting the risks of relying on open source code without proper code review. It explores the trend of supply chain attacks and the need for a new approach to detect and block malicious dependencies. The talk also introduces Socket, a tool that assesses the security of packages and provides automation and analysis to protect against malware and supply chain attacks. It emphasizes the need to prioritize security in software development and offers insights into potential solutions such as realms and Deno's command line flags.
The State of Passwordless Auth on the Web
JSNation 2023JSNation 2023
30 min
The State of Passwordless Auth on the Web
Passwords are terrible and easily hacked, with most people not using password managers. The credential management API and autocomplete attribute can improve user experience and security. Two-factor authentication enhances security but regresses user experience. Passkeys offer a seamless and secure login experience, but browser support may be limited. Recommendations include detecting Passkey support and offering fallbacks to passwords and two-factor authentication.
5 Ways You Could Have Hacked Node.js
JSNation 2023JSNation 2023
22 min
5 Ways You Could Have Hacked Node.js
Top Content
The Node.js security team is responsible for addressing vulnerabilities and receives reports through HackerOne. The Talk discusses various hacking techniques, including DLL injections and DNS rebinding attacks. It also highlights Node.js security vulnerabilities such as HTTP request smuggling and certification validation. The importance of using HTTP proxy tunneling and the experimental permission model in Node.js 20 is emphasized. NearForm, a company specializing in Node.js, offers services for scaling and improving security.
Content Security Policy with Next.js: Leveling Up your Website's Security
React Summit US 2023React Summit US 2023
9 min
Content Security Policy with Next.js: Leveling Up your Website's Security
Top Content
Watch video: Content Security Policy with Next.js: Leveling Up your Website's Security
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
Let Me Show You How React Applications Get Hacked in the Real-World
React Advanced 2021React Advanced 2021
22 min
Let Me Show You How React Applications Get Hacked in the Real-World
Top Content
React's default security against XSS vulnerabilities, exploring and fixing XSS vulnerabilities in React, exploring control characters and security issues, exploring an alternative solution for JSON parsing, and exploring JSON input and third-party dependencies.
How React Applications Get Hacked in the Real-World
React Summit 2022React Summit 2022
7 min
How React Applications Get Hacked in the Real-World
How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.