2.8 KiB
2.8 KiB
Auth options for Vite + React (SPA)
In Next.js, NextAuth.js (now Auth.js) is the standard: it gives you OAuth (Google, GitHub, etc.), sessions, callbacks, and JWT/cookies on the server.
For a Vite + React app (client-side SPA), there is no single “NextAuth for Vite.” You pick by how much you want to host yourself vs use a service.
1. Firebase Authentication (what this project uses)
- What it is: Google’s auth service; add SDK, configure providers (e.g. Google), get sign-in in the browser.
- Pros: Free tier, no backend required for basic “Sign in with Google,” works great with Vite + React.
- Cons: You’re tied to Firebase; for custom session logic you still need your own backend.
- Use when: You want the fastest “Sign in with Google” (or email link, etc.) with no backend.
2. Clerk
- What it is: Hosted auth (like Auth0) with pre-built React components and APIs.
- Pros: Drop-in
<SignIn />/<SignUp />, many providers, user management dashboard, works with any frontend (including Vite + React). - Cons: Paid after free tier; vendor lock-in.
- Use when: You want a “NextAuth-like” experience (components + dashboard) without running your own auth server.
3. Auth0 (Okta)
- What it is: Hosted identity platform; SDK + hosted login pages or embedded UI.
- Pros: Enterprise-ready, many providers, fine-grained controls.
- Cons: Can be heavy and costly for small apps.
- Use when: You need enterprise features or already use Okta.
4. Supabase Auth
- What it is: Auth layer from Supabase (DB + realtime + storage).
- Pros: Google, magic link, email/password; integrates with Supabase DB and RLS.
- Cons: Makes most sense if you use Supabase for data.
- Use when: Your backend (or “BaaS”) is Supabase.
5. Auth.js (formerly NextAuth) + your own backend
- What it is: The same library NextAuth uses; you run it on Express, Fastify, or another Node server. Your Vite app is just a client that talks to that API.
- Pros: Full control, sessions/callbacks like in Next.js, same mental model as NextAuth.
- Cons: You build and run the backend; CORS and cookie/session handling for SPA.
- Use when: You want “NextAuth” behavior (sessions, callbacks, multiple providers) with an Express (or similar) API and a Vite React frontend.
Summary
| Need | Good fit |
|---|---|
| “Sign in with Google” only | Firebase Auth |
| Pre-built UI + dashboard | Clerk |
| Backend is Supabase | Supabase Auth |
| NextAuth-style + Express | Auth.js on Express |
This app uses Firebase Auth for a simple, backend-free Google sign-in that works well with Vite + React.