@lukoweb/apitogo 0.1.53 → 0.1.54

package/src/lib/authentication/providers/dev-portal-auth-pages.tsx

@@ -0,0 +1,439 @@
+import { Spinner } from "@lukoweb/apitogo/components";
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { Input } from "@lukoweb/apitogo/ui/Input.js";
+import { Label } from "@lukoweb/apitogo/ui/Label.js";
+import { useCallback, useEffect, useState } from "react";
+import { Link, useSearchParams } from "react-router";
+import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
+import {
+  buildDevPortalOidcChallengeUrl,
+  fetchDevPortalAuthConfig,
+  isNativeAuthEnabled,
+  postDevPortalAuth,
+  resolveDevPortalApiBaseUrl,
+  toAbsoluteReturnUrl,
+} from "./dev-portal-utils.js";
+
+type AuthPageShellProps = {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+};
+
+function AuthPageShell({ title, description, children }: AuthPageShellProps) {
+  return (
+    <div className="flex items-center justify-center mt-8 px-4">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">{title}</CardTitle>
+          {description ? <CardDescription>{description}</CardDescription> : null}
+        </CardHeader>
+        <CardContent className="space-y-4">{children}</CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function useReturnUrl(): string {
+  const [search] = useSearchParams();
+  return search.get("redirect") ?? search.get("returnUrl") ?? "/";
+}
+
+function useApiBaseUrl(apiBaseUrl?: string): string | undefined {
+  return resolveDevPortalApiBaseUrl({ apiBaseUrl });
+}
+
+function AuthError({ message }: { message: string | null }) {
+  if (!message) return null;
+  return <p className="text-sm text-destructive">{message}</p>;
+}
+
+function OidcProviderButtons({
+  apiBaseUrl,
+  config,
+  returnUrl,
+}: {
+  apiBaseUrl: string;
+  config: DevPortalAuthConfigResponse;
+  returnUrl: string;
+}) {
+  if (!config.providers.length) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-2">
+      {isNativeAuthEnabled(config) ? (
+        <p className="text-sm text-muted-foreground text-center">or continue with</p>
+      ) : null}
+      {config.providers.map((provider) => (
+        <Button
+          key={provider.id}
+          type="button"
+          variant="outline"
+          className="w-full"
+          onClick={() => {
+            window.location.assign(
+              buildDevPortalOidcChallengeUrl(apiBaseUrl, provider.id, returnUrl),
+            );
+          }}
+        >
+          {provider.displayName || provider.id}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export function DevPortalLoginPage({
+  apiBaseUrl,
+}: {
+  apiBaseUrl?: string;
+}) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const returnUrl = useReturnUrl();
+  const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(null);
+  const [configLoading, setConfigLoading] = useState(true);
+  const [configError, setConfigError] = useState<string | null>(null);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    if (!baseUrl) return;
+    setConfigLoading(true);
+    setConfigError(null);
+    void fetchDevPortalAuthConfig(baseUrl)
+      .then((loaded) => {
+        setConfig(loaded);
+        setConfigLoading(false);
+      })
+      .catch(() => {
+        setConfig(null);
+        setConfigLoading(false);
+        setConfigError(
+          `Could not reach the dev portal API at ${baseUrl}. If you use a local HTTPS certificate, open ${baseUrl}/api/v1/auth/status in your browser first to trust it.`,
+        );
+      });
+  }, [baseUrl]);
+
+  const onSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      if (!baseUrl) return;
+      setPending(true);
+      setError(null);
+      try {
+        await postDevPortalAuth(baseUrl, "/api/v1/auth/login", { email, password });
+        window.location.assign(toAbsoluteReturnUrl(returnUrl));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Login failed.");
+      } finally {
+        setPending(false);
+      }
+    },
+    [baseUrl, email, password, returnUrl],
+  );
+
+  if (!baseUrl) {
+    return (
+      <AuthPageShell title="Sign in" description="Dev portal API is not configured.">
+        <p className="text-sm text-muted-foreground">Set authentication.apiBaseUrl to continue.</p>
+      </AuthPageShell>
+    );
+  }
+
+  return (
+    <AuthPageShell title="Sign in" description="Access your developer account.">
+      {isNativeAuthEnabled(config) ? (
+        <form className="space-y-4" onSubmit={onSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              required
+            />
+          </div>
+          <AuthError message={error} />
+          <Button type="submit" className="w-full" disabled={pending}>
+            {pending ? <Spinner /> : "Sign in"}
+          </Button>
+          <div className="flex justify-between text-sm">
+            <Link className="text-primary hover:underline" to="/forgot-password">
+              Forgot password?
+            </Link>
+            <Link className="text-primary hover:underline" to={`/register?redirect=${encodeURIComponent(returnUrl)}`}>
+              Create account
+            </Link>
+          </div>
+        </form>
+      ) : null}
+      {configError ? <AuthError message={configError} /> : null}
+      {configLoading ? (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      ) : config ? (
+        <>
+          <OidcProviderButtons apiBaseUrl={baseUrl} config={config} returnUrl={returnUrl} />
+          {!isNativeAuthEnabled(config) && !config.providers.length ? (
+            <p className="text-sm text-muted-foreground text-center">
+              No sign-in methods are configured.
+            </p>
+          ) : null}
+        </>
+      ) : null}
+    </AuthPageShell>
+  );
+}
+
+export function DevPortalRegisterPage({
+  apiBaseUrl,
+}: {
+  apiBaseUrl?: string;
+}) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const returnUrl = useReturnUrl();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const onSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      if (!baseUrl) return;
+      setPending(true);
+      setError(null);
+      setMessage(null);
+      try {
+        const response = await postDevPortalAuth<{ message: string }>(
+          baseUrl,
+          "/api/v1/auth/register",
+          { email, password, displayName: displayName || null },
+        );
+        setMessage(response.message);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Registration failed.");
+      } finally {
+        setPending(false);
+      }
+    },
+    [baseUrl, displayName, email, password],
+  );
+
+  if (!baseUrl) {
+    return (
+      <AuthPageShell title="Create account" description="Dev portal API is not configured.">
+        <p className="text-sm text-muted-foreground">Set authentication.apiBaseUrl to continue.</p>
+      </AuthPageShell>
+    );
+  }
+
+  return (
+    <AuthPageShell title="Create account" description="Register for API access.">
+      <form className="space-y-4" onSubmit={onSubmit}>
+        <div className="space-y-2">
+          <Label htmlFor="displayName">Name</Label>
+          <Input
+            id="displayName"
+            value={displayName}
+            onChange={(event) => setDisplayName(event.target.value)}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            autoComplete="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+          />
+        </div>
+        <AuthError message={error} />
+        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        <Button type="submit" className="w-full" disabled={pending}>
+          {pending ? <Spinner /> : "Create account"}
+        </Button>
+        <p className="text-sm text-center">
+          <Link className="text-primary hover:underline" to={`/login?redirect=${encodeURIComponent(returnUrl)}`}>
+            Back to sign in
+          </Link>
+        </p>
+      </form>
+    </AuthPageShell>
+  );
+}
+
+export function DevPortalVerifyEmailPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const [search] = useSearchParams();
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const token = search.get("token");
+    if (!baseUrl || !token) return;
+    void postDevPortalAuth<{ message: string }>(baseUrl, "/api/v1/auth/verify-email", {
+      token,
+    })
+      .then((response) => setMessage(response.message))
+      .catch((err) =>
+        setError(err instanceof Error ? err.message : "Verification failed."),
+      );
+  }, [baseUrl, search]);
+
+  return (
+    <AuthPageShell title="Verify email">
+      <AuthError message={error} />
+      {message ? <p className="text-sm text-muted-foreground">{message}</p> : <Spinner />}
+      <Link className="text-sm text-primary hover:underline" to="/login">
+        Sign in
+      </Link>
+    </AuthPageShell>
+  );
+}
+
+export function DevPortalForgotPasswordPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const onSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      if (!baseUrl) return;
+      setPending(true);
+      setError(null);
+      try {
+        const response = await postDevPortalAuth<{ message: string }>(
+          baseUrl,
+          "/api/v1/auth/forgot-password",
+          { email },
+        );
+        setMessage(response.message);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Request failed.");
+      } finally {
+        setPending(false);
+      }
+    },
+    [baseUrl, email],
+  );
+
+  return (
+    <AuthPageShell title="Reset password" description="We'll email you a reset link.">
+      <form className="space-y-4" onSubmit={onSubmit}>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+          />
+        </div>
+        <AuthError message={error} />
+        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        <Button type="submit" className="w-full" disabled={pending}>
+          {pending ? <Spinner /> : "Send reset link"}
+        </Button>
+      </form>
+    </AuthPageShell>
+  );
+}
+
+export function DevPortalResetPasswordPage({ apiBaseUrl }: { apiBaseUrl?: string }) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const [search] = useSearchParams();
+  const [password, setPassword] = useState("");
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  const onSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      const token = search.get("token");
+      if (!baseUrl || !token) return;
+      setPending(true);
+      setError(null);
+      try {
+        const response = await postDevPortalAuth<{ message: string }>(
+          baseUrl,
+          "/api/v1/auth/reset-password",
+          { token, newPassword: password },
+        );
+        setMessage(response.message);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Reset failed.");
+      } finally {
+        setPending(false);
+      }
+    },
+    [baseUrl, password, search],
+  );
+
+  return (
+    <AuthPageShell title="Choose a new password">
+      <form className="space-y-4" onSubmit={onSubmit}>
+        <div className="space-y-2">
+          <Label htmlFor="password">New password</Label>
+          <Input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+          />
+        </div>
+        <AuthError message={error} />
+        {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
+        <Button type="submit" className="w-full" disabled={pending}>
+          {pending ? <Spinner /> : "Update password"}
+        </Button>
+      </form>
+    </AuthPageShell>
+  );
+}

