fix: use runtimeConfig and auto-gen dev session password

Author: danielroe

CONTRIBUTING.md

@@ -30,15 +30,13 @@ We want to create 'a fast, modern browser for the npm registry.' This means, amo
    pnpm install
    ```
 
-3. set `NUXT_SESSION_PASSWORD` in `.env`
-
-4. start the development server:
+3. start the development server:
 
    ```bash
    pnpm dev
    ```
 
-5. (optional) if you want to test the admin UI/flow, you can run the local connector:
+4. (optional) if you want to test the admin UI/flow, you can run the local connector:
 
    ```bash
    pnpm npmx-connector

modules/dev.ts

@@ -0,0 +1,28 @@
+import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import { join } from 'node:path'
+import { appendFileSync, existsSync, readFileSync } from 'node:fs'
+import { randomUUID } from 'node:crypto'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'dev',
+  },
+  setup() {
+    const nuxt = useNuxt()
+    if (nuxt.options._prepare || process.env.NUXT_SESSION_PASSWORD) {
+      return
+    }
+
+    const envPath = join(nuxt.options.rootDir, '.env')
+    const hasPassword =
+      existsSync(envPath) && /^NUXT_SESSION_PASSWORD=/m.test(readFileSync(envPath, 'utf-8'))
+
+    if (!hasPassword) {
+      console.info('Generating NUXT_SESSION_PASSWORD for development environment.')
+      const password = randomUUID().replace(/-/g, '')
+
+      nuxt.options.runtimeConfig.sessionPassword = password
+      appendFileSync(envPath, `# generated by dev module\nNUXT_SESSION_PASSWORD=${password}\n`)
+    }
+  },
+})

nuxt.config.ts

@@ -45,11 +45,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/main.css', 'vue-data-ui/style.css'],
 
-  devtools: { enabled: true },
-  devServer: {
-    host: '127.0.0.1',
+  runtimeConfig: {
+    sessionPassword: '',
   },
 
+  devtools: { enabled: true },
+
   app: {
     head: {
       htmlAttrs: { lang: 'en-US' },

server/api/auth/atproto.get.ts

@@ -5,7 +5,8 @@ import { OAuthSessionStore, OAuthStateStore } from '#server/utils/atproto/storag
 import { SLINGSHOT_ENDPOINT } from '#shared/utils/constants'
 
 export default defineEventHandler(async event => {
-  if (!process.env.NUXT_SESSION_PASSWORD) {
+  const config = useRuntimeConfig(event)
+  if (!config.sessionPassword) {
     throw createError({
       status: 500,
       message: 'NUXT_SESSION_PASSWORD not set',
@@ -47,7 +48,7 @@ export default defineEventHandler(async event => {
   event.context.agent = agent
 
   const session = await useSession(event, {
-    password: process.env.NUXT_SESSION_PASSWORD,
+    password: config.sessionPassword,
   })
 
   const response = await fetch(

server/api/auth/session.delete.ts

@@ -1,13 +1,14 @@
 export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
-  if (!process.env.NUXT_SESSION_PASSWORD) {
+  const config = useRuntimeConfig(event)
+  if (!config.sessionPassword) {
     throw createError({
       status: 500,
       message: 'NUXT_SESSION_PASSWORD not set',
     })
   }
 
   const session = await useSession(event, {
-    password: process.env.NUXT_SESSION_PASSWORD,
+    password: config.sessionPassword,
   })
 
   await oAuthSession?.signOut()

server/api/auth/session.get.ts

@@ -1,13 +1,14 @@
 export default defineEventHandler(async event => {
-  if (!process.env.NUXT_SESSION_PASSWORD) {
+  const config = useRuntimeConfig(event)
+  if (!config.sessionPassword) {
     throw createError({
       status: 500,
       message: 'NUXT_SESSION_PASSWORD not set',
     })
   }
 
   const session = await useSession(event, {
-    password: process.env.NUXT_SESSION_PASSWORD,
+    password: config.sessionPassword,
   })
 
   return session.data