feat(astro): add clerk auth

Remove lucia auth.

Author: wilsonianb

packages/codius-astro/astro.config.mjs

@@ -1,6 +1,7 @@
 import cloudflare from "@astrojs/cloudflare"
 import react from "@astrojs/react"
 import tailwind from "@astrojs/tailwind"
+import clerk from "@clerk/astro"
 import { defineConfig } from "astro/config"
 import simpleStackQuery from "simple-stack-query"
 
@@ -17,6 +18,7 @@ export default defineConfig({
     },
   }),
   integrations: [
+    clerk(),
     react(),
     tailwind({
       applyBaseStyles: false,

packages/codius-astro/package.json

@@ -21,6 +21,7 @@
     "@astrojs/cloudflare": "^11.0.4",
     "@astrojs/react": "^3.6.1",
     "@astrojs/tailwind": "^5.1.0",
+    "@clerk/astro": "^1.0.12",
     "@lucia-auth/adapter-sqlite": "^3.0.1",
     "@octokit/request-error": "^6.1.1",
     "@octokit/rest": "^21.0.0",

packages/codius-astro/src/actions/index.ts

@@ -10,14 +10,16 @@ export const server = {
       id: z.string(),
     }),
     handler: async ({ id }, context) => {
-      if (!context.locals.user) {
+      // TODO: protect /_actions/deleteApp in clerk?
+      const { userId } = context.locals.auth()
+      if (!userId) {
         throw new ActionError({
           code: "UNAUTHORIZED",
         })
       }
       const app = await context.locals.db.apps.delete({
         id,
-        userId: context.locals.user.id,
+        userId,
       })
       if (!app) {
         throw new ActionError({
@@ -60,7 +62,9 @@ export const server = {
     }),
     // https://github.com/withastro/roadmap/blob/actions/proposals/0046-actions.md#access-api-context
     handler: async ({ repoUrl, branch, directory }, context) => {
-      if (!context.locals.user) {
+      // TODO: protect /_actions/deployApp in clerk?
+      const { userId } = context.locals.auth()
+      if (!userId) {
         throw new ActionError({
           code: "UNAUTHORIZED",
         })
@@ -73,7 +77,7 @@ export const server = {
         const commit = await getCommit({ owner, repo, branch })
 
         const app = await context.locals.db.apps.create({
-          userId: context.locals.user.id,
+          userId,
           githubOwner: owner,
           repo,
           branch,
@@ -125,8 +129,8 @@ export const server = {
       const metadata: Stripe.MetadataParam = {
         appId,
       }
-      if (context.locals.user) {
-        metadata.userId = context.locals.user.id
+      if (context.locals.auth().userId) {
+        metadata.userId = context.locals.auth().userId
       }
       const session = await stripe.checkout.sessions.create({
         line_items: [

packages/codius-astro/src/components/UserAppsTable.astro

@@ -9,15 +9,14 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table"
-import type { User } from "lucia"
 
 interface Props {
-  user: User
+  userId: string
   dispatcherHostname: string
 }
 
-const { dispatcherHostname, user } = Astro.props
-const apps = await Astro.locals.db.apps.getByUserId(user.id)
+const { dispatcherHostname, userId } = Astro.props
+const apps = await Astro.locals.db.apps.getByUserId(userId)
 ---
 
 <Table>

packages/codius-astro/src/env.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../.astro/actions.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="@clerk/astro/env" />
 type D1Database = import("@cloudflare/workers-types").D1Database
 type DurableObjectNamespace =
   import("@cloudflare/workers-types").DurableObjectNamespace
@@ -19,6 +20,8 @@ type ENV = {
   GITHUB_WEBHOOK_SECRET: string
   STRIPE_TOPUP_PRICE_ID: string
   STRIPE_SECRET_KEY: string
+  PUBLIC_CLERK_PUBLISHABLE_KEY: string
+  CLERK_SECRET_KEY: string
   BILLING_DURABLE_OBJECT: DurableObjectNamespace<BillingDurableObject>
   DB: D1Database
 }

packages/codius-astro/src/layouts/Layout.astro

@@ -1,8 +1,14 @@
 ---
 import "@/styles/globals.css"
 import { ModeToggle } from "@/components/ModeToggle"
-import LoginButton from "@/components/LoginButton.astro"
-import LogoutButton from "@/components/LogoutButton.astro"
+// import LoginButton from "@/components/LoginButton.astro"
+// import LogoutButton from "@/components/LogoutButton.astro"
+import {
+  SignedIn,
+  SignedOut,
+  UserButton,
+  SignInButton,
+} from "@clerk/astro/components"
 
 interface Props {
   title?: string
@@ -75,15 +81,12 @@ const { title = "Welcome to Codius" } = Astro.props
     </svg>
     <h1>Welcome to <span>Codius</span></h1>
     <ModeToggle client:load />
-    {
-      Astro.locals.user ? (
-        <LogoutButton />
-      ) : (
-        <div>
-          <LoginButton />
-        </div>
-      )
-    }
+    <SignedOut>
+      <SignInButton mode="modal" />
+    </SignedOut>
+    <SignedIn>
+      <UserButton />
+    </SignedIn>
     <slot />
   </body>
 </html>

packages/codius-astro/src/middleware.ts

@@ -1,10 +1,12 @@
 import { initializeLucia, initializeGitHub } from "@/lib/auth"
 import { DB } from "@/lib/db"
-import { defineMiddleware } from "astro:middleware"
+import { clerkMiddleware } from "@clerk/astro/server"
+import type { MiddlewareHandler } from "astro"
+import { sequence } from "astro:middleware"
 
-// import { verifyRequestOrigin } from "lucia"
+const clerkAuth = clerkMiddleware()
 
-export const onRequest = defineMiddleware(async (context, next) => {
+const setupContext: MiddlewareHandler = (context, next) => {
   context.locals.db = new DB(context.locals.runtime.env.DB)
   const lucia = initializeLucia(context.locals.runtime.env.DB)
   context.locals.lucia = lucia
@@ -13,31 +15,7 @@ export const onRequest = defineMiddleware(async (context, next) => {
     context.locals.runtime.env.GITHUB_CLIENT_SECRET,
   )
   context.locals.github = github
-  const sessionId = context.cookies.get(lucia.sessionCookieName)?.value ?? null
-  if (!sessionId) {
-    context.locals.user = null
-    context.locals.session = null
-    return next()
-  }
-
-  const { session, user } = await lucia.validateSession(sessionId)
-  if (session && session.fresh) {
-    const sessionCookie = lucia.createSessionCookie(session.id)
-    context.cookies.set(
-      sessionCookie.name,
-      sessionCookie.value,
-      sessionCookie.attributes,
-    )
-  }
-  if (!session) {
-    const sessionCookie = lucia.createBlankSessionCookie()
-    context.cookies.set(
-      sessionCookie.name,
-      sessionCookie.value,
-      sessionCookie.attributes,
-    )
-  }
-  context.locals.session = session
-  context.locals.user = user
   return next()
-})
+}
+
+export const onRequest = sequence(clerkAuth, setupContext)

packages/codius-astro/src/pages/apps.astro

@@ -3,7 +3,8 @@ import { AppForm } from "@/components/AppForm"
 import UserAppsTable from "@/components/UserAppsTable.astro"
 import Layout from "@/layouts/Layout.astro"
 
-if (!Astro.locals.user) {
+const { userId } = Astro.locals.auth()
+if (!userId) {
   return Astro.redirect("/")
 }
 ---
@@ -12,7 +13,7 @@ if (!Astro.locals.user) {
   <main>
     <AppForm client:load />
     <UserAppsTable
-      user={Astro.locals.user}
+      userId={userId}
       dispatcherHostname={Astro.locals.runtime.env.DISPATHER_HOSTNAME}
     />
   </main>

packages/codius-astro/src/pages/apps/[id].astro

@@ -28,7 +28,7 @@ if (!app) {
   })
 }
 
-const userIsDeployer = Astro.locals.user?.id === app.deployer.id
+const userIsDeployer = Astro.locals.auth().userId === app.deployer.id
 
 if (app.status !== "deployed" && !userIsDeployer) {
   return new Response(null, {

packages/codius-astro/src/pages/checkout-sessions/[id]/success.astro

@@ -33,7 +33,11 @@ if (!session.amount_total) {
 
 const { appId, userId } = session.metadata
 
-if (Astro.locals.user && userId && userId !== Astro.locals.user.id) {
+if (
+  Astro.locals.auth().userId &&
+  userId &&
+  userId !== Astro.locals.auth().userId
+) {
   return new Response("Forbidden", { status: 403 })
 }