Support new Daisy UI template along with CRUD operations

package.json

@@ -1,7 +1,7 @@
 {
   "name": "public",
   "description": "Monorepo containing the JS/TS client libraries",
-  "version": "0.9.23",
+  "version": "0.9.24",
   "private": true,
   "type": "module",
   "scripts": {

packages/client/README.template.md

@@ -23,7 +23,7 @@ in README.template.md and outputs to README.md
     <br />
     <a href="#{GITHUB_REPO}#">GitHub</a>
     ·
-    <a href="#{DEMO_SITE}#">Demo</a>
+    <a href="#{PRELINE_DEMO_SITE}#">Demo</a>
     ·
     <a href="#{DOCS}#">Documentation</a>
     ·

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@passlock/client",
-  "version": "0.9.23",
+  "version": "0.9.24",
   "description": "Passkey authentication and social login for web apps (Typescript). Framework agnostic",
   "keywords": [
     "passkey",

packages/create-sveltekit/README.md

@@ -34,7 +34,7 @@ in README.template.md and outputs to README.md
 ☝️ Google sign in / one-tap  
 📪 Mailbox verification (via a one time code or link)  
 🌘 Dark mode with theme selection (light/dark/system)  
-🚀 [Preline][preline] and [Shadcn][shadcn] variants
+🚀 [Daisy UI][daisy], [Preline][preline] and [Shadcn][shadcn] variants
 
 ## Requirements
 
@@ -82,5 +82,6 @@ Please see the template [homepage][homepage]
 [passlock-apikeys]: https://console.passlock.dev/apikeys
 [pnpm]: https://pnpm.io/installation
 [preline]: https://preline.co
+[daisy]: https://daisyui.com
 [shadcn]: https://www.shadcn-svelte.com
 [homepage]: https://github.com/passlock-dev/ts-clients/packages/create-sveltekit/docs/README.md

packages/create-sveltekit/README.template.md

@@ -17,7 +17,7 @@ in README.template.md and outputs to README.md
     <br />
     <a href="#{GITHUB_REPO}#">GitHub</a>
     ·
-    <a href="#{DEMO_SITE}#">Demo</a>
+    <a href="#{PRELINE_DEMO_SITE}#">Demo</a>
     ·
     <a href="#{DOCS}#">Documentation</a>
     ·
@@ -34,7 +34,7 @@ in README.template.md and outputs to README.md
 ☝️ Google sign in / one-tap  
 📪 Mailbox verification (via a one time code or link)  
 🌘 Dark mode with theme selection (light/dark/system)  
-🚀 [Preline][preline] and [Shadcn][shadcn] variants
+🚀 [Daisy UI][daisy], [Preline][preline] and [Shadcn][shadcn] variants
 
 ## Requirements
 
@@ -82,5 +82,6 @@ Please see the template [homepage][homepage]
 [passlock-apikeys]: https://console.passlock.dev/apikeys
 [pnpm]: https://pnpm.io/installation
 [preline]: https://preline.co
+[daisy]: https://daisyui.com
 [shadcn]: https://www.shadcn-svelte.com
 [homepage]: https://github.com/passlock-dev/ts-clients/packages/create-sveltekit/docs/README.md

packages/create-sveltekit/docs/README.md

@@ -20,7 +20,7 @@ in README.template.md and outputs to README.md
 <p align="center">
   Sveltekit starter template featuring Passkeys, Social Login (Apple & Google) and more...
   <br />
-  <a href="https://d1rl0ue18b0151.cloudfront.net">Demo (Preline)</a> &nbsp; | &nbsp; <a href="https://dbr4qrmypnl85.cloudfront.net">Demo (Shadcn)</a>
+  <a href="https://d1p6mpdsb02lid.cloudfront.net">Demo (Daisy UI)</a> &nbsp; | &nbsp; <a href="https://d1rl0ue18b0151.cloudfront.net">Demo (Preline)</a> | &nbsp; <a href="https://dbr4qrmypnl85.cloudfront.net">Demo (Shadcn)</a>
 </p>
 
 ## Features
@@ -30,7 +30,7 @@ in README.template.md and outputs to README.md
 ☝️ Google sign in / one-tap  
 📪 Mailbox verification (via a one time code or link)  
 🌘 Dark mode with theme selection (light/dark/system)  
-🚀 [Preline][preline] and [Shadcn][shadcn] variants
+🚀 [Daisy UI][daisy], [Preline][preline] and [Shadcn][shadcn] variants
 
 ## Screenshots
 
@@ -222,6 +222,7 @@ Please file an [issue][issues] and I'll respond ASAP.
 [lucia]: https://lucia-auth.com
 [tailwind]: https://tailwindcss.com
 [preline]: https://preline.co
+[daisy]: https://daisyui.com
 [meltui]: https://melt-ui.com
 [shadcn]: https://www.shadcn-svelte.com
 [passlock-signup]: https://console.passlock.dev/register

packages/create-sveltekit/docs/README.template.md

@@ -20,7 +20,7 @@ in README.template.md and outputs to README.md
 <p align="center">
   Sveltekit starter template featuring Passkeys, Social Login (Apple & Google) and more...
   <br />
-  <a href="#{DEMO_SITE}#">Demo (Preline)</a> &nbsp; | &nbsp; <a href="#{SHADCN_DEMO_SITE}#">Demo (Shadcn)</a>
+  <a href="#{DAISY_DEMO_SITE}#">Demo (Daisy UI)</a> &nbsp; | &nbsp; <a href="#{PRELINE_DEMO_SITE}#">Demo (Preline)</a> | &nbsp; <a href="#{SHADCN_DEMO_SITE}#">Demo (Shadcn)</a>
 </p>
 
 ## Features
@@ -30,7 +30,7 @@ in README.template.md and outputs to README.md
 ☝️ Google sign in / one-tap  
 📪 Mailbox verification (via a one time code or link)  
 🌘 Dark mode with theme selection (light/dark/system)  
-🚀 [Preline][preline] and [Shadcn][shadcn] variants
+🚀 [Daisy UI][daisy], [Preline][preline] and [Shadcn][shadcn] variants
 
 ## Screenshots
 
@@ -222,6 +222,7 @@ Please file an [issue][issues] and I'll respond ASAP.
 [lucia]: https://lucia-auth.com
 [tailwind]: https://tailwindcss.com
 [preline]: https://preline.co
+[daisy]: https://daisyui.com
 [meltui]: https://melt-ui.com
 [shadcn]: https://www.shadcn-svelte.com
 [passlock-signup]: https://console.passlock.dev/register

packages/create-sveltekit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@passlock/create-sveltekit",
-  "version": "0.9.22",
+  "version": "0.9.24",
   "description": "A CLI for creating new SvelteKit projects with Passkey authentication, Social Login and more",
   "keywords": [
     "create",

packages/create-sveltekit/src/cli.ts

@@ -75,12 +75,17 @@ async function main() {
       {
         value: 'preline',
         label: 'Preline CSS',
-        hint: 'Lucia, Preline & Superforms',
+        hint: 'Prisma, Lucia, Preline & Superforms',
+      },
+      {
+        value: 'daisy',
+        label: 'Daisy UI',
+        hint: 'Prisma, Lucia, Daisy UI & Superforms',
       },
       {
         value: 'shadcn',
         label: 'Shadcn/ui',
-        hint: 'Lucia, Shadcn/ui (Svelte fork) & Superforms',
+        hint: 'Prisma, Lucia, Shadcn/ui (Svelte fork) & Superforms',
       },
     ],
     initialValue: 'preline',
@@ -110,7 +115,6 @@ async function main() {
 
   if (dependencies) {
     const s = spinner()
-
     s.start('Installing dependencies...')
 
     try {
@@ -125,6 +129,32 @@ async function main() {
     s.stop('Installed dependencies.')
   }
 
+  // ask to setup prisma
+  const prisma = await confirm({
+    message: 'Setup Sqlite dev database? (requires pnpm)',
+  })
+
+  if (isCancel(prisma)) {
+    cancel('Operation cancelled.')
+    return process.exit(0)
+  }
+
+  if (prisma) {
+    const s = spinner()
+    s.start('Creating Sqlite database...')
+
+    try {
+      await execSync('pnpm run prisma:migrate', { cwd })
+    } catch {
+      console.log()
+      console.log('📦️ pnpm is required:')
+      console.log('npm i -g pnpm')
+      return process.exit(0)
+    }
+
+    s.stop('Database created.')
+  }
+
   note(outroNote, 'Important')
 
   outro('Done. 👌')

packages/create-sveltekit/templates/common/.env

@@ -34,4 +34,13 @@ PUBLIC_APPLE_CLIENT_ID = ''
 # however Apple still requires us to pass a redirect url
 # during authentication, and it must match one of the Website URLs
 # the Service ID was configured with 
-PUBLIC_APPLE_REDIRECT_URL = ''
+PUBLIC_APPLE_REDIRECT_URL = ''
+
+# This was inserted by `prisma init`:
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./dev.db"

packages/create-sveltekit/templates/common/docs/intro.md

@@ -14,6 +14,10 @@ Passlock also handles social sign in, abstracting passkey and google authenticat
 
 During registration and authentication, Passlock returns a token. We send this token to the backend actions and verify it's authenticity via the Passlock REST API.
 
+## Prisma
+
+[Primsa][prisma] is a SQL ORM that works well with both Typescript and Prisma. Lucia (see below) has built in support for Prisma.
+
 ## Lucia
 
 [Lucia][lucia] handles sessions. Put simply, when a user authenticates, Passlock returns a token. A backend `+page.server.ts` action verifies the token is authentic, then creates a Lucia session. Lucia supports many database backends, this example uses sqlite.
@@ -83,7 +87,7 @@ Similar conceptually, the heaby lifting is offloaded to Passlock. We just need t
 
 ## Hooks
 
-We want to protect the `/app` route. We do this in [src/hooks.server.ts](../src/hooks.server.ts) by checking the route id and user/session status.
+We want to protect the `/todos` route. We do this in [src/hooks.server.ts](../src/hooks.server.ts) by checking the route id and user/session status.
 
 ## Mailbox verification
 
@@ -121,6 +125,7 @@ Passlock will send the user to this route, appending a `?code=xxx` query paramet
 > Why do it this way? Why not simply verify the code in the +page.server.ts load function? Because we may need to re-authenticate the user. For background please see the [passlock docs](https://docs.passlock.dev/docs/howto/verify-emails#re-authenticating-the-user)
 
 [passlock]: https://passlock.dev
+[prisma]: https://www.prisma.io/orm
 [lucia]: https://lucia-auth.com
 [tailwind]: https://tailwindcss.com
 [preline]: https://preline.co

packages/create-sveltekit/templates/common/ignore

@@ -1,17 +1,19 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
-/package
+build
+.svelte-kit
+package
 .env
 .env.*
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 sqlite.db
-TODO.txt
 
 # sst
 .sst
 sst.config.ts
-src/sst-env.d.ts
+src/sst-env.d.ts
+
+# prisma
+prisma

packages/create-sveltekit/templates/common/prisma/migrations/20240828121815_init/migration.sql

@@ -0,0 +1,26 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "email" TEXT NOT NULL,
+    "givenName" TEXT NOT NULL,
+    "familyName" TEXT NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "expiresAt" DATETIME NOT NULL,
+    CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Todo" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "text" TEXT NOT NULL,
+    CONSTRAINT "Todo_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

packages/create-sveltekit/templates/common/prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

packages/create-sveltekit/templates/common/prisma/schema.prisma

@@ -0,0 +1,37 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id         String  @id
+  email      String  @unique
+  givenName  String
+  familyName String
+  
+  sessions   Session[]
+  todos      Todo[]
+}
+
+model Session {
+  id        String   @id
+  userId    String
+  expiresAt DateTime
+
+  user      User     @relation(references: [id], fields: [userId], onDelete: Cascade)
+}
+
+model Todo {
+  id        String   @id
+  userId    String
+  text      String
+
+  user      User     @relation(references: [id], fields: [userId], onDelete: Cascade)
+}

packages/create-sveltekit/templates/common/src/app.d.ts

@@ -17,5 +17,4 @@ declare global {
   const google: typeof import('google-one-tap')
 }
 
-export { }
-
+export {}

packages/create-sveltekit/templates/common/src/hooks.server.ts

@@ -1,15 +1,15 @@
 import { login } from '$lib/routes'
 import { lucia } from '$lib/server/auth'
-import { initLucia } from '$lib/server/db'
 import { redirect, type Handle } from '@sveltejs/kit'
 
+// protect /todos
 const isProtectedRoute = (routeId: string | null) => routeId?.startsWith('/(app)')
 
 export const handle: Handle = async ({ event, resolve }) => {
   const sessionId = event.cookies.get(lucia.sessionCookieName)
 
   if (!sessionId && isProtectedRoute(event.route.id)) {
-    return redirect(302, '/')
+    return redirect(302, '/login')
   } else if (!sessionId) {
     event.locals.user = null
     event.locals.session = null
@@ -19,25 +19,25 @@ export const handle: Handle = async ({ event, resolve }) => {
   const { session, user } = await lucia.validateSession(sessionId)
 
   if (session && session.fresh) {
+    // update the cookie with the new session id
     const sessionCookie = lucia.createSessionCookie(session.id)
-    // sveltekit types deviates from the de-facto standard
-    // you can use 'as any' too
     event.cookies.set(sessionCookie.name, sessionCookie.value, {
       path: '/',
       ...sessionCookie.attributes
     })
   }
 
   if (!session) {
+    // session id was invalid so set a blank cookie
     const sessionCookie = lucia.createBlankSessionCookie()
     event.cookies.set(sessionCookie.name, sessionCookie.value, {
       path: '/',
       ...sessionCookie.attributes
     })
   }
 
-  event.locals.user = user || null
-  event.locals.session = session || null
+  event.locals.user = user
+  event.locals.session = session
 
   if (isProtectedRoute(event.route.id) && event.locals.user) {
     return resolve(event)
@@ -47,5 +47,3 @@ export const handle: Handle = async ({ event, resolve }) => {
     return resolve(event)
   }
 }
-
-initLucia()