Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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
Ready to use boiler plate
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.
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.
To get started with the Open Source NFT & Wallet Auth Framework:
Explore the Documentation: Familiarize yourself with the setup instructions, features, and capabilities of the framework through our detailed guides and module descriptions.
Install the Framework: Follow the installation guide to set up the framework in your development environment.
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!
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.
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
Visit the official Node.js website.
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.
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:
For Fedora, Enterprise Linux, and Fedora-based distributions:
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:
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.
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
Go to the official Visual Studio Code website.
Click on the download link for your operating system (Windows, macOS, or Linux).
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:
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.
Launch Visual Studio Code.
Navigate to File > Open Folder...
from the top menu.
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.
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
In the VSCode sidebar, navigate to the components
folder.
Drill down to the landing
sub-folder.
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.
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!
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.
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.
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.
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.
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!
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.
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.
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.
Regular Security Audits:
Conduct regular security audits and code reviews to identify and fix vulnerabilities promptly.
Dependency Management:
Regularly update dependencies to incorporate the latest security patches and improvements.
Secure API Management: Use environment variables or secure vaults to manage API keys and other sensitive configurations.
This document outlines test cases and results for secure NFT validation and user experience under different scenarios, focusing on the signup and login processes.
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:
Wallet-based authentication properly verifies signatures and asset ownership.
Email-based authentication correctly validates email formats and passwords.
The system appropriately handles error cases, providing clear error messages for invalid inputs.
Asset policy validation works as expected, allowing for strict policy enforcement when required.
The demo app checks for cookies before any authorization action and gives the user relevant information.
All APIs work as expected and return relevant errors.
Areas for potential improvement or additional testing:
Edge case scenarios for policy validation with multiple assets
Performance testing for asset ownership verification, especially with large numbers of assets
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.
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Test Case | Description | Expected Result | Actual Result |
---|---|---|---|
Valid wallet signature
Signup with valid stake address, signature, key, and nonce
Successful signup with wallet details
Successful signup with wallet details
Invalid wallet signature
Signup with invalid signature
Error: Invalid wallet authentication
Error: Invalid wallet authentication
Valid asset ownership
Signup with valid asset ownership
Successful signup with asset details
Successful signup with asset details
Invalid asset ownership
Signup with asset not owned by the wallet
Error: Asset cannot be verified on-chain
Error: Asset cannot be verified on-chain
Strict policy validation (Pass)
Signup with asset matching strict auth policy
Successful signup with verified policy
Successful signup with verified policy
Strict policy validation (Fail)
Signup with asset not matching strict auth policy
Error: Invalid asset policy
Error: Invalid asset policy
Valid email and password
Signup with valid email format and password
Successful signup with email and password hash
Successful signup with email and password hash
Invalid email format
Signup with invalid email format
Error: Invalid email format
Error: Invalid email format
Invalid signup inputs
Signup with neither wallet nor email/password
Error: Invalid signup inputs
Error: Invalid signup inputs
Valid wallet signature
Login with valid stake address, signature, key, and nonce
Successful login
Successful login
Invalid wallet signature
Login with invalid signature
Error: Invalid wallet authentication
Error: Invalid wallet authentication
Mismatched wallet address
Login with wallet address not matching user data
Error: Invalid network or wallet address
Error: Invalid network or wallet address
Valid asset ownership
Login with valid asset ownership
Successful login
Successful login
Invalid asset ownership
Login with asset not owned by the wallet
Error: Asset cannot be verified on-chain
Error: Asset cannot be verified on-chain
Valid email and password
Login with correct email and password
Successful login
Successful login
Invalid email
Login with email not matching user data
Error: Invalid email or email format
Error: Invalid email or email format
Invalid password
Login with incorrect password
Error: Invalid password
Error: Invalid password
Invalid login inputs
Login with neither wallet nor email/password
Error: Invalid login inputs
Error: Invalid login inputs
Valid signature
Verify valid wallet signature
Return true
Return true
Invalid signature
Verify invalid wallet signature
Return false
Return false
Valid ownership
Verify asset owned by the wallet
Return true
Return true
Invalid ownership
Verify asset not owned by the wallet
Return false
Return false
Valid email format
Validate correct email format
Return true
Return true
Invalid email format
Validate incorrect email format
Return false
Return false
Correct password
Verify correct password against hash
Return true
Return true
Incorrect password
Verify incorrect password against hash
Return false
Return false
No auth token
Request without an auth token
Redirect to login page
Redirect to login page
Invalid auth token
Request with an invalid auth token
Redirect to login page
Redirect to login page
Valid auth token
Request with a valid auth token
Allow access to protected routes
Allow access to protected routes
Admin access
User with admin policy accessing admin routes
Allow access
Allow access
Non-admin access
User without admin policy accessing admin routes
Redirect to home page
Redirect to home page
Asset-specific access
User with correct policy accessing asset routes
Allow access
Allow access
Asset-specific denial
User without correct policy accessing asset routes
Redirect to home page
Redirect to home page
Cookie support check
First visit without cookie support check
Set cookie_support_check cookie
Set cookie_support_check cookie
Cookies required
Visit without cookie support
Redirect to cookies-required page
Redirect to cookies-required page
No auth token
Attempt to access page without auth token
Redirect to login page
Redirect to login page
Invalid policy
User with invalid policy for Asset1
Redirect to home page
Redirect to home page
Valid access
User with valid policy for Asset1
Render TokenGatedDemoPage
Render TokenGatedDemoPage
API failure
Failure in fetching policies
Throw error
Throw error
No auth token
Attempt to access page without auth token
Redirect to login page
Redirect to login page
Invalid policy
User with invalid policy for Asset2
Redirect to home page
Redirect to home page
Valid access
User with valid policy for Asset2
Render TokenGatedDemoPage
Render TokenGatedDemoPage
API failure
Failure in fetching policies
Throw error
Throw error
No auth token
Attempt to access settings without auth token
Redirect to login page
Redirect to login page
Non-admin access
Non-admin user attempting to access settings
Redirect to home page
Redirect to home page
Admin access
Admin user accessing settings
Render SettingsPage
Render SettingsPage
API failure
Failure in fetching policies
Throw error
Throw error
Render check
Component renders without crashing
Component renders successfully
Component renders successfully
Content verification
Correct title and subtitle displayed
Correct content rendered
Correct content rendered
Feature cards
Correct number and content of feature cards
Two feature cards with correct content
Two feature cards with correct content
Navigation
"Back to Home" link present and functional
Link present with correct href
Link present with correct href
Styling
Correct CSS classes applied
Classes applied as expected
Classes applied as expected
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.
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 Git's official website.
Open a terminal or command prompt on your machine.
Navigate to the directory where you want to store the project.
Run the following command to clone the repository: