feat(oauth): support dynamic client URI for Vercel preview deployments

Author: NandkishorJadoun

modules/oauth.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, useNuxt } from 'nuxt/kit'
+import { defineNuxtModule, useNuxt, addTemplate } from 'nuxt/kit'
 import { join } from 'node:path'
 import { appendFileSync, existsSync, readFileSync } from 'node:fs'
 import { randomUUID } from 'node:crypto'
@@ -9,6 +9,29 @@ 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
+    const template = addTemplate({
+      filename: 'oauth-config.mjs',
+      getContents: () => `export const clientUri = ${JSON.stringify(clientUri)};`,
+      write: true,
+    })
+
+    nuxt.options.alias['#oauth/config'] = template.dst
+
     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-ignore: 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