Astro-Supabase-Vercel

Astro-Supabase-Vercel is an open-source boilerplate that demonstrates how to integrate Supabase authentication into an Astro site that mixes static site generation (SSG) and server-side rendering (SSR), deployed to Vercel.

What is Astro-Supabase-Vercel?

Astro-Supabase-Vercel is an example application repository that wires together three services: Astro as the framework, Supabase for user sign-up and authentication, and Vercel for hosting. It produces a working app with login and register screens, authenticated sessions, and a mix of statically generated and server-rendered pages. The repo is used as a reference implementation and is available on GitHub with a live demo at astro-supabase-vercel.vercel.app.

Key Features

• Supabase authentication — Complete email/password sign-up and login flows handled by Supabase's auth API, with server-side cookie-based sessions.
• Astro SSG and SSR — The app demonstrates both static generation and on-demand server rendering, using Astro's per-page rendering modes.
• Vercel deployment — The project is configured for the Vercel adapter (@astrojs/vercel) and includes a live demo on Vercel.
• Tailwind CSS — Tailwind was added to the project for styling the UI components, including the login/register screens.
• React islands — Auth components are built in React and mounted with Astro's client:only="react" directive, showing the islands architecture.
• Ready-made auth screens — A login page and a register page are included, with redirects after sign-in and logout.
• Security-conscious setup — The Supabase key is kept out of the client-side code (per the development log), and the project marks missing Secure and HttpOnly cookie flags as a known limitation.

Who is it for?

• Developers learning Astro's hybrid rendering — You can study how a single Astro project combines static and server-rendered routes in an auth context.
• Teams bootstrapping Supabase auth — Instead of starting from scratch, you get a working login/register flow wired to Supabase and Vercel.
• Developers porting an existing site to Vercel — The deployment setup shows the minimal changes needed to run an Astro+Supabase app on Vercel.

What can you do with it?

• Prototype an authenticated area — Use the login/register screens and session handling to scope out a dashboard or member-only feature.
• Learn the islands architecture — See how React components can be embedded into Astro pages with client:only for interactive parts.
• Deploy a demo in minutes — The Vercel configuration and demo link give you a reference deployment you can replicate for your own app.

How does it work?

The app uses Astro's server-side rendering to handle authentication logic. When a user signs up or logs in, Supabase validates the credentials and the server sets a cookie with the session, then redirects to a protected page. The client-side auth form is a React island loaded with client:only="react". The whole app is deployed to Vercel through the @astrojs/vercel adapter, which enables both static pages and serverless functions.

Pros and cons

• Pros — Real-world example of a modern stack; concise codebase; explicit security checklist in the development log.
• Cons / known limitations — Cookies are not yet marked Secure and HttpOnly; automatic JWT renewal is not implemented; error handling is minimal.

FAQ

Is this template free?

Yes, the repository is open-source and available for anyone to use or fork, with no licensing fees mentioned.

What authentication method does it use?

It uses Supabase's email/password authentication. Supabase handles user sign-up, login, and session tokens, while Astro manages the server-side cookie and redirects.

Can I deploy this to Vercel?

Yes, the project is explicitly configured for Vercel using the @astrojs/vercel adapter, and the live demo runs on a Vercel domain.

Does it include error handling?

The README states that error handling is minimal, so you should add your own validation and error messages before using it in production.

What are the known security issues?

The development log lists two: cookies should be Secure and HttpOnly, and JWT renewal is not automatic. Both are flagged as areas to fix.