Node Provider Protection with JWTs in Frontend dApps

This project demonstrates how to protect node provider API keys (e.g., for services like Alchemy) in frontend dApps using JWTs. By leveraging short-lived JWTs and refresh tokens, we can securely manage access to node providers without exposing API keys directly in the frontend. For a detailed explanation, check out the blog post here, and see the solution in action in the demo app.

Features

• JWT Generation: Securely generate short-lived JWTs on the server.
• Token Refresh: Automatically refresh tokens before expiration to maintain user sessions.
• Middleware Integration: Handle refresh tokens using Next.js middleware.
• Edge Runtime Ready: Uses the jose package, which is optimized for edge runtimes.
• Secure HTTP-Only Cookies: Store refresh tokens securely using HTTP-only cookies to protect against JavaScript access and cross-site attacks.

Getting Started

Follow these steps to set up the project locally:

Prerequisites

• Node.js
• npm

Environment Variables

Create a .env file in the root of the project and add the following environment variables. You can find the explanations for these variables in the blog post.

ALCHEMY_PRIVATE_KEY_PKCS8=<Your PKCS8 Private Key>
ALCHEMY_KEY_ID=<Your Key ID>
REFRESH_TOKEN_SECRET=<Your Refresh Token Secret>
NEXT_PUBLIC_WC_PROJECT_ID=<Your WalletConnect Project ID>

Development Server

To run the application locally, run:

npm install
npm run dev