fix: get config to openauth client in Next.js production build

Author: finxol

apps/api/Dockerfile

@@ -72,6 +72,9 @@ RUN adduser --system --uid 1001 runner
 COPY --from=installer --chown=runner:runner /app/apps/api/wait-for-it.sh /usr/local/bin/
 RUN chmod 500 /usr/local/bin/wait-for-it.sh
 
+RUN mkdir -p /app/.data
+RUN chown runner:runner /app/.data
+
 USER runner
 
 COPY --from=builder --chown=runner:runner /app/apps/api/out/index.min.mjs ./index.min.mjs

apps/api/src/lib/auth-client.ts

@@ -1,6 +1,8 @@
-import { getRuntimeClient } from "@karr/auth/client"
-import { lazy, APP_URL, API_BASE } from "@karr/config"
+import { getClient, getCallbackUrl } from "@karr/auth/client"
+import { lazy } from "@karr/config"
 
-const c = lazy(() => getRuntimeClient(APP_URL, API_BASE))
+const c = lazy(async () => await getClient())
+const u = lazy(async () => await getCallbackUrl())
 
-export const { client, callbackUrl } = c.value
+export const client = await c.value
+export const callbackUrl = await u.value

apps/api/src/routes/auth/issuer.ts

@@ -12,12 +12,13 @@ import sqlite from "db0/connectors/node-sqlite"
 import dbDriver from "unstorage/drivers/db0"
 
 import { subjects } from "@karr/auth/subjects"
-import { API_BASE } from "@karr/config"
+import { API_BASE, APP_URL } from "@karr/config"
 import { logger } from "@karr/util/logger"
 
 import { callbackUrl, client } from "@/lib/auth-client"
 import { responseErrorObject } from "@/lib/helpers"
 import { UnStorage } from "./unstorage-adapter"
