This repository is archived and no longer maintained. Please refer to the BitBadges Quickstart for the latest version of the quickstart repository.
Welcome to the Blockin Quickstart Repo! This repository is a quickstart frontend / backend example repository to get started using Blockin. The pages/api folder is for your backend. Everything else is for your frontend. The backend and frontend should be completely decoupled with no overlap.
This is a Next.js project bootstrapped with create-next-app. Blockin also offers an Express backend only template at https://github.com/Blockin-Labs/blockin-quickstart-express.
Note that this implementation uses one ChainDriver implementation for Algorand and one for Ethereum. The Algorand one uses WalletConnect, AlgoSDK, and PureStake API. The Ethereum one is built for Moralis and Metamask.
The authorizing resource's backend is simulated in src/pages/api. For an actual implementation, this API should be hosted elsewhere, but it is done like this for convenience purposes using Next.js. Here, we make use of local secrets using process.env variables defined in the .env file. Anything not in this api folder should never use the Blockin library.
First, you will need to create a .env file with a sample passphrase and all valid API links and secrets. An example is provided at .env.example.
Second, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.
The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
CTRL + F "TODO" to find all the places you need to handle and implement your own logic.
By default, we implement the Chain Drivers built by the Blockin team w/ API calls and verification (so .env must be set). If you would like to use your own Chain Drivers, you can do so by replacing the ChainDriver implementations with your desired ones.
Default: blockin-eth-driver, blockin-algo-driver, blockin-cosmos-driver
To use this repo in a fully offline manner (no API calls), simply remove the relevant details from the constructor of the ChainDriver implementations.
The Blockin library requires a nonce to be generated and signed. This is done in the backend. The nonce is generated by the backend and sent to the frontend. The frontend then signs the nonce and sends it back to the backend. The backend then verifies the signature and returns a JWT token. This JWT token is then used to authorize the user.
Note that you can also combine Blockin with your implemented Web 2.0 sign-in options (plus 2FA).
The pages/api folder is for your backend. Everything else is for your frontend. The backend and frontend should be decoupled.
You must create a .env file with valid environment variables if you use functions that call an API from the ChainDriver. See .env.example for an example env file.
By default, this repo uses some functions that call an API through ChainDriver, so it is assumed that you have a valid .env set. You may use Blockin without API calls if you only need it for challenge signature / verification (no block info / asset lookups).
If you would like to use this repo without the API calls, you will need to remove details from ChainDriver constructors relating to APIs (leave undefined).
You will have to implement generating and verify nonces yourself; see the Blockin docs.
The ENS resolution may be a bit slow because it currently uses the default shared API keys for all users of getDefaultProvider from ethers.js. (click the link to add your own API keys). This is defined in the selectedChainInfo prop of blockin_button.tsx. You may also choose to implement a new ENS resolution function if you wish.
To verify assets from a snapshot rather than from an API, you can use the options to the verifyChallenge call for each ChainDriver. See the Blockin docs for more details.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.