feat: support dynamic client URI for preview deployments (npmx-dev#739)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: NandkishorJadoun

knip.json

@@ -36,7 +36,7 @@
         "vite-plugin-pwa",
         "vue-router"
       ],
-      "ignoreUnresolved": ["#components"]
+      "ignoreUnresolved": ["#components", "#oauth/config"]
     },
     "cli": {
       "project": ["src/**/*.ts"]

modules/oauth.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import { defineNuxtModule, useNuxt, addServerTemplate } from 'nuxt/kit'
 import { join } from 'node:path'
 import { appendFileSync, existsSync, readFileSync } from 'node:fs'
 import { randomUUID } from 'node:crypto'
@@ -9,6 +9,26 @@ export default defineNuxtModule({
   },
   setup() {
     const nuxt = useNuxt()
+
+    const env = process.env.NUXT_ENV_VERCEL_ENV
+    const previewUrl = process.env.NUXT_ENV_VERCEL_URL
+    const prodUrl = process.env.NUXT_ENV_VERCEL_PROJECT_PRODUCTION_URL
+
+    let clientUri: string
+    if (env === 'preview' && previewUrl) {
+      clientUri = `https://${previewUrl}`
+    } else if (env === 'production' && prodUrl) {
+      clientUri = `https://${prodUrl}`
+    } else {
+      clientUri = 'http://127.0.0.1:3000'
+    }
+
+    // bake it into a virtual file
+    addServerTemplate({
+      filename: '#oauth/config',
+      getContents: () => `export const clientUri = ${JSON.stringify(clientUri)};`,
+    })
+
     if (nuxt.options._prepare || process.env.NUXT_SESSION_PASSWORD) {
       return
     }

server/utils/atproto/oauth.ts

@@ -6,14 +6,15 @@ import { getOAuthLock } from '#server/utils/atproto/lock'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
 import { UNSET_NUXT_SESSION_PASSWORD } from '#shared/utils/constants'
 import { OAuthMetadataSchema } from '#shared/schemas/oauth'
+// @ts-expect-error virtual file from oauth module
+import { clientUri } from '#oauth/config'
 // TODO: limit scope as features gets added. atproto just allows login so no scary login screen till we have scopes
 export const scope = 'atproto'
 
 export function getOauthClientMetadata() {
   const dev = import.meta.dev
 
-  // on dev, match in nuxt.config.ts devServer: { host: "127.0.0.1" }
-  const client_uri = dev ? `http://127.0.0.1:3000` : 'https://npmx.dev'
+  const client_uri = clientUri
   const redirect_uri = `${client_uri}/api/auth/atproto`
 
   const client_id = dev