@checkmate-monitor/auth-frontend 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @checkmate-monitor/auth-frontend
 
+## 0.2.0
+
+### Minor Changes
+
+- e26c08e: Add password change functionality for credential-authenticated users
+
+  - Add `changePassword` route to auth-common
+  - Create `ChangePasswordPage.tsx` component with password validation, current password verification, and session revocation option
+  - Add "Change Password" menu item in User Menu
+  - Reuses patterns from existing password reset flow for consistency
+
+### Patch Changes
+
+- Updated dependencies [e26c08e]
+  - @checkmate-monitor/auth-common@0.2.0
+
+## 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.2.0",
   "type": "module",
   "main": "src/index.tsx",
   "exports": {

package/src/components/ChangePasswordPage.tsx

@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Lock, ArrowLeft, CheckCircle, AlertCircle, Key } from "lucide-react";
+import { passwordSchema } from "@checkmate-monitor/auth-common";
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Alert,
+  AlertIcon,
+  AlertContent,
+  AlertTitle,
+  AlertDescription,
+  Checkbox,
+} from "@checkmate-monitor/ui";
+import { useAuthClient } from "../lib/auth-client";
+
+export const ChangePasswordPage = () => {
+  const navigate = useNavigate();
+
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [revokeOtherSessions, setRevokeOtherSessions] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string>();
+  const [success, setSuccess] = useState(false);
+  const [validationErrors, setValidationErrors] = useState<string[]>([]);
+  const authClient = useAuthClient();
+
+  // Validate new password on change
+  useEffect(() => {
+    if (newPassword) {
+      const result = passwordSchema.safeParse(newPassword);
+      if (result.success) {
+        setValidationErrors([]);
+      } else {
+        setValidationErrors(result.error.issues.map((issue) => issue.message));
+      }
+    } else {
+      setValidationErrors([]);
+    }
+  }, [newPassword]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(undefined);
+
+    // Frontend validation
+    if (newPassword !== confirmPassword) {
+      setError("New passwords do not match");
+      return;
+    }
+
+    const result = passwordSchema.safeParse(newPassword);
+    if (!result.success) {
+      setError(result.error.issues[0].message);
+      return;
+    }
+
+    if (!currentPassword) {
+      setError("Current password is required");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const response = await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions,
+      });
+
+      if (response.error) {
+        setError(response.error.message ?? "Failed to change password");
+      } else {
+        setSuccess(true);
+      }
+    } catch (error_) {
+      setError(
+        error_ instanceof Error ? error_.message : "Failed to change password"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Success state
+  if (success) {
+    return (
+      <div className="min-h-[80vh] flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardHeader className="space-y-1 text-center">
+            <div className="mx-auto w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mb-2">
+              <CheckCircle className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle className="text-2xl font-bold">
+              Password Changed Successfully
+            </CardTitle>
+            <CardDescription>
+              Your password has been updated.
+              {revokeOtherSessions &&
+                " All other sessions have been signed out."}
+            </CardDescription>
+          </CardHeader>
+          <CardFooter>
+            <Button className="w-full" onClick={() => navigate("/")}>
+              Go to Dashboard
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-[80vh] flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold">Change Password</CardTitle>
+          <CardDescription>
+            Enter your current password and choose a new password.
+          </CardDescription>
+        </CardHeader>
+        <form onSubmit={handleSubmit}>
+          <CardContent className="space-y-4">
+            {error && (
+              <Alert variant="error">
+                <AlertIcon>
+                  <AlertCircle className="h-4 w-4" />
+                </AlertIcon>
+                <AlertContent>
+                  <AlertTitle>Error</AlertTitle>
+                  <AlertDescription>{error}</AlertDescription>
+                </AlertContent>
+              </Alert>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="currentPassword">Current Password</Label>
+              <div className="relative">
+                <Key className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="currentPassword"
+                  type="password"
+                  placeholder="Enter current password"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                  autoFocus
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="newPassword">New Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="newPassword"
+                  type="password"
+                  placeholder="Enter new password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {validationErrors.length > 0 && (
+                <ul className="text-sm text-muted-foreground list-disc pl-5 space-y-1">
+                  {validationErrors.map((validationError, i) => (
+                    <li key={i} className="text-destructive">
+                      {validationError}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirm New Password</Label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="Confirm new password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  className="pl-10"
+                  required
+                />
+              </div>
+              {confirmPassword && newPassword !== confirmPassword && (
+                <p className="text-sm text-destructive">
+                  Passwords do not match
+                </p>
+              )}
+            </div>
+
+            <div className="text-xs text-muted-foreground">
+              Password must be at least 8 characters and contain:
+              <ul className="list-disc pl-5 mt-1">
+                <li>At least one uppercase letter</li>
+                <li>At least one lowercase letter</li>
+                <li>At least one number</li>
+              </ul>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="revokeOtherSessions"
+                checked={revokeOtherSessions}
+                onCheckedChange={(checked) =>
+                  setRevokeOtherSessions(checked === true)
+                }
+              />
+              <Label
+                htmlFor="revokeOtherSessions"
+                className="text-sm font-normal"
+              >
+                Sign out of all other sessions
+              </Label>
+            </div>
+          </CardContent>
+          <CardFooter className="flex flex-col gap-4">
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={
+                loading ||
+                validationErrors.length > 0 ||
+                newPassword !== confirmPassword ||
+                !currentPassword
+              }
+            >
+              {loading ? "Changing..." : "Change Password"}
+            </Button>
+            <button
+              type="button"
+              onClick={() => navigate(-1)}
+              className="text-sm text-primary hover:underline flex items-center justify-center gap-1"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Go Back
+            </button>
+          </CardFooter>
+        </form>
+      </Card>
+    </div>
+  );
+};

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

@@ -16,14 +16,15 @@ import { RegisterPage } from "./components/RegisterPage";
 import { AuthErrorPage } from "./components/AuthErrorPage";
 import { ForgotPasswordPage } from "./components/ForgotPasswordPage";
 import { ResetPasswordPage } from "./components/ResetPasswordPage";
+import { ChangePasswordPage } from "./components/ChangePasswordPage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
-import { authClient } from "./lib/auth-client";
+import { getAuthClientLazy } from "./lib/auth-client";
 
 import { usePermissions } from "./hooks/usePermissions";
 
 import { PermissionAction } from "@checkmate-monitor/common";
 import { useNavigate } from "react-router-dom";
-import { Settings2 } from "lucide-react";
+import { Settings2, Key } from "lucide-react";
 import { DropdownMenuItem } from "@checkmate-monitor/ui";
 import { useApi } from "@checkmate-monitor/frontend-api";
 import { AuthSettingsPage } from "./components/AuthSettingsPage";
@@ -93,7 +94,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 +119,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 +131,7 @@ class BetterAuthApi implements AuthApi {
   }
 
   async signOut() {
-    await authClient.signOut({
+    await getAuthClientLazy().signOut({
       fetchOptions: {
         onSuccess: () => {
           // Redirect to frontend root after successful logout
@@ -141,7 +142,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 +157,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,
@@ -202,6 +203,10 @@ export const authPlugin = createFrontendPlugin({
       route: authRoutes.routes.resetPassword,
       element: <ResetPasswordPage />,
     },
+    {
+      route: authRoutes.routes.changePassword,
+      element: <ChangePasswordPage />,
+    },
   ],
   extensions: [
     {
@@ -232,6 +237,25 @@ export const authPlugin = createFrontendPlugin({
         );
       },
     },
+    {
+      id: "auth.user-menu.change-password",
+      slot: UserMenuItemsSlot,
+      component: () => {
+        const navigate = useNavigate();
+        // Only show for credential-authenticated users
+        // The changePassword API requires current password, so only credential users can use it
+        return (
+          <DropdownMenuItem
+            onClick={() =>
+              navigate(resolveRoute(authRoutes.routes.changePassword))
+            }
+            icon={<Key className="h-4 w-4" />}
+          >
+            Change Password
+          </DropdownMenuItem>
+        );
+      },
+    },
     {
       id: "auth.user-menu.logout",
       slot: UserMenuItemsBottomSlot,

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;
+}