-
Main page
-
WalletConnect popup for choosing the app
-
Sign in with metamask
-
User's dashboard with minting button
-
Admin's dashboard. On this page admins can change the roles and statuses of users, filter and sort them.
-
Page with minted token
-
Private page. This page will be available only for token holders
Inspiration
I was inspired by the web3 community. I saw lots of people, who wanted to start create their projects, but they were faced with the complicated documentation of frameworks and tools. It was difficult for them to make the first step.
Refine + Web3 + JWT will help to make the first step in web3 development.
What it does
JWT Authentication system that combines the power of web 3 technology with the security of blockchain. Wallet integration creates a seamless and secure login experience.
Once logged in, users can take advantage of a range of features, including the ability to mint NFTs from their dashboard.
Admins have access to their personal dashboard, where they can manage users.
In order to log in, users are required to sign a message. Additionally, token minting also requires a signature because the smart contract used in this demo implements a whitelist using digital signatures.
This project can be used by developers or web3 enthusiasts as a template for their own projects. Thanks to the domain-driven design of the authentification module it can be used with any framework.
Refine helped in organizing the authentification. I've created custom authProvider, where all the necessary methods were defined.
Also, admin's dashboard were created with custom dataProvider. I liked working with data, it was easy to manipulate it, create reactive tables with up-to-date information.
Login page, Layout, Filters, Checking, if the user is authentificated - all these things were made by Refine.
How I built it
Stack and services:
- MongoDB for holding users information,
- React + Next.js + Refine for website development,
- Solidity + Hardhat for smartcontract
- WalletConnect + Wagmi for connecting to Ethereum blockchain
Challenges I ran into
The biggest challenge was to make smooth integration with Ethereum blockchain.
Accomplishments that I'm proud of
- JWT framework agnostic authentification, built in domain-driven design
- Dashboard with minting page and NFT collection directly from the blockchain
- Minting with digital signature whitelist technique
- Private page for NFT holders only
What's next for Refine Web3 + JWT authentication
This project is not only for hackathon. It can be used by any developer or web3 enthusiast to save the time.
Log in or sign up for Devpost to join the conversation.