https://github.com/aabbtree77/auth-starter-frontend

Frontend for a complete session-based user authentication, with styled forms. Vite, React, TypeScript.
https://github.com/aabbtree77/auth-starter-frontend

authentication authorization bun daisyui frontend localhost protected-routes react react-hook-form session session-cookie styling zod-validation

Last synced: about 2 hours ago
JSON representation

Frontend for a complete session-based user authentication, with styled forms. Vite, React, TypeScript.

• Host: GitHub
• URL: https://github.com/aabbtree77/auth-starter-frontend
• Owner: aabbtree77
• License: mit
• Created: 2024-06-25T09:54:01.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-06-29T13:43:51.000Z (4 months ago)
• Last Synced: 2024-06-29T14:51:00.997Z (4 months ago)
• Topics: authentication, authorization, bun, daisyui, frontend, localhost, protected-routes, react, react-hook-form, session, session-cookie, styling, zod-validation
• Language: TypeScript
• Homepage:
• Size: 65.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
> "The narrowest path is always the holiest." - Depeche Mode, 1993 

# Introduction

This is the second iteration of my quest for the holy grail, i.e. the best way to build CRUD web apps.

Previously, I have considered metaframeworks: [Next.js](https://github.com/ugurkellecioglu/next-14-lucia-auth-postgresql-drizzle-typescript-example/issues/1), [SvelteKit](https://github.com/edwardspresume/sveltekit-lucia-auth-v3-example/issues/3), and [Astro](https://github.com/aabbtree77/session-auth-starter). However, they are not reliable, they only allow you to move faster initially for certain types of VC-funded business settings.

Therefore, I have removed Astro by splitting everything into frontend (Vite + React) and backend (Hono + Drizzle + bun:sqlite). I have removed Lucia and rewrote authentication from scratch too. DB is now an explicitly controlled system, not a connector/adapter thing.

This code is the frontend part. See [the accompanied backend](https://github.com/aabbtree77/auth-starter-backend).

```sh

bun install

bun run dev

```

If this breaks, start with `bun create hono my-app` and recreate the structure.    

Notice that I did not place `.env` inside `.gitignore`.

# Decisions Made

1. No emails and complex workflows, hence no password resets, might add a social login as an escape hatch some day.

2. Only a single active user session is allowed. Managing multiple sessions with multiple cookies with all the permutations and expiry times, do you really want to go there?

3. Only the `bun run dev` mode.

4. Almost no middleware.

# Some Thoughts About (BE + FE) vs Metaframeworks

Pros of (BE + FE):

- No need to dwell on what a server-side React is, could be, will be.

- Feels like learning what the web is, as opposed to, say, Next.js.

These advantages are huge, esp. when considering how broken everything is.

Cons of (BE + FE):

- Two projects instead of one. Separate github repos, build systems, .env shenanigans, BE vs FE routing, docs, hosting... With dev and prod branches this becomes four. 

- Some choice paralysis, but this holds mostly for the backend, and it is not very severe. Express vs say Hono, SQLite vs PostgreSQL, Drizzle with the SQL strings (select) vs Drizzle all the way (query), Bun vs Node.

- [A lot of people](https://2023.stateofjs.com/en-US/libraries/meta-frameworks/) are now pushing metaframeworks. Next.js is no Unity/Unreal, but still something to watch for.