Skip to content

Latest commit

 

History

History
103 lines (61 loc) · 5.25 KB

README.md

File metadata and controls

103 lines (61 loc) · 5.25 KB
Raw

"Astroturfing: the deceptive practice of presenting an orchestrated marketing or public relations campaign in the guise of unsolicited comments from members of the public." - Oxford Languages

Introduction

This is a starter template for a CRUD web app with a session-based authentication. It is based on "Lucia Astro User Name Password" example. Node.js, TypeScript, React, Lucia v3, Astro. In essense, it is a multi-page application (with a server-side routing and Astro-specific redirects).

npm install
npm run dev

The sole reason for this code is to practice web development with a metaframework. Kudos to pilcrow for sharing complete examples with multiple authentication methods and multiple frameworks.

Official "Lucia Astro UserName Password" Example

  1. Clone the demo sample code.

    cd to a folder and run npm install.

  2. Alternatively,

    npm create astro@latest mini-auth
cd mini-auth
npx astro add node
npm i lucia better-sqlite3 @types/better-sqlite3 @lucia-auth/adapter-sqlite

    Overwrite the src folder with the one provided by the git repo.

Run npm run dev, the demo will show an unstyled form expecting a username with length between 3 and 31 characters, and only lowercase letters, 0-9, -, and _. Password no shorter than 6 characters.

Modifications

So far, I have continued with

  1. Tailwind CSS:

    npx astro add tailwind
npm i @tailwindcss/typography daisyui@latest

    Adjust tailwind.config.mjs with typography and daisyui as in robbins23 daisyui-admin... or now here.

  2. React:

    npx astro add react
npm i react-hook-form @hookform/resolvers @heroicons/react

  3. Adding forms with a proper handling of errors around fetch, redirects, and styling.

    Styling takes a lot of iterations, do not discount it.

There is still a lot to do, like blocking everything GUI-reachable when a user submits a form, not just the form. Turn an in-memory SQLite to an in-process file-based SQLite managed with, say, Drizzle ORM. CSRF protection and all sorts of other protections.

The weakest link in this whole technology stack is a metaframework.

Doubts About Astro

Astro can serve as a React metaframework, but it is not particularly good at it:

  1. The whole code base is now infected with "*.astro" which React cannot call.

  2. Astro allows writing HTML, JSX, and "JSX-forked", which is quite confusing:

    <div class="min-h-screen gap-4 lg:gap-24 lg:w-3/5 mx-auto flex flex-col items-center text-base-content">
    <Header client:load />
</div>

    Notice "class" instead of "className" and the "client:load" annotation inside what looks to be a JSX component.

  3. The SSG mode produces annoying React errors (warnings): 418, 423.

  4. "npm run build" creates only absolute paths controlled with "site" and "base", which is not enough, esp. if you want to use github pages. Manual editing will be needed.

  5. Problems with nested scopes.

Ultimately, Astro does avoid passing around React code as strings. Pairing it with Lucia v3, one can set up a working authentication demo in no time. However, I want everything TypeScript, not "*.astro". There is also a lot of Astro and Lucia magic which makes coding like cobbling obscure 3rd party services which I would rather avoid. I also do not believe much in metaframeworks anymore as their coding patterns are not portable or universal.

Status: Abandoned in favor of a hard splitting between backend (something minimal like Express or Hono, router-mostly, manual auth rewritten from scratch), and frontend (Vite + React), which is essentially a single-page application (React router at the frontend).

References

  1. Vercel completes $250 mln Series E round at $3.25 bln valuation, 2024

  2. Web Dev Cody: How much money did my channel earn this year. youtube, 2024

  3. Lichess.org: Technology Stack, Server Costs

  4. Web Dev Cody: Serverless might bankrupt you. youtube, 2024

  5. Web Dev Cody: How do server side authentication sessions work (express & cookies). youtube, 2023

  6. Diona Rodrigues: Fetch API, do you really know how to handle errors? dev.to, 2023

  7. Austin Shelby: react-hook-form and zod. youtube, 2022