A monorepo that implements Sign-In With Ethereum (SIWE) with an NodeJS TypeScript REST API and a client-side Single-Page Application in React with TypeScript.
If you like this content, please make sure to follow me:
ℹ️ Running Wagmi 0.2.8?
Looking for previous support for
wagmi@0.2.8? Check out the wagmi-0.2.8 branch.
- Requirements
- Sign Up Alchemy Account
- Sign Up Etherscan Account
- Sign Up Infura Account
- Local Setup
- Debugging
- Deployment
- License
- NVM or Node
v16.14.0 - Yarn
Go to https://www.alchemy.com
A - When logged in, in the top right, click on Create App
B - Set the Name to Quick Vite React TypeScript SIWE
C - Set the Environment to Development, Chain to Ethereum, and Network to Mainnet
D - Click Create App
In the Alchemy dashboard for your newly created project click VIEW KEY and opy the API KEY
File: .env
VITE_ALCHEMY_API_KEY="<YOUR_ALCHEMY_API_KEY>"
VITE_ETHERSCAN_API_KEY=""
VITE_INFURA_ID=""
VITE_APP_NAME="QUICK VITE REACT TYPESCRIPT SIWE"Go to https://etherscan.io
A - In the left sidebar click API Keys
B - In My API Keys click Add
C - For App Name enter Quick Vite React SIWE
D - Click Create New API Key
E - Copy API Key Token
File: packages/react/.env
VITE_ALCHEMY_API_KEY=""
VITE_ETHERSCAN_API_KEY="<YOUR_ETHERSCAN_API_KEY>"
VITE_INFURA_ID=""
VITE_APP_NAME="QUICK VITE REACT TYPESCRIPT SIWE"Go to https://infura.io/register
A - When signed in, in the top right section, click Create New Project
B - Set the Product to Ethereum
C - Set the Project Name to Quick Vite React TypeScript SIWE
D - Click Create
E - When the project is create copy the Project ID
File: packages/react/.env
VITE_ALCHEMY_API_KEY=""
VITE_ETHERSCAN_API_KEY=""
INFURA_ID="<YOUR_INFURA_PROJECT_ID>"
APP_NAME="QUICK VITE REACT TYPESCRIPT SIWE"cp packages/node/.env.example packages/node/.env;NOTE: You will need the different API keys mentioned above
cp packages/react/.env.example packages/react/.env;yarn dev;In case you need to kill a port:
kill -9 $(lsof -ti:5001); # node
kill -9 $(lsof -ti:3000); # reactTBD
MIT