@checkmate-monitor/auth-frontend 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @checkmate-monitor/auth-frontend
 
+## 0.1.1
+
+### Patch Changes
+
+- 0f8cc7d: Add runtime configuration API for Docker deployments
+
+  - Backend: Add `/api/config` endpoint serving `BASE_URL` at runtime
+  - Backend: Update CORS to use `BASE_URL` and auto-allow Vite dev server
+  - Backend: `INTERNAL_URL` now defaults to `localhost:3000` (no BASE_URL fallback)
+  - Frontend API: Add `RuntimeConfigProvider` context for runtime config
+  - Frontend: Use `RuntimeConfigProvider` from `frontend-api`
+  - Auth Frontend: Add `useAuthClient()` hook using runtime config
+
+- Updated dependencies [0f8cc7d]
+  - @checkmate-monitor/frontend-api@0.0.3
+  - @checkmate-monitor/ui@0.1.1
+
 ## 0.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkmate-monitor/auth-frontend",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/components/ForgotPasswordPage.tsx

@@ -14,12 +14,13 @@ import {
   CardContent,
   CardFooter,
 } from "@checkmate-monitor/ui";
-import { authClient } from "../lib/auth-client";
+import { useAuthClient } from "../lib/auth-client";
 
 export const ForgotPasswordPage = () => {
   const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
   const [submitted, setSubmitted] = useState(false);
+  const authClient = useAuthClient();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

package/src/components/RegisterPage.tsx

@@ -27,7 +27,7 @@ import {
 } from "@checkmate-monitor/ui";
 import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
 import { SocialProviderButton } from "./SocialProviderButton";
-import { authClient } from "../lib/auth-client";
+import { useAuthClient } from "../lib/auth-client";
 
 export const RegisterPage = () => {
   const [name, setName] = useState("");
@@ -42,6 +42,7 @@ export const RegisterPage = () => {
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
   const [registrationAllowed, setRegistrationAllowed] = useState<boolean>(true);
   const [checkingRegistration, setCheckingRegistration] = useState(true);
+  const authClient = useAuthClient();
 
   // Validate password on change
   useEffect(() => {

package/src/components/ResetPasswordPage.tsx

@@ -19,7 +19,7 @@ import {
   AlertTitle,
   AlertDescription,
 } from "@checkmate-monitor/ui";
-import { authClient } from "../lib/auth-client";
+import { useAuthClient } from "../lib/auth-client";
 
 export const ResetPasswordPage = () => {
   const [searchParams] = useSearchParams();
@@ -32,6 +32,7 @@ export const ResetPasswordPage = () => {
   const [error, setError] = useState<string>();
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const authClient = useAuthClient();
 
   // Validate password on change
   useEffect(() => {

package/src/hooks/usePermissions.ts

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { authClient } from "../lib/auth-client";
+import { useAuthClient } from "../lib/auth-client";
 import { rpcApiRef, useApi } from "@checkmate-monitor/frontend-api";
 import { AuthApi } from "@checkmate-monitor/auth-common";
 
 export const usePermissions = () => {
+  const authClient = useAuthClient();
   const { data: session } = authClient.useSession();
   const [permissions, setPermissions] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);

package/src/index.tsx

@@ -17,7 +17,7 @@ import { AuthErrorPage } from "./components/AuthErrorPage";
 import { ForgotPasswordPage } from "./components/ForgotPasswordPage";
 import { ResetPasswordPage } from "./components/ResetPasswordPage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
-import { authClient } from "./lib/auth-client";
+import { getAuthClientLazy } from "./lib/auth-client";
 
 import { usePermissions } from "./hooks/usePermissions";
 
@@ -93,7 +93,7 @@ class AuthPermissionApi implements PermissionApi {
  */
 class BetterAuthApi implements AuthApi {
   async signIn(email: string, password: string) {
-    const res = await authClient.signIn.email({ email, password });
+    const res = await getAuthClientLazy().signIn.email({ email, password });
     if (res.error) {
       const error = new Error(res.error.message || res.error.statusText);
       error.name = res.error.code || "AuthError";
@@ -118,9 +118,9 @@ class BetterAuthApi implements AuthApi {
   }
 
   async signInWithSocial(provider: string) {
-    const frontendUrl =
-      import.meta.env.VITE_FRONTEND_URL || "http://localhost:5173";
-    await authClient.signIn.social({
+    // Use current origin as callback URL (works in dev and production)
+    const frontendUrl = globalThis.location?.origin || "http://localhost:5173";
+    await getAuthClientLazy().signIn.social({
       provider,
       callbackURL: frontendUrl,
       errorCallbackURL: `${frontendUrl}${resolveRoute(
@@ -130,7 +130,7 @@ class BetterAuthApi implements AuthApi {
   }
 
   async signOut() {
-    await authClient.signOut({
+    await getAuthClientLazy().signOut({
       fetchOptions: {
         onSuccess: () => {
           // Redirect to frontend root after successful logout
@@ -141,7 +141,7 @@ class BetterAuthApi implements AuthApi {
   }
 
   async getSession() {
-    const res = await authClient.getSession();
+    const res = await getAuthClientLazy().getSession();
     if (res.error) {
       const error = new Error(res.error.message || res.error.statusText);
       error.name = res.error.code || "AuthError";
@@ -156,7 +156,7 @@ class BetterAuthApi implements AuthApi {
   }
 
   useSession() {
-    const { data, isPending, error } = authClient.useSession();
+    const { data, isPending, error } = getAuthClientLazy().useSession();
     return {
       data: data as AuthSession | undefined,
       isPending,

package/src/lib/auth-client.ts

@@ -1,6 +1,55 @@
+import { useMemo } from "react";
 import { createAuthClient } from "better-auth/react";
+import { useRuntimeConfig } from "@checkmate-monitor/frontend-api";
 
-export const authClient = createAuthClient({
-  baseURL: import.meta.env.VITE_API_BASE_URL || "http://localhost:3000",
-  basePath: "/api/auth",
-});
+// Cache for lazy-initialized client
+let cachedClient: ReturnType<typeof createAuthClient> | undefined;
+let configPromise: Promise<string> | undefined;
+
+/**
+ * React hook to get the auth client with proper runtime config.
+ * Uses RuntimeConfigProvider to get the base URL.
+ */
+export function useAuthClient() {
+  const { baseUrl } = useRuntimeConfig();
+
+  return useMemo(
+    () =>
+      createAuthClient({
+        baseURL: baseUrl,
+        basePath: "/api/auth",
+      }),
+    [baseUrl]
+  );
+}
+
+/**
+ * Lazy-initialized auth client for class-based APIs.
+ * Fetches config from /api/config if not already cached.
+ * Use useAuthClient hook in React components instead.
+ */
+export function getAuthClientLazy(): ReturnType<typeof createAuthClient> {
+  if (!cachedClient) {
+    // Create with default URL initially
+    cachedClient = createAuthClient({
+      baseURL: "http://localhost:3000",
+      basePath: "/api/auth",
+    });
+
+    // Fetch real config and update
+    if (!configPromise) {
+      configPromise = fetch("/api/config")
+        .then((res) => res.json())
+        .then((data: { baseUrl: string }) => data.baseUrl)
+        .catch(() => "http://localhost:3000");
+    }
+
+    configPromise.then((baseUrl) => {
+      cachedClient = createAuthClient({
+        baseURL: baseUrl,
+        basePath: "/api/auth",
+      });
+    });
+  }
+  return cachedClient;
+}