How to Build Front-End Access Control with NFTs

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 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.

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.

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 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.

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.

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.

security

Solange Gueiros

88 min

10 Jun, 2024

Comments

Video Summary and Transcription

Welcome to the Workshop on NFTs and Digital Ownership! In this session, we cover the basics of blockchain and NFTs, set up the blockchain and wallet, create and secure wallets, and obtain test tokens. We also explore the process of creating NFTs with Remix, connecting wallets and creating contracts, deploying contracts, and building the front end. Additionally, we discuss the possibilities of NFTs in various industries, transaction validation, and transaction fees. Thank you to the audience and collaborators!

Watch more workshops on topic

0 to Auth in an hour with ReactJS

React Summit 2023

56 min

0 to Auth in an hour with ReactJS

WorkshopFree

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.

react web development security authentication

OWASP Top Ten Security Vulnerabilities in Node.js

JSNation 2024

97 min

OWASP Top Ten Security Vulnerabilities in Node.js

Workshop

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

node.js security

Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk

JSNation 2022

99 min

Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk

WorkshopFree

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.

case study javascript node.js security npm

Bring Code Quality and Security to your CI/CD pipeline

DevOps.js Conf 2022

76 min

Bring Code Quality and Security to your CI/CD pipeline

WorkshopFree

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.

code quality ci cd security

Passwordless Auth to Servers: hands on with ASA

DevOps.js Conf 2022

32 min

Passwordless Auth to Servers: hands on with ASA

WorkshopFree

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

devops security

JS Security Testing Automation for Developers on Every Build

TestJS Summit 2021

111 min

JS Security Testing Automation for Developers on Every Build

WorkshopFree

2 authors

As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives/alerts, without slowing you down.

Join this workshop to learn different ways developers can access Nexploit & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's Nexploit scanner with GitHub Actions
- Understand how modern applications, APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results

testing security testing automation security automated security

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 2022

26 min

It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder