Setting Up Your Development Environment

Before you can start using the Open Source NFT & Wallet Auth Framework for Cardano, you will need to set up an appropriate development environment. A crucial part of this setup is installing Visual Studio Code (VSCode), a popular code editor that offers great support for JavaScript and blockchain development.

Installing Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes.

Step 1: Download VSCode

1. Go to the official Visual Studio Code website.

2. Click on the download link for your operating system (Windows, macOS, or Linux).

3. Follow the download instructions provided on the site.

Step 2: Install VSCode

For Windows:

• Run the downloaded installer (.exe file).

• Follow the prompts in the Setup Wizard to complete the installation.

• You can accept the default settings, which include adding VSCode to your path, to make it accessible from the command line.

For macOS:

• Open the downloaded .zip archive.

• Move the Visual Studio Code app to your Applications folder.

• Launch it from your Applications folder or Spotlight search.

For Linux:

• Depending on the distribution, you can install VSCode using snap, apt, or yum:

  • For Debian/Ubuntu-based distributions: sudo apt install code

  • For Fedora/RHEL-based distributions: sudo yum install code

  • For any Linux distribution supporting Snap Packages: sudo snap install --classic code

Step 3: Verify Installation

Once installed, open Visual Studio Code by searching for it in your start menu or applications directory. You can verify that it's correctly installed by opening a new terminal or command prompt and typing:

code .

Our Project's First Big Step: Milestone 1 Overview

Introduction

We've reached our first major goal in our project to make logging into websites simpler and more secure using digital tokens (NFTs) on the Cardano blockchain. Let's break down what we've achieved so far!

What Have We Accomplished?

In this first phase, we focused on setting up the basic features needed for our new authentication system:

• Connecting Cardano Wallet: We've made it possible for you to link Cardano wallet (where your digital tokens or NFTs are stored) to your websites easily.

• Disconnecting Safely: You can also disconnect wallet, ensuring your information stays private and secure.

• Displaying Digital Assets: The system can now display all the digital assets wallet have, like tokens and NFTs, right on the website. This means users can see what you they at a glance. This will lead to using these assets for authentication in the future.

Why is This Important?

Security and Convenience

• Secure Connections: By enabling wallet connections, we ensure that your login is as secure as using a key to open a bank vault. Only you have the key, and only you can access your account.

• Easy Logouts: Being able to disconnect your wallet means you can feel safe that no one else can access your information once you log out.

• See Your Assets: With the ability to access token and NFT information, the user will be able to choose the way they want to access the website, whether a token or an NFT or just the wallet address.

A Smoother Online Experience

• Quick Access: Connecting wallet lets users access sites quickly—no need to type in passwords or wait for login approvals.

• Privacy Control: Users can disconnect anytime to control who sees their information and when they see it.

What's Next?

With these foundational features set up, we're ready to build more advanced functions that will make the online world even safer and more convenient. We're talking about features that let you use your NFTs as your digital ID across many websites and apps without needing a password.

Conclusion

We're excited about hitting this first milestone and are geared up for the next steps. By making these basic features robust and user-friendly, we're setting the stage for a revolution in how we all use the internet—simpler, faster, and much more secure.

Thank you for supporting us on this journey. We look forward to making even more progress and sharing it with you!

Security Review for Littlefish NFT Auth Framework (NPM Package)

Security Measures Implemented in Milestone 3:

1. Authentication:

   • Email/Password Authentication: Uses bcrypt for hashing passwords, ensuring secure storage.

   • Cardano Wallet Authentication: Verifies wallet ownership using cryptographic signatures and public keys with @cardano-foundation/cardano-verify-datasignature.

   • Asset Authentication: In addition to previous methods, now the package supports NFT and Token authentication.

   • On-Chain Verification: Ownership of the assets provided by the wallet is verified by Blockfrost API.

   • Authentication Policies: Developers can choose to make their authentication only to allow specific policy IDs. Authentication Policy IDs can be as many as the developer wants.

2. Data Protection:

   • Password Hashing: Uses bcrypt for hashing passwords.

   • Nonce Generation: Generates unique nonces using crypto.randomBytes to prevent replay attacks.

   • Hex-to-Bech32 Conversion: Safely converts hexadecimal strings to Bech32 format using bech32 for wallet address validation.

3. Validation Functions:

   • String Validation: Ensures non-empty strings.

   • Email Validation: Uses regex to validate email formats.

   • Password Validation: Uses regex to enforce strong password criteria.

   • Wallet Address Verification: Verifies wallet addresses by converting hex to Bech32 and checking signatures.

   • PolicyID Verification: Gets all the addresses that owns assets of the provided policy ID on-chain

   • Asset Ownership Verification: Verifies ownership of assets for cardano wallets.

Potential Considerations for Future Hardening:

1. Regular Security Audits:

   • Conduct regular security audits and code reviews to identify and fix vulnerabilities promptly.

2. Dependency Management:

   • Regularly update dependencies to incorporate the latest security patches and improvements.

Our Recomendations for the Use of This Package

• Secure API Management: Use environment variables or secure vaults to manage API keys and other sensitive configurations.

Welcome to the Documentation for Open Source NFT & Wallet Auth Framework for Cardano

Introduction

Welcome to the official documentation for the Open Source NFT & Wallet Auth Framework for Cardano. This comprehensive guide is designed to equip developers, contributors, and users with the necessary knowledge to effectively utilize and contribute to the framework. Whether you are looking to integrate advanced authentication solutions into your decentralized applications (dApps) or simply exploring the capabilities of Cardano blockchain technology, this documentation will provide you with the tools and information needed.

FUND11 Details

Accepted Proposal

Git Repo

Ready to use boiler plate

Live Preview

What is the Open Source NFT & Wallet Auth Framework?

The Open Source NFT & Wallet Auth Framework is a JavaScript-based solution that enables seamless integration of NFT and wallet-based authentication systems into Cardano dApps. This framework simplifies the process of implementing secure and innovative authentication methods, enhancing user experience and security for blockchain applications.

Who Should Use This Framework?

This framework is ideal for:

• Blockchain Developers: Looking to incorporate NFT and wallet authentication in their dApps without the hassle of developing from scratch.

• Project Managers: Managing teams that require a reliable and easy-to-integrate authentication solution for their products on the Cardano network.

• Crypto Enthusiasts and Educators: Interested in the practical applications of NFTs and blockchain technology in user authentication.

How to Get Started?

To get started with the Open Source NFT & Wallet Auth Framework:

1. Explore the Documentation: Familiarize yourself with the setup instructions, features, and capabilities of the framework through our detailed guides and module descriptions.

2. Install the Framework: Follow the installation guide to set up the framework in your development environment.

3. Join the Community: Connect with other developers and users in the Cardano ecosystem through forums and community channels listed in our Community Resources section.

Thank you for choosing the Open Source NFT & Wallet Auth Framework for Cardano. Let's build a more secure and user-friendly blockchain world together!

Downloading the Framework

To start working with the Open Source NFT & Wallet Auth Framework for Cardano, you need to download the source code from the GitHub repository. This section will guide you through the process of cloning the repository using Git, a distributed version control system.

Prerequisites

Before you can clone the repository, you must have Git installed on your machine. If you do not have Git installed, you can download and install it from .

Cloning the Repository

1. Open a terminal or command prompt on your machine.

2. Navigate to the directory where you want to store the project.

3. Run the following command to clone the repository:

NFT Validation and User Experience Test Cases

This document outlines test cases and results for secure NFT validation and user experience under different scenarios, focusing on the signup and login processes.

1. Signup Process (signupUser function)

1.1 Wallet-based Signup

1.2 Email-based Signup

1.3 Error Handling

2. Login Process (loginUser function)

2.1 Wallet-based Login

2.2 Email-based Login

2.3 Error Handling

3. Utility Functions

3.1 verifyWalletAddress

3.2 verifyAssetOwnership

