Welcome to the BitBadges Quickstart Repo!
This quickstarter helps you get started with common multi-chain development flows. This is a Next.js project. It should be treated as a starting point and customized to fit your needs.
The frontend uses antd and TailwindCSS. The backend uses Next.js API routes and a simple HTTP cookie-based session system.
- A simple frontend with antd and TailwindCSS
- Frontend components for multi-chain users (search users by name or address, selects, etc)
- Multi-chain authentication of users via Sign In with BitBadges
- Access to the BitBadges ecosystem through its API and SDK
- Requesting signatures from wallets
The main branch is the default branch, but there are also other branches that you may find useful. We hope to support multiple use cases and provide a variety of starting points for different projects via the different branches. For example, there may be a branch with a subscription starter kit already implemented.
- Clone the repo
- Install the dependencies with
npm i - Configure the .env file (see .env.example)
- Run the development server with
npm run devand open http://localhost:3000 with your browser - Start building your project! 🚀
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages. This is your "backend" whereas the rest of the code is your "frontend". You may have a backend but not a frontend, or vice versa. You can pick and choose what to keep from this codebase.
You can find TODOs scattered throughout the codebase. These are meant to be a starting point for you to build your project. You can remove them as you handle them.
In development mode, it is aimed to be a more visual and interactive experience for what is happening behind the scenes. This is useful for testing and debugging.
Depending on your use case, you may or may not need to communicate with wallets. If you do not, simply turn off wallet mode, prune the unnecessary code, and enjoy a more streamlined experience.
Sign In with BitBadges is a simple and secure way to authenticate users. It is an OAuth2 flow that outsources all the heavy work to BitBadges. This is a great way to authenticate users without needing to interact with wallets on your end.
You have access to the BitBadges SDK via the "bitbadgesjs-sdk" package. This includes loads of useful functions for interacting with BitBadges.
This alsop includes access to the BitBadges API (assuming you have a valid .env set). See here for more documentation.
This is accessed via the BitBadgesApi variable such as
import { BitBadgesApi } from 'bitbadgesjs-sdk';
await BitBadgesApi.getCollections(...);Your app may need to request signatures (messages, transactions, etc) from wallets. We have provided global contexts for all supported chains. Simply have the user connect their wallet and then use the context to request signatures via a unified interface.
const chainContext = useChainContext();
await chainContext.signMessage('Hello, World!');We refer you to individual wallet / chain documentation for more information on wallet interactions.
Feel free to reach out to the BitBadges team for help and support. We are happy to help you with your project and answer any questions you may have. Please provide feedback on this repo and let us know how we can improve it for your project!