@lukoweb/apitogo 0.1.53 → 0.1.55

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

@@ -0,0 +1,499 @@
+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,15 @@ 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 +75,127 @@ 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,
@@ -137,7 +262,7 @@ export function mapEndUserMeToProfile(
       raw.emailVerified,
       raw.EmailVerified,
       raw.email_verified,
-    ) ?? (email != null ? true : false);
+    ) ?? email != null;
 
   return {
     sub: me.userId,