package/src/lib/authentication/providers/dev-portal-constants.ts

@@ -19,5 +19,19 @@ export type EndUserMeResponse = {
 
 export type DevPortalAuthStatusResponse = {
   available: boolean;
-  oidcConfigured: boolean;
+  nativeEnabled?: boolean;
+  oidcConfigured?: boolean;
+  providerCount?: number;
+};
+
+export type DevPortalAuthConfigResponse = {
+  native: { enabled: boolean };
+  email?: { provider: string; from: string } | null;
+  providers: Array<{
+    id: string;
+    displayName: string;
+    authority: string;
+    clientId: string;
+    scopes: string[];
+  }>;
 };

package/src/lib/authentication/providers/dev-portal-utils.ts

@@ -53,11 +53,12 @@ export function toAbsoluteReturnUrl(pathOrUrl: string): string {
   return new URL(pathOrUrl, window.location.origin).href;
 }
 
-export function buildDevPortalLoginUrl(
+export function buildDevPortalOidcChallengeUrl(
   apiBaseUrl: string,
+  providerId: string,
   returnUrl: string,
 ): string {
-  const url = new URL("/api/v1/auth/login", apiBaseUrl);
+  const url = new URL(`/api/v1/auth/oidc/${encodeURIComponent(providerId)}/challenge`, apiBaseUrl);
   url.searchParams.set("returnUrl", toAbsoluteReturnUrl(returnUrl));
   return url.toString();
 }
@@ -71,6 +72,120 @@ export function buildDevPortalLogoutUrl(
   return url.toString();
 }
 
+export function normalizeDevPortalAuthConfig(
+  raw: unknown,
+): import("./dev-portal-constants.js").DevPortalAuthConfigResponse {
+  const data = (raw ?? {}) as Record<string, unknown>;
+  const nestedNative = data.native as { enabled?: boolean } | undefined;
+  const nativeEnabled =
+    typeof nestedNative?.enabled === "boolean"
+      ? nestedNative.enabled
+      : typeof data.nativeEnabled === "boolean"
+        ? data.nativeEnabled
+        : false;
+
+  const emailRaw = data.email;
+  const email =
+    emailRaw &&
+    typeof emailRaw === "object" &&
+    typeof (emailRaw as { provider?: unknown }).provider === "string" &&
+    typeof (emailRaw as { from?: unknown }).from === "string"
+      ? {
+          provider: (emailRaw as { provider: string }).provider,
+          from: (emailRaw as { from: string }).from,
+        }
+      : null;
+
+  const providers = Array.isArray(data.providers)
+    ? data.providers
+        .filter(
+          (provider): provider is Record<string, unknown> =>
+            provider != null && typeof provider === "object",
+        )
+        .map((provider) => ({
+          id: String(provider.id ?? ""),
+          displayName: String(provider.displayName ?? provider.id ?? ""),
+          authority: String(provider.authority ?? ""),
+          clientId: String(provider.clientId ?? ""),
+          scopes: Array.isArray(provider.scopes)
+            ? provider.scopes.map((scope) => String(scope))
+            : [],
+        }))
+        .filter((provider) => provider.id.length > 0)
+    : [];
+
+  return {
+    native: { enabled: nativeEnabled },
+    email,
+    providers,
+  };
+}
+
+export function isNativeAuthEnabled(
+  config: import("./dev-portal-constants.js").DevPortalAuthConfigResponse | null | undefined,
+): boolean {
+  if (!config) {
+    return false;
+  }
+
+  const raw = config as import("./dev-portal-constants.js").DevPortalAuthConfigResponse & {
+    nativeEnabled?: boolean;
+  };
+
+  return raw.native?.enabled === true || raw.nativeEnabled === true;
+}
+
+export async function fetchDevPortalAuthConfig(
+  apiBaseUrl: string,
+  fetchImpl: typeof fetch = fetch,
+): Promise<import("./dev-portal-constants.js").DevPortalAuthConfigResponse> {
+  const response = await fetchImpl(`${apiBaseUrl}/api/v1/auth/config`, {
+    method: "GET",
+    headers: { Accept: "application/json" },
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    throw new Error("Failed to load auth configuration.");
+  }
+
+  return normalizeDevPortalAuthConfig(await response.json());
+}
+
+export async function postDevPortalAuth<T>(
+  apiBaseUrl: string,
+  path: string,
+  body: unknown,
+  fetchImpl: typeof fetch = fetch,
+): Promise<T> {
+  const response = await fetchImpl(`${apiBaseUrl}${path}`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify(body),
+  });
+
+  if (response.status === 204) {
+    return {} as T;
+  }
+
+  if (!response.ok) {
+    let detail = "Request failed.";
+    try {
+      const problem = (await response.json()) as { detail?: string; title?: string };
+      detail = problem.detail ?? problem.title ?? detail;
+    } catch {
+      // ignore parse errors
+    }
+    throw new Error(detail);
+  }
+
+  return (await response.json()) as T;
+}
+
 export async function probeDevPortalBackend(
   apiBaseUrl: string,
   fetchImpl: typeof fetch = fetch,

package/src/lib/authentication/providers/dev-portal.tsx

@@ -17,12 +17,20 @@ import type {
   EndUserMeResponse,
 } from "./dev-portal-constants.js";
 import {
-  buildDevPortalLoginUrl,
+  DevPortalForgotPasswordPage,
+  DevPortalLoginPage,
+  DevPortalRegisterPage,
+  DevPortalResetPasswordPage,
+  DevPortalVerifyEmailPage,
+} from "./dev-portal-auth-pages.js";
+import {
   buildDevPortalLogoutUrl,
+  isNativeAuthEnabled,
   isPlaceholderDevPortalApiUrl,
   mapEndUserMeToProfile,
   probeDevPortalBackend,
   resolveDevPortalApiBaseUrl,
+  toAbsoluteReturnUrl,
 } from "./dev-portal-utils.js";
 
 export type DevPortalProviderData = {
@@ -49,6 +57,8 @@ export class DevPortalAuthenticationProvider
   private refreshGeneration = 0;
   private refreshInFlight: Promise<boolean> | null = null;
 
+  private authConfigNativeEnabled: boolean | null = null;
+
   constructor({
     apiBaseUrl,
     redirectToAfterSignIn,
@@ -62,6 +72,18 @@ export class DevPortalAuthenticationProvider
     this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
+  getRoutes() {
+    const pageProps = { apiBaseUrl: this.apiBaseUrl };
+    return [
+      ...super.getRoutes(),
+      { path: "/login", element: <DevPortalLoginPage {...pageProps} /> },
+      { path: "/register", element: <DevPortalRegisterPage {...pageProps} /> },
+      { path: "/verify-email", element: <DevPortalVerifyEmailPage {...pageProps} /> },
+      { path: "/forgot-password", element: <DevPortalForgotPasswordPage {...pageProps} /> },
+      { path: "/reset-password", element: <DevPortalResetPasswordPage {...pageProps} /> },
+    ];
+  }
+
   async initialize(_context: ZudokuContext): Promise<void> {
     // Node SSR cannot reach local HTTPS backends with self-signed certs.
     if (typeof window === "undefined") {
@@ -70,6 +92,15 @@ export class DevPortalAuthenticationProvider
 
     await waitForAuthStateHydration();
     await this.syncBackendAvailability();
+    if (this.backendAvailable && this.apiBaseUrl) {
+      try {
+        const { fetchDevPortalAuthConfig } = await import("./dev-portal-utils.js");
+        const config = await fetchDevPortalAuthConfig(this.apiBaseUrl);
+        this.authConfigNativeEnabled = isNativeAuthEnabled(config);
+      } catch {
+        this.authConfigNativeEnabled = null;
+      }
+    }
     if (!this.backendAvailable) {
       this.setPreviewState();
       return;
@@ -235,20 +266,24 @@ export class DevPortalAuthenticationProvider
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
-    const apiBaseUrl = this.ensureConfiguredBackend();
+    this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignIn ?? window.location.href;
-    window.location.assign(buildDevPortalLoginUrl(apiBaseUrl, target));
+    const url = new URL("/login", window.location.origin);
+    url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+    window.location.assign(url.toString());
   }
 
   async signUp(
     _: AuthActionContext,
     { redirectTo }: AuthActionOptions = {},
   ): Promise<void> {
-    const apiBaseUrl = this.ensureConfiguredBackend();
+    this.ensureConfiguredBackend();
     const target =
       redirectTo ?? this.redirectToAfterSignUp ?? window.location.href;
-    window.location.assign(buildDevPortalLoginUrl(apiBaseUrl, target));
+    const url = new URL("/register", window.location.origin);
+    url.searchParams.set("redirect", toAbsoluteReturnUrl(target));
+    window.location.assign(url.toString());
   }
 
   async signOut(_: AuthActionContext): Promise<void> {
@@ -259,7 +294,7 @@ export class DevPortalAuthenticationProvider
   }
 
   hasDistinctSignUpFlow(): boolean {
-    return false;
+    return this.authConfigNativeEnabled !== false;
   }
 
   async signRequest(request: Request): Promise<Request> {