This is a complete, detailed re-usable boilerplate for a web app by Rory Garton-Smith.
It uses TypeScript + React, Next.js/Vercel for the front end, Supabase for the database, and Express + Node.js for the back end.
- Proper separation of Server/Client request via sanitized and rate limited endpoints
- Uses JWT parsing to auth the user on 'authenticated' endpoints for security
- OTP-style login
- User input sanitation
- Boilerplate login screen, auth details collection page, and home page
- Boilerplate Terms & Conditions and Privacy Policy pages
- Optional analytics integration (Umami)
- User context at the top level to minimize repeated useEffect-style calls on components
- Uses the modern approach to Next JS focused around the app/ folder but keeps T&C and Priv Pol on pages route for easy deep-linking (this is necessary for a lot of modern SAAS providers)
- Custom fonts/custom CSS is all supported, check the public route for fonts and the globals CSS in the web app for how to wrap them
Contributions to this project are welcome by anyone. Please submit a PR into the main branch.
- Make an account on Supabase
- Run the SQL in the
DB_Setup.md
file to create theusers
table - Enable Row-Level Security (RLS) in Supabase
- (Optional) Create an Umami account for analytics tracking
- Create accounts on Vercel and Heroku
- Create two new repositories based on the directories
boilerplate-web
andboilerplate-server
. - In
boilerplate-server
, create a.env
file with the following values:
SUPABASE_URL="insert_here"
SUPABASE_KEY="insert_here"
SUPABASE_JWT_SECRET="insert_here"
UMAMI_URL="https://cloud.umami.is/api/send"
UMAMI_WEBSITE_ID="insert_here"
- In
boilerplate-web
, create a.env.local
file with the following values:
NEXT_PUBLIC_SUPABASE_URL="insert_here"
NEXT_PUBLIC_SUPABASE_ANON_KEY="insert_here"
NEXT_PUBLIC_API_URL="http://localhost:3000"
NEXT_PUBLIC_WS_URL="ws://localhost:3000"
NEXT_PUBLIC_UMAMI_WEBSITE_ID="insert_here"
Use the Supabase service worker key only in the server.
Use the anon key in the web app.
Please ensure RLS is enabled in your supabase table.
- Search and replace all instances of
MyCompany
with your company name. - Search and replace all instances of
MyProject
with your project/app name.
npm run dev
Run the command in both boilerplate-server
and boilerplate-web
directories. Do it in the server first, the server doesn't like when localhost 3000 is already taken.
This document provides an overview of the available API endpoints, grouped by their respective sections, including their rate limiting configurations and authentication requirements.
Description: Creates a new user account in the system.
- Rate Limiting: 5 requests per IP per 10 minutes.
- Requires Authentication: No.
- Rate Limiter Middleware:
userCreateRateLimiter
Description: Sends a One-Time Password (OTP) to the user for authentication.
- Rate Limiting: 5 requests per IP per 15 minutes.
- Requires Authentication: No.
- Rate Limiter Middleware:
otpRateLimiter
Description: Checks if a user exists in the database based on the authenticated email.
- Rate Limiting: 120 requests per IP per minute.
- Requires Authentication: Yes.
- Rate Limiter Middleware:
checkIfUserExistsRateLimiter
Description: Checks if the provided username exists in the database. If the username belongs to the authenticated user (same email), the user can proceed with updates; otherwise, it reports the username as taken.
- Rate Limiting: 120 requests per IP per minute.
- Requires Authentication: Yes.
- Rate Limiter Middleware:
checkIfUsernameExistsRateLimiter
Description: Updates the user's profile information.
- Rate Limiting: 10 requests per IP per 15 minutes.
- Requires Authentication: Yes.
- Rate Limiter Middleware:
updateUserRateLimiter
Description: Retrieves user data
- Rate Limiting: 120 requests per IP per minute.
- Requires Authentication: Yes.
- Rate Limiter Middleware:
getUserDataRateLimiter
Description: Logs the sign out of a user from the application.
- Rate Limiting: 25 requests per IP per 15 minutes.
- Requires Authentication: Yes.
- Rate Limiter Middleware:
signOutRateLimiter
- All endpoints with "Requires Authentication" require the user to provide a valid JWT token in the
Authorization
header. - Rate limiting settings help prevent abuse and overuse of the API endpoints, with responses adhering to the configured limits.