Qwik City App ⚡️

• Qwik Docs
• Discord
• Qwik GitHub
• @QwikDev
• Vite

---

Simple Auth for Qwik

Based on some tutorials, and other knowledge I've gained from the Qwik Discord and another project using Cloudflare D1 (SQLite)

• Base Auth Functions Setup Tutorial (Framework Agnostic)

This is the base of the actual authentication logic

• Tutorial for NextJS

Uses Prisma and NextJS

• Prisma Setup for NextJS

I opted for Drizzle as it should be more lightweight/performant and similar DX

• Going further: CRUD Posts

Not Yet Implemented in this app

My Choice Changes:

Framework / ORM / DB

• Qwik/Qwik-City
• Drizzle ORM

Other Packages Used:

DB / Crypto / Hashing packages (from NextJS Tutorial(s) below)

• SQLite3 (LibSQL)
• @node-rs/argon2
• @oslojs/crypto
• @oslojs/encoding

---

Quick Intro to the App:

plugin@db.ts, db/index.ts

• initializes the DB as a singleton (borrowed from what someone shared on Discord, and I used this style in my other app)

auth/* folder

• includes auth functions from the first linked guide
• Note: for testing, it's using 15/30 second sessions! Guide uses 15/30 days

routes/[profile, login, register]

• simple routes for auth flow
• uses routeAction$()s to submit from Form components

components/starter/header

• shows different links based on if authenticated

• borrowed/modified from the Qwik starter

---

How to Run:

0. (install modules with pnpm install or npm install, etc)
1. Create a local.db file in the root directory
2. Create a .env file in the root directory with one line: DB_FILE_NAME="file:local.db"
3. run pnpm exec drizzle-kit push (or npx drizzle-kit push, etc)

• this creates the db tables in local.db based off of the schemas/relations

4. pnpm run dev to start the app in dev mode

• Surely needs some cleanup and some styling but it's in a working state for basic auth and protected routes

Using:

1. Try going to /profile and you shoud be redirected to /login since it is a protected route
2. Go to /register and register a new user (no validation implemented yet)
3. Go to /login and log in with that new user

• can use EITHER userName OR email, along with password
• Should be redirected to /profile after login!

4. Log out using the Log Out button and now you no longer can access /profile protected route

Install some db viewer if you want to query the tables to see the data as you go

---

Other things I tried:

• tried first setting up onPost for the form handlers and logout link but had issues, so switched to routeAction$()s and a server$() fn for logout button
• tried moving the logout server$() function to another file but saw some Qwik import errors and wasn't able to log out

• Not sure on this, maybe it would help to wrap the auth helper functions with server$()?