+import { authBaseUrl } from "@karr/auth/client"
 
 async function getUser(provider: string, email: string) {
     console.log(provider, email)
@@ -49,7 +50,7 @@ const THEME_OPENAUTH: Theme = {
 }
 
 const app = issuer({
-    basePath: `${API_BASE}/auth`,
+    basePath: authBaseUrl(API_BASE),
     select: Select({
         providers: {
             github: {
@@ -112,6 +113,15 @@ const app = issuer({
     }
 })
 
+app.get("/test", async (ctx) => {
+    logger.debug("Test route", ctx.req.url)
+    logger.debug("callbackUrl", callbackUrl)
+    logger.debug("app url", APP_URL)
+    logger.debug("auth base", authBaseUrl(API_BASE))
+    logger.debug("auth base with app url", authBaseUrl(API_BASE, APP_URL))
+    return ctx.json({ message: "Hello, world!" })
+})
+
 app.get("/callback", async (ctx) => {
     const url = new URL(ctx.req.url)
     const code = ctx.req.query("code")

apps/web/Dockerfile

@@ -5,8 +5,6 @@ LABEL repository="https://github.com/finxol/karr"
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV TURBO_TELEMETRY_DISABLED=1
 ENV HUSKY=0
-# The port that the api listens to.
-ENV APP_URL=http://localhost
 ENV DOCKER=1
 
 ENV PNPM_HOME="/pnpm"
@@ -43,6 +41,8 @@ COPY --from=installer /app/out/json/ .
 RUN pnpm install --frozen-lockfile
 
 ENV NODE_ENV=production
+# Set required config values for the build
+ENV APP_URL=http://buildtime
 
 # Build the project
 COPY --from=installer /app/out/full/ .

apps/web/next.config.js

@@ -1,6 +1,6 @@
 import createNextIntlPlugin from "next-intl/plugin"
 
-import { API_BASE, APP_URL } from "@karr/config"
+import { API_BASE } from "@karr/config"
 
 const withNextIntl = createNextIntlPlugin()
 
@@ -14,8 +14,7 @@ const nextConfig = {
         "/**/*.css": ["src/assets/**/*.css"]
     },
     env: {
-        NEXT_PUBLIC_API_BASE: API_BASE,
-        NEXT_PUBLIC_APP_URL: APP_URL
+        NEXT_PUBLIC_API_BASE: API_BASE
     },
 
     experimental: {

apps/web/src/app/auth/actions.ts

@@ -2,19 +2,20 @@
 
 import { cookies } from "next/headers"
 import { getLocale } from "next-intl/server"
+import { Tokens } from "@openauthjs/openauth/client"
 
-import { client, callbackUrl } from "@/app/auth/client"
+import { getClient, getCallbackUrl } from "@karr/auth/client"
 import { subjects } from "@karr/auth/subjects"
 
 import { redirect } from "@/i18n/routing"
 
-import { Tokens } from "@openauthjs/openauth/client"
-
 export async function auth() {
     const jar = await cookies()
     const accessToken = jar.get("access_token")
     const refreshToken = jar.get("refresh_token")
 
+    const client = await getClient()
+
     if (!accessToken) {
         return false
     }
@@ -40,6 +41,9 @@ export async function login() {
     const accessToken = jar.get("access_token")
     const refreshToken = jar.get("refresh_token")
 
+    const client = await getClient()
+    const callbackUrl = await getCallbackUrl()
+
     if (accessToken) {
         const verified = await client.verify(subjects, accessToken.value, {
             refresh: refreshToken?.value

apps/web/src/app/auth/client.ts

@@ -4,9 +4,7 @@ services:
             context: .
             dockerfile: ./apps/web/Dockerfile
         environment:
-            - LOG_LEVEL=debug
             - CONFIG_DIR=/app/config
-            - API=http://api:1993
             - PORT=3000
         ports:
             - 3000:3000
@@ -22,7 +20,6 @@ services:
         secrets:
             - db-password
         environment:
-            - LOG_LEVEL=debug
             - CONFIG_DIR=/app/config
             - DB_HOST=db
             - DB_USER=postgres
@@ -56,7 +53,7 @@ services:
             dockerfile: Dockerfile
         restart: unless-stopped
         ports:
-            - 80:80
+            - 8080:8080
             #- "443:443"
             #- "443:443/udp"
         environment:

compose-dev.yml

@@ -1,4 +1,4 @@
-import { createClient, type ClientInput } from "@openauthjs/openauth/client"
+import { createClient } from "@openauthjs/openauth/client"
 import { logger } from "@karr/util/logger"
 
 /**
@@ -20,40 +20,46 @@ export const clientID = "karr"
  * @param apiBase - The base path of the API (e.g., /api/v1)
  * @returns The full issuer URL
  */
-export const authBaseUrl = (appUrl: string, apiBase: string) => {
+export const authBaseUrl = (apiBase: string, appUrl?: string) => {
+    const path = `${apiBase.replace(/\/$/, "")}${issuerPath}`
+    if (!appUrl) return path
+
     const url = new URL(appUrl)
-    url.pathname = `${apiBase.replace(/\/$/, "")}${issuerPath}`
+    url.pathname = path
     return url.toString()
 }
 
 /**
  * Constructs the full callback URL based on the runtime issuer URL.
- * @param issuerUrl - The full base URL of the OpenAuth issuer (e.g., http://localhost:8080/api/v1/auth)
  * @returns The full callback URL
  */
-function getRuntimeCallbackUrl(issuerUrl: string) {
+export async function getCallbackUrl() {
+    const { APP_URL, API_BASE } = await import("@karr/config")
+
+    const issuerUrl = authBaseUrl(API_BASE, APP_URL)
+
     if (!issuerUrl) {
         logger.error("Issuer URL must be provided at runtime to getCallbackUrl.")
         return ""
     }
-    // Ensure issuerUrl doesn't have a trailing slash before appending
-    const cleanIssuerUrl = issuerUrl.replace(/\/$/, "")
-    return `${cleanIssuerUrl}${callbackPath}`
+    const callbackUrl = `${issuerUrl.replace(/\/$/, "")}${callbackPath}`
+
+    if (!callbackUrl) {
+        logger.error("Failed to initialize callback URL.")
+        process.exit(1)
+    }
+
+    return callbackUrl
 }
 
 /**
  * Creates an auth client instance configured with the runtime issuer URL.
- * @param appUrl - The base URL of the app (e.g., http://localhost)
- * @param apiBase - The base path of the API (e.g., /api/v1)
- * @param options - Optional additional client options
  * @returns An initialized OpenAuth client and the callback URL
  */
-export function getRuntimeClient(
-    appUrl: string,
-    apiBase: string,
-    options?: Omit<ClientInput, "issuer" | "clientID">
-) {
-    const issuerUrl = authBaseUrl(appUrl, apiBase)
+export async function getClient() {
+    const { APP_URL, API_BASE } = await import("@karr/config")
+
+    const issuerUrl = authBaseUrl(API_BASE, APP_URL)
 
     if (!issuerUrl) {
         logger.error("Issuer URL must be provided at runtime to getClient.")
@@ -63,19 +69,16 @@ export function getRuntimeClient(
     const client = createClient({
         clientID,
         issuer: issuerUrl,
-        ...options
+        fetch: (url, options) => {
+            logger.debug("fetch", url, options)
+            return fetch(url, options)
+        }
     })
-    const callbackUrl = getRuntimeCallbackUrl(issuerUrl)
 
     if (!client) {
         logger.error("Failed to initialize OpenAuth client.")
         process.exit(1)
     }
 
-    if (!callbackUrl) {
-        logger.error("Failed to initialize callback URL.")
-        process.exit(1)
-    }
-
-    return { client, callbackUrl }
+    return client
 }