@lukoweb/apitogo 0.2.31 → 0.2.34

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

@@ -1,602 +1,667 @@
-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, type ReactNode } from "react";
-import { Link, useSearchParams } from "react-router";
-import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
-import {
-  DEMO_EMAIL,
-  DEMO_PASSWORD,
-  activateDemoSession,
-  isDemoCredential,
-} from "./dev-portal-demo.js";
-import {
-  buildDevPortalOidcChallengeUrl,
-  fetchDevPortalAuthConfig,
-  isNativeAuthEnabled,
-  isPlaceholderDevPortalApiUrl,
-  postDevPortalAuth,
-  resolveDevPortalApiBaseUrl,
-  toAbsoluteReturnUrl,
-} from "./dev-portal-utils.js";
-
-type AuthPageShellProps = {
-  title: string;
-  description?: string;
-  badge?: ReactNode;
-  children: ReactNode;
-};
-
-function AuthPageShell({
-  title,
-  description,
-  badge,
-  children,
-}: AuthPageShellProps) {
-  return (
-    <div className="flex items-center justify-center bg-muted px-5 py-10">
-      <Card className="w-full max-w-md gap-0 bg-card py-8">
-        <CardHeader className="gap-0 px-8 pb-0">
-          {badge ? <div className="mb-3.5">{badge}</div> : null}
-          <CardTitle className="text-2xl font-bold tracking-tight">
-            {title}
-          </CardTitle>
-          {description ? (
-            <CardDescription className="mt-1 mb-[22px] text-sm">
-              {description}
-            </CardDescription>
-          ) : null}
-        </CardHeader>
-        <CardContent className="space-y-4 px-8">{children}</CardContent>
-      </Card>
-    </div>
-  );
-}
-
-function useReturnUrl(defaultReturnUrl = "/"): string {
-  const [search] = useSearchParams();
-  return search.get("redirect") ?? search.get("returnUrl") ?? defaultReturnUrl;
-}
-
-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>
-  );
-}
-
-function DemoLoginHint() {
-  return (
-    <div className="rounded-lg border border-dashed bg-muted/30 p-3 text-sm text-muted-foreground">
-      <p className="font-medium text-foreground">Local demo sign-in</p>
-      <p className="mt-1">
-        Use <code className="rounded bg-muted px-1 py-0.5">{DEMO_EMAIL}</code>{" "}
-        with password{" "}
-        <code className="rounded bg-muted px-1 py-0.5">{DEMO_PASSWORD}</code> to
-        explore the account area without a dev-portal backend.
-      </p>
-    </div>
-  );
-}
-
-export function DevPortalLoginPage({
-  apiBaseUrl,
-  demoMode = false,
-  defaultReturnUrl = "/",
-}: {
-  apiBaseUrl?: string;
-  demoMode?: boolean;
-  defaultReturnUrl?: string;
-}) {
-  const baseUrl = useApiBaseUrl(apiBaseUrl);
-  const returnUrl = useReturnUrl(defaultReturnUrl);
-  const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(
-    null,
-  );
-  const [configLoading, setConfigLoading] = useState(
-    Boolean(baseUrl) && !isPlaceholderDevPortalApiUrl(baseUrl),
-  );
-  const [configError, setConfigError] = useState<string | null>(null);
-  const [useDemoFallback, setUseDemoFallback] = useState(
-    demoMode && (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)),
-  );
-  const demoAuthAvailable = demoMode && useDemoFallback;
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [pending, setPending] = useState(false);
-
-  useEffect(() => {
-    if (!demoMode) {
-      setUseDemoFallback(false);
-    } else if (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)) {
-      setUseDemoFallback(true);
-    }
-  }, [baseUrl, demoMode]);
-
-  useEffect(() => {
-    if (demoAuthAvailable) {
-      setConfig({ native: { enabled: true }, email: null, providers: [] });
-      setConfigLoading(false);
-      return;
-    }
-
-    if (!baseUrl) return;
-    setConfigLoading(true);
-    setConfigError(null);
-    void fetchDevPortalAuthConfig(baseUrl)
-      .then((loaded) => {
-        setConfig(loaded);
-        setConfigLoading(false);
-      })
-      .catch(() => {
-        if (demoMode) {
-          setUseDemoFallback(true);
-          setConfig({ native: { enabled: true }, email: null, providers: [] });
-          setConfigLoading(false);
-          setConfigError(null);
-          return;
-        }
-
-        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, demoAuthAvailable, demoMode]);
-
-  const onSubmit = useCallback(
-    async (event: React.FormEvent) => {
-      event.preventDefault();
-      setPending(true);
-      setError(null);
-
-      if (demoAuthAvailable) {
-        if (!isDemoCredential(email, password)) {
-          setError("Invalid demo credentials.");
-          setPending(false);
-          return;
-        }
-
-        activateDemoSession(baseUrl);
-        window.location.assign(toAbsoluteReturnUrl(returnUrl));
-        return;
-      }
-
-      if (!baseUrl) return;
-      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, demoAuthAvailable, email, password, returnUrl],
-  );
-
-  if (!baseUrl && !demoAuthAvailable) {
-    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.">
-      {demoAuthAvailable ? <DemoLoginHint /> : null}
-      {isNativeAuthEnabled(config) || demoAuthAvailable ? (
-        <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 && !demoAuthAvailable ? (
-        <AuthError message={configError} />
-      ) : null}
-      {configLoading ? (
-        <div className="flex justify-center">
-          <Spinner />
-        </div>
-      ) : config && !demoAuthAvailable && baseUrl ? (
-        <>
-          <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,
-  defaultReturnUrl = "/",
-}: {
-  apiBaseUrl?: string;
-  defaultReturnUrl?: string;
-}) {
-  const baseUrl = useApiBaseUrl(apiBaseUrl);
-  const returnUrl = useReturnUrl(defaultReturnUrl);
-  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 your 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 your account">
-      <form className="flex flex-col gap-4" onSubmit={onSubmit}>
-        <div className="space-y-2">
-          <Label htmlFor="displayName">Full name</Label>
-          <Input
-            id="displayName"
-            placeholder="Priya Shah"
-            value={displayName}
-            onChange={(event) => setDisplayName(event.target.value)}
-            className="h-10"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input
-            id="email"
-            type="email"
-            autoComplete="email"
-            placeholder="you@company.com"
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            required
-            className="h-10"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <Input
-            id="password"
-            type="password"
-            autoComplete="new-password"
-            placeholder="••••••••"
-            value={password}
-            onChange={(event) => setPassword(event.target.value)}
-            required
-            className="h-10"
-          />
-          <p className="text-xs text-muted-foreground">At least 8 characters</p>
-        </div>
-        <AuthError message={error} />
-        {message ? (
-          <p className="text-sm text-muted-foreground">{message}</p>
-        ) : null}
-        <Button
-          type="submit"
-          size="lg"
-          className="h-12 w-full text-base"
-          disabled={pending}
-        >
-          {pending ? <Spinner /> : "Create account"}
-        </Button>
-        <p className="text-xs leading-relaxed text-muted-foreground">
-          By creating an account you agree to our Terms and Privacy Policy.
-        </p>
-        <p className="text-sm text-muted-foreground">
-          Already have an account?{" "}
-          <Link
-            className="font-semibold text-primary no-underline hover:underline"
-            to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
-          >
-            Log 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>
-  );
-}
+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, type ReactNode } from "react";
+import { Link, useSearchParams } from "react-router";
+import type { DevPortalAuthConfigResponse } from "./dev-portal-constants.js";
+import {
+  DEMO_EMAIL,
+  DEMO_PASSWORD,
+  activateDemoSession,
+  isDemoCredential,
+} from "./dev-portal-demo.js";
+import {
+  buildDevPortalOidcChallengeUrl,
+  fetchDevPortalAuthConfig,
+  isNativeAuthEnabled,
+  isPlaceholderDevPortalApiUrl,
+  postDevPortalAuth,
+  resolveDevPortalApiBaseUrl,
+  toAbsoluteReturnUrl,
+} from "./dev-portal-utils.js";
+
+type AuthPageShellProps = {
+  title: string;
+  description?: string;
+  badge?: ReactNode;
+  children: ReactNode;
+};
+
+function AuthPageShell({
+  title,
+  description,
+  badge,
+  children,
+}: AuthPageShellProps) {
+  return (
+    <div className="flex items-center justify-center bg-muted px-5 py-10">
+      <Card className="w-full max-w-md gap-0 bg-card py-8">
+        <CardHeader className="gap-0 px-8 pb-0">
+          {badge ? <div className="mb-3.5">{badge}</div> : null}
+          <CardTitle className="text-2xl font-bold tracking-tight">
+            {title}
+          </CardTitle>
+          {description ? (
+            <CardDescription className="mt-1 mb-[22px] text-sm">
+              {description}
+            </CardDescription>
+          ) : null}
+        </CardHeader>
+        <CardContent className="space-y-4 px-8">{children}</CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function useReturnUrl(defaultReturnUrl = "/"): string {
+  const [search] = useSearchParams();
+  return search.get("redirect") ?? search.get("returnUrl") ?? defaultReturnUrl;
+}
+
+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,
+  label,
+}: {
+  apiBaseUrl: string;
+  config: DevPortalAuthConfigResponse;
+  returnUrl: string;
+  /** Replaces the provider's own name on the button, for example on the sign-up page. */
+  label?: 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,
+              ),
+            );
+          }}
+        >
+          {label ?? (provider.displayName || provider.id)}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function DemoLoginHint() {
+  return (
+    <div className="rounded-lg border border-dashed bg-muted/30 p-3 text-sm text-muted-foreground">
+      <p className="font-medium text-foreground">Local demo sign-in</p>
+      <p className="mt-1">
+        Use <code className="rounded bg-muted px-1 py-0.5">{DEMO_EMAIL}</code>{" "}
+        with password{" "}
+        <code className="rounded bg-muted px-1 py-0.5">{DEMO_PASSWORD}</code> to
+        explore the account area without a dev-portal backend.
+      </p>
+    </div>
+  );
+}
+
+export function DevPortalLoginPage({
+  apiBaseUrl,
+  demoMode = false,
+  defaultReturnUrl = "/",
+}: {
+  apiBaseUrl?: string;
+  demoMode?: boolean;
+  defaultReturnUrl?: string;
+}) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const returnUrl = useReturnUrl(defaultReturnUrl);
+  const [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(
+    null,
+  );
+  const [configLoading, setConfigLoading] = useState(
+    Boolean(baseUrl) && !isPlaceholderDevPortalApiUrl(baseUrl),
+  );
+  const [configError, setConfigError] = useState<string | null>(null);
+  const [useDemoFallback, setUseDemoFallback] = useState(
+    demoMode && (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)),
+  );
+  const demoAuthAvailable = demoMode && useDemoFallback;
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    if (!demoMode) {
+      setUseDemoFallback(false);
+    } else if (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)) {
+      setUseDemoFallback(true);
+    }
+  }, [baseUrl, demoMode]);
+
+  useEffect(() => {
+    if (demoAuthAvailable) {
+      setConfig({ native: { enabled: true }, email: null, providers: [] });
+      setConfigLoading(false);
+      return;
+    }
+
+    if (!baseUrl) return;
+    setConfigLoading(true);
+    setConfigError(null);
+    void fetchDevPortalAuthConfig(baseUrl)
+      .then((loaded) => {
+        setConfig(loaded);
+        setConfigLoading(false);
+      })
+      .catch(() => {
+        if (demoMode) {
+          setUseDemoFallback(true);
+          setConfig({ native: { enabled: true }, email: null, providers: [] });
+          setConfigLoading(false);
+          setConfigError(null);
+          return;
+        }
+
+        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, demoAuthAvailable, demoMode]);
+
+  const onSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault();
+      setPending(true);
+      setError(null);
+
+      if (demoAuthAvailable) {
+        if (!isDemoCredential(email, password)) {
+          setError("Invalid demo credentials.");
+          setPending(false);
+          return;
+        }
+
+        activateDemoSession(baseUrl);
+        window.location.assign(toAbsoluteReturnUrl(returnUrl));
+        return;
+      }
+
+      if (!baseUrl) return;
+      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, demoAuthAvailable, email, password, returnUrl],
+  );
+
+  if (!baseUrl && !demoAuthAvailable) {
+    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.">
+      {demoAuthAvailable ? <DemoLoginHint /> : null}
+      {isNativeAuthEnabled(config) || demoAuthAvailable ? (
+        <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 && !demoAuthAvailable ? (
+        <AuthError message={configError} />
+      ) : null}
+      {configLoading ? (
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      ) : config && !demoAuthAvailable && baseUrl ? (
+        <>
+          <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,
+  defaultReturnUrl = "/",
+}: {
+  apiBaseUrl?: string;
+  defaultReturnUrl?: string;
+}) {
+  const baseUrl = useApiBaseUrl(apiBaseUrl);
+  const returnUrl = useReturnUrl(defaultReturnUrl);
+  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 [config, setConfig] = useState<DevPortalAuthConfigResponse | null>(
+    null,
+  );
+  const [configLoading, setConfigLoading] = useState(
+    Boolean(baseUrl) && !isPlaceholderDevPortalApiUrl(baseUrl),
+  );
+
+  // Native sign-up only exists when the backend says so. Otherwise sign-up happens at the identity provider, the same
+  // way sign-in does, and the form below would only end in "Native authentication is not enabled".
+  useEffect(() => {
+    if (!baseUrl || isPlaceholderDevPortalApiUrl(baseUrl)) {
+      setConfigLoading(false);
+      return;
+    }
+
+    setConfigLoading(true);
+    void fetchDevPortalAuthConfig(baseUrl)
+      .then((loaded) => setConfig(loaded))
+      .catch(() => setConfig(null))
+      .finally(() => setConfigLoading(false));
+  }, [baseUrl]);
+
+  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 your account"
+        description="Dev portal API is not configured."
+      >
+        <p className="text-sm text-muted-foreground">
+          Set authentication.apiBaseUrl to continue.
+        </p>
+      </AuthPageShell>
+    );
+  }
+
+  if (configLoading) {
+    return (
+      <AuthPageShell title="Create your account">
+        <div className="flex justify-center">
+          <Spinner />
+        </div>
+      </AuthPageShell>
+    );
+  }
+
+  if (config && !isNativeAuthEnabled(config)) {
+    return (
+      <AuthPageShell
+        title="Create your account"
+        description="Accounts are created on our secure sign-in provider."
+      >
+        {config.providers.length ? (
+          <OidcProviderButtons
+            apiBaseUrl={baseUrl}
+            config={config}
+            returnUrl={returnUrl}
+            label="Continue to create your account"
+          />
+        ) : (
+          <p className="text-sm text-muted-foreground text-center">
+            Sign-up is not available.
+          </p>
+        )}
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link
+            className="font-semibold text-primary no-underline hover:underline"
+            to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
+          >
+            Log in
+          </Link>
+        </p>
+      </AuthPageShell>
+    );
+  }
+
+  return (
+    <AuthPageShell title="Create your account">
+      <form className="flex flex-col gap-4" onSubmit={onSubmit}>
+        <div className="space-y-2">
+          <Label htmlFor="displayName">Full name</Label>
+          <Input
+            id="displayName"
+            placeholder="Priya Shah"
+            value={displayName}
+            onChange={(event) => setDisplayName(event.target.value)}
+            className="h-10"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            autoComplete="email"
+            placeholder="you@company.com"
+            value={email}
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            className="h-10"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <Input
+            id="password"
+            type="password"
+            autoComplete="new-password"
+            placeholder="••••••••"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            className="h-10"
+          />
+          <p className="text-xs text-muted-foreground">At least 8 characters</p>
+        </div>
+        <AuthError message={error} />
+        {message ? (
+          <p className="text-sm text-muted-foreground">{message}</p>
+        ) : null}
+        <Button
+          type="submit"
+          size="lg"
+          className="h-12 w-full text-base"
+          disabled={pending}
+        >
+          {pending ? <Spinner /> : "Create account"}
+        </Button>
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          By creating an account you agree to our Terms and Privacy Policy.
+        </p>
+        <p className="text-sm text-muted-foreground">
+          Already have an account?{" "}
+          <Link
+            className="font-semibold text-primary no-underline hover:underline"
+            to={`/login?redirect=${encodeURIComponent(returnUrl)}`}
+          >
+            Log 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>
+  );
+}