3.3 validateEmail

3.4 verifyPassword

4. Middleware Tests

4.1 Authentication and Authorization

4.2 Policy Validation

4.3 Cookie Handling

5. Server-Side Rendering Tests

5.1 Asset1 Page

5.2 Asset2 Page

5.3 Settings Page

6. Client-Side Component Tests

6.1 TokenGatedDemoPage

Conclusion

The test results demonstrate that our application successfully implements secure NFT validation across different scenarios for both signup and login processes. The utility functions correctly handle wallet address verification, asset ownership verification, email validation, and password verification.

Key findings:

1. Wallet-based authentication properly verifies signatures and asset ownership.

2. Email-based authentication correctly validates email formats and passwords.

3. The system appropriately handles error cases, providing clear error messages for invalid inputs.

4. Asset policy validation works as expected, allowing for strict policy enforcement when required.

5. The demo app checks for cookies before any authorization action and gives the user relevant information.

6. All APIs work as expected and return relevant errors.

Areas for potential improvement or additional testing:

1. Edge case scenarios for policy validation with multiple assets

2. Performance testing for asset ownership verification, especially with large numbers of assets

3. Security testing for potential attack vectors (e.g., replay attacks, signature spoofing)

Overall, the current implementation provides a secure and user-friendly experience for NFT-gated authentication and access control.

Opening the Project in Visual Studio Code

Now that you have the project cloned to your local machine, you need to open it in Visual Studio Code (VSCode). VSCode is a powerful editor that provides robust support for TypeScript and React development.

Opening the Project

1. Launch Visual Studio Code.

2. Navigate to File > Open Folder... from the top menu.

3. Browse to the location where you cloned the repository, select the boilerplate-e folder (or whatever you named the folder), and click Open. This action will load your project into VSCode.

Editing the Hero Section

The hero section of your application is a key part of your user interface, designed to capture users' attention and convey the main message of your application quickly. Here’s how you can locate and modify this section in the file located at /components/landing/hero-section.tsx:

Locate the Hero Section File

1. In the VSCode sidebar, navigate to the components folder.

2. Drill down to the landing sub-folder.

3. Open the file named hero-section.tsx.

Modify the Hero Section

Once you have the hero-section.tsx file open, you can make changes to the text and style as needed:

• Change the Headline Text: Find the <h1> tag to modify the main headline of the hero section.

Installing Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It is crucial for running the development server and various build tools needed when working with JavaScript frameworks, including our Open Source NFT & Wallet Auth Framework for Cardano.

Download and Install Node.js

Node.js can be installed on Windows, macOS, and Linux, and comes with npm (node package manager), which is used to install libraries and tools needed for modern JavaScript development.

Step 1: Download Node.js

1. Visit the official Node.js website.

2. You will see options for the "LTS" (Long-Term Support) version and the "Current" version. We recommend downloading the LTS version for better stability and support.

3. Click on the download link for your operating system.

Step 2: Install Node.js

For Windows:

• Run the downloaded installer (.msi file).

• Follow the instructions provided by the installer, which will guide you through the setup process including the installation of npm.

• Make sure to check the boxes that allow Node.js and npm to be added to your PATH if they are not selected by default.

For macOS:

• Open the downloaded .pkg file.

• Follow the instructions in the installation wizard to install Node.js and npm.

• The installer will also automatically add Node.js and npm to your PATH.

For Linux:

• You can install Node.js via the package manager of your Linux distribution. For most popular distributions, NodeSource provides convenient install scripts:

  • For Debian/Ubuntu-based distributions:

    Copy

    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
    sudo apt-get install -y nodejs

  • For Fedora, Enterprise Linux, and Fedora-based distributions:

    Copy

    curl -fsSL https://rpm.nodesource.com/setup_lts.x | sudo bash -
    sudo yum install -y nodejs

• These scripts will install Node.js and npm and add them to your PATH.

Step 3: Verify Installation

To check that Node.js and npm are correctly installed, open a terminal or command prompt and type:

node --version
npm --version