@lukoweb/apitogo 0.2.22 → 0.2.24

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -1,45 +1,45 @@
-import { useZudoku } from "@lukoweb/apitogo/components";
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { Navigate } from "react-router";
-import { joinUrl } from "../../util/joinUrl.js";
-import { normalizeRedirectUrl } from "../../util/url.js";
-import { OAuthAuthorizationError, type OAuthErrorType } from "../errors.js";
-
-export function CallbackHandler({
-  handleCallback,
-}: {
-  handleCallback: () => Promise<string>;
-}) {
-  const { options } = useZudoku();
-  const executeCallback = useSuspenseQuery({
-    retry: false,
-    queryKey: ["oauth-callback", window.location.search],
-    queryFn: async () => {
-      const url = new URL(window.location.href);
-
-      const errorParam = url.searchParams.get("error");
-      const errorDescription =
-        url.searchParams.get("error_description") ?? undefined;
-      const errorUri = url.searchParams.get("error_uri") ?? undefined;
-      if (errorParam) {
-        throw new OAuthAuthorizationError(
-          `OAuth error '${errorParam}': ${errorDescription}`,
-          {
-            error: errorParam as OAuthErrorType,
-            error_description: errorDescription,
-            error_uri: errorUri,
-          },
-        );
-      }
-      return joinUrl(
-        normalizeRedirectUrl(
-          await handleCallback(),
-          window.location.origin,
-          options.basePath,
-        ),
-      );
-    },
-  });
-
-  return <Navigate to={executeCallback.data} replace />;
-}
+import { useZudoku } from "@lukoweb/apitogo/components";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Navigate } from "react-router";
+import { joinUrl } from "../../util/joinUrl.js";
+import { normalizeRedirectUrl } from "../../util/url.js";
+import { OAuthAuthorizationError, type OAuthErrorType } from "../errors.js";
+
+export function CallbackHandler({
+  handleCallback,
+}: {
+  handleCallback: () => Promise<string>;
+}) {
+  const { options } = useZudoku();
+  const executeCallback = useSuspenseQuery({
+    retry: false,
+    queryKey: ["oauth-callback", window.location.search],
+    queryFn: async () => {
+      const url = new URL(window.location.href);
+
+      const errorParam = url.searchParams.get("error");
+      const errorDescription =
+        url.searchParams.get("error_description") ?? undefined;
+      const errorUri = url.searchParams.get("error_uri") ?? undefined;
+      if (errorParam) {
+        throw new OAuthAuthorizationError(
+          `OAuth error '${errorParam}': ${errorDescription}`,
+          {
+            error: errorParam as OAuthErrorType,
+            error_description: errorDescription,
+            error_uri: errorUri,
+          },
+        );
+      }
+      return joinUrl(
+        normalizeRedirectUrl(
+          await handleCallback(),
+          window.location.origin,
+          options.basePath,
+        ),
+      );
+    },
+  });
+
+  return <Navigate to={executeCallback.data} replace />;
+}

package/src/lib/authentication/components/OAuthErrorPage.tsx

@@ -1,197 +1,197 @@
-import { HomeIcon } from "lucide-react";
-import { Link } from "react-router";
-import { DeveloperHint } from "../../components/DeveloperHint.js";
-import { Heading } from "../../components/Heading.js";
-import { Typography } from "../../components/Typography.js";
-import { Button } from "../../ui/Button.js";
-import { OAuthAuthorizationError } from "../errors.js";
-import { useAuth } from "../hook.js";
-
-const errorDetailsMap: Record<string, { message: string }> = {
-  invalid_request: {
-    message:
-      "The authentication request was invalid. Please try signing in again.",
-  },
-  unauthorized_client: {
-    message:
-      "This application is not authorized to access your account. Please contact support.",
-  },
-  access_denied: {
-    message:
-      "You denied access to this application. To continue, please sign in and grant access.",
-  },
-  unsupported_response_type: {
-    message:
-      "The authentication method is not supported. Please contact support.",
-  },
-  invalid_scope: {
-    message: "The requested permissions are invalid. Please contact support.",
-  },
-  server_error: {
-    message:
-      "The authentication server encountered an error. Please try again in a few moments.",
-  },
-  temporarily_unavailable: {
-    message:
-      "The authentication service is temporarily unavailable. Please try again in a few moments.",
-  },
-  // Token errors
-  invalid_client: {
-    message: "Invalid application credentials. Please contact support.",
-  },
-  invalid_grant: {
-    message:
-      "The authentication code has expired or is invalid. Please sign in again.",
-  },
-  unsupported_grant_type: {
-    message:
-      "The authentication method is not supported. Please contact support.",
-  },
-  // Custom errors
-  invalid_state: {
-    message:
-      "Security validation failed. This may be due to a potential security attack. Please try signing in again.",
-  },
-  missing_code_verifier: {
-    message:
-      "Authentication security information is missing. Please clear your browser cache and try again.",
-  },
-  network_error: {
-    message:
-      "A network error occurred during authentication. Please check your connection and try again.",
-  },
-  token_expired: {
-    message: "Your authentication session has expired. Please sign in again.",
-  },
-  configuration_error: {
-    message:
-      "There is an issue with the authentication configuration. Please contact support.",
-  },
-  unknown_error: {
-    message:
-      "An unexpected error occurred during authentication. Please try again or contact support.",
-  },
-};
-
-export function OAuthErrorPage({ error }: { error: unknown }) {
-  const { login } = useAuth();
-
-  if (!(error instanceof OAuthAuthorizationError)) {
-    throw error;
-  }
-
-  const oauthError = error.error as
-    | { error?: string; error_description?: string; error_uri?: string }
-    | undefined;
-  const type =
-    oauthError && typeof oauthError === "object" && "error" in oauthError
-      ? String(oauthError.error)
-      : "unknown_error";
-
-  const details = errorDetailsMap[type] ?? errorDetailsMap.unknown_error;
-
-  return (
-    <div className="min-h-[400px] flex items-center justify-center p-4">
-      <div className="max-w-md w-full text-center space-y-6">
-        <div className="space-y-4 items-center">
-          <Heading level={2} className="text-2xl inline-block font-bold">
-            {titles[type] || "Authentication Error"}
-          </Heading>
-
-          <Typography className="text-gray-600 dark:text-gray-300 leading-relaxed">
-            {details?.message}
-          </Typography>
-
-          <DeveloperHint>
-            <p>
-              <strong>Error:</strong> <code>{type}</code>
-            </p>
-            {oauthError?.error_description != null && (
-              <p>
-                <strong>Description:</strong> {oauthError.error_description}
-              </p>
-            )}
-            {oauthError?.error_uri?.startsWith("http") && (
-              <p>
-                <strong>More info:</strong>{" "}
-                <a
-                  href={oauthError.error_uri}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                >
-                  {oauthError.error_uri}
-                </a>
-              </p>
-            )}
-          </DeveloperHint>
-        </div>
-
-        <div className="space-y-3 pt-4">
-          <div className="space-y-2">
-            {(type === "access_denied" ||
-              type === "invalid_grant" ||
-              type === "token_expired") && (
-              <Button
-                onClick={() => login()}
-                className="w-full capitalize"
-                variant={"default"}
-              >
-                Sign in again
-              </Button>
-            )}
-          </div>
-
-          <div className="flex gap-2">
-            <Button asChild className="flex-1" variant="outline">
-              <Link to="/">
-                <HomeIcon className="w-4 h-4 mr-2" />
-                Go Home
-              </Link>
-            </Button>
-          </div>
-        </div>
-
-        {helpMessages[type] && (
-          <Typography className="text-sm text-gray-500 dark:text-gray-400">
-            {helpMessages[type]}
-          </Typography>
-        )}
-      </div>
-    </div>
-  );
-}
-
-const titles: Record<string, string> = {
-  access_denied: "Access Denied",
-  invalid_request: "Invalid Request",
-  unauthorized_client: "Unauthorized Application",
-  unsupported_response_type: "Unsupported Method",
-  invalid_scope: "Invalid Permissions",
-  server_error: "Server Error",
-  temporarily_unavailable: "Service Unavailable",
-  invalid_client: "Invalid Credentials",
-  invalid_grant: "Authentication Expired",
-  unsupported_grant_type: "Unsupported Authentication",
-  invalid_state: "Security Check Failed",
-  missing_code_verifier: "Security Information Missing",
-  network_error: "Network Error",
-  token_expired: "Session Expired",
-  configuration_error: "Configuration Error",
-  unknown_error: "Authentication Failed",
-};
-
-const helpMessages: Record<string, string> = {
-  access_denied:
-    "If you changed your mind, you can try signing in again to grant access.",
-  invalid_state:
-    "This error can occur if you have multiple tabs open or if your session was compromised.",
-  missing_code_verifier:
-    "Try clearing your browser's cache and cookies for this site.",
-  network_error:
-    "Check your internet connection and ensure you can access other websites.",
-  server_error:
-    "The issue is on our end. Our team has been notified and is working to fix it.",
-  temporarily_unavailable:
-    "This is usually temporary. Try again in a few minutes.",
-};
+import { HomeIcon } from "lucide-react";
+import { Link } from "react-router";
+import { DeveloperHint } from "../../components/DeveloperHint.js";
+import { Heading } from "../../components/Heading.js";
+import { Typography } from "../../components/Typography.js";
+import { Button } from "../../ui/Button.js";
+import { OAuthAuthorizationError } from "../errors.js";
+import { useAuth } from "../hook.js";
+
+const errorDetailsMap: Record<string, { message: string }> = {
+  invalid_request: {
+    message:
+      "The authentication request was invalid. Please try signing in again.",
+  },
+  unauthorized_client: {
+    message:
+      "This application is not authorized to access your account. Please contact support.",
+  },
+  access_denied: {
+    message:
+      "You denied access to this application. To continue, please sign in and grant access.",
+  },
+  unsupported_response_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  invalid_scope: {
+    message: "The requested permissions are invalid. Please contact support.",
+  },
+  server_error: {
+    message:
+      "The authentication server encountered an error. Please try again in a few moments.",
+  },
+  temporarily_unavailable: {
+    message:
+      "The authentication service is temporarily unavailable. Please try again in a few moments.",
+  },
+  // Token errors
+  invalid_client: {
+    message: "Invalid application credentials. Please contact support.",
+  },
+  invalid_grant: {
+    message:
+      "The authentication code has expired or is invalid. Please sign in again.",
+  },
+  unsupported_grant_type: {
+    message:
+      "The authentication method is not supported. Please contact support.",
+  },
+  // Custom errors
+  invalid_state: {
+    message:
+      "Security validation failed. This may be due to a potential security attack. Please try signing in again.",
+  },
+  missing_code_verifier: {
+    message:
+      "Authentication security information is missing. Please clear your browser cache and try again.",
+  },
+  network_error: {
+    message:
+      "A network error occurred during authentication. Please check your connection and try again.",
+  },
+  token_expired: {
+    message: "Your authentication session has expired. Please sign in again.",
+  },
+  configuration_error: {
+    message:
+      "There is an issue with the authentication configuration. Please contact support.",
+  },
+  unknown_error: {
+    message:
+      "An unexpected error occurred during authentication. Please try again or contact support.",
+  },
+};
+
+export function OAuthErrorPage({ error }: { error: unknown }) {
+  const { login } = useAuth();
+
+  if (!(error instanceof OAuthAuthorizationError)) {
+    throw error;
+  }
+
+  const oauthError = error.error as
+    | { error?: string; error_description?: string; error_uri?: string }
+    | undefined;
+  const type =
+    oauthError && typeof oauthError === "object" && "error" in oauthError
+      ? String(oauthError.error)
+      : "unknown_error";
+
+  const details = errorDetailsMap[type] ?? errorDetailsMap.unknown_error;
+
+  return (
+    <div className="min-h-[400px] flex items-center justify-center p-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="space-y-4 items-center">
+          <Heading level={2} className="text-2xl inline-block font-bold">
+            {titles[type] || "Authentication Error"}
+          </Heading>
+
+          <Typography className="text-gray-600 dark:text-gray-300 leading-relaxed">
+            {details?.message}
+          </Typography>
+
+          <DeveloperHint>
+            <p>
+              <strong>Error:</strong> <code>{type}</code>
+            </p>
+            {oauthError?.error_description != null && (
+              <p>
+                <strong>Description:</strong> {oauthError.error_description}
+              </p>
+            )}
+            {oauthError?.error_uri?.startsWith("http") && (
+              <p>
+                <strong>More info:</strong>{" "}
+                <a
+                  href={oauthError.error_uri}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
+                  {oauthError.error_uri}
+                </a>
+              </p>
+            )}
+          </DeveloperHint>
+        </div>
+
+        <div className="space-y-3 pt-4">
+          <div className="space-y-2">
+            {(type === "access_denied" ||
+              type === "invalid_grant" ||
+              type === "token_expired") && (
+              <Button
+                onClick={() => login()}
+                className="w-full capitalize"
+                variant={"default"}
+              >
+                Sign in again
+              </Button>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button asChild className="flex-1" variant="outline">
+              <Link to="/">
+                <HomeIcon className="w-4 h-4 mr-2" />
+                Go Home
+              </Link>
+            </Button>
+          </div>
+        </div>
+
+        {helpMessages[type] && (
+          <Typography className="text-sm text-gray-500 dark:text-gray-400">
+            {helpMessages[type]}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const titles: Record<string, string> = {
+  access_denied: "Access Denied",
+  invalid_request: "Invalid Request",
+  unauthorized_client: "Unauthorized Application",
+  unsupported_response_type: "Unsupported Method",
+  invalid_scope: "Invalid Permissions",
+  server_error: "Server Error",
+  temporarily_unavailable: "Service Unavailable",
+  invalid_client: "Invalid Credentials",
+  invalid_grant: "Authentication Expired",
+  unsupported_grant_type: "Unsupported Authentication",
+  invalid_state: "Security Check Failed",
+  missing_code_verifier: "Security Information Missing",
+  network_error: "Network Error",
+  token_expired: "Session Expired",
+  configuration_error: "Configuration Error",
+  unknown_error: "Authentication Failed",
+};
+
+const helpMessages: Record<string, string> = {
+  access_denied:
+    "If you changed your mind, you can try signing in again to grant access.",
+  invalid_state:
+    "This error can occur if you have multiple tabs open or if your session was compromised.",
+  missing_code_verifier:
+    "Try clearing your browser's cache and cookies for this site.",
+  network_error:
+    "Check your internet connection and ensure you can access other websites.",
+  server_error:
+    "The issue is on our end. Our team has been notified and is working to fix it.",
+  temporarily_unavailable:
+    "This is usually temporary. Try again in a few minutes.",
+};

package/src/lib/authentication/components/ProductionUnlockPage.tsx

@@ -1,26 +1,26 @@
-import { Button } from "@lukoweb/apitogo/ui/Button.js";
-import { Link } from "react-router";
-import { Layout } from "../../components/Layout.js";
-
-export const ProductionUnlockPage = () => (
-  <Layout>
-    <div className="mx-auto flex min-h-[50vh] max-w-lg flex-col items-center justify-center gap-4 px-4 text-center">
-      <h1 className="text-2xl font-semibold tracking-tight">
-        Account sign-in is temporarily unavailable
-      </h1>
-      <p className="text-muted-foreground">
-        We couldn’t reach the developer portal API. Documentation stays
-        available; try again shortly, or contact the site owner if this
-        continues.
-      </p>
-      <div className="flex flex-wrap items-center justify-center gap-3">
-        <Button asChild variant="default">
-          <Link to="/introduction">Browse documentation</Link>
-        </Button>
-        <Button asChild variant="outline">
-          <Link to="/">Back to home</Link>
-        </Button>
-      </div>
-    </div>
-  </Layout>
-);
+import { Button } from "@lukoweb/apitogo/ui/Button.js";
+import { Link } from "react-router";
+import { Layout } from "../../components/Layout.js";
+
+export const ProductionUnlockPage = () => (
+  <Layout>
+    <div className="mx-auto flex min-h-[50vh] max-w-lg flex-col items-center justify-center gap-4 px-4 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">
+        Account sign-in is temporarily unavailable
+      </h1>
+      <p className="text-muted-foreground">
+        We couldn’t reach the developer portal API. Documentation stays
+        available; try again shortly, or contact the site owner if this
+        continues.
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-3">
+        <Button asChild variant="default">
+          <Link to="/introduction">Browse documentation</Link>
+        </Button>
+        <Button asChild variant="outline">
+          <Link to="/">Back to home</Link>
+        </Button>
+      </div>
+    </div>
+  </Layout>
+);

package/src/lib/authentication/components/SignIn.tsx

@@ -1,46 +1,46 @@
-import { Spinner } from "@lukoweb/apitogo/components";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@lukoweb/apitogo/ui/Card.js";
-import { useEffect } from "react";
-import { useSearchParams } from "react-router";
-import { useLatest } from "../../util/useLatest.js";
-import { useAuth } from "../hook.js";
-
-export const SignIn = () => {
-  const auth = useAuth();
-  const [search] = useSearchParams();
-  const redirectTo = search.get("redirect") ?? undefined;
-
-  const login = useLatest(auth.login);
-
-  useEffect(() => {
-    void login.current({
-      redirectTo: redirectTo ?? "/",
-      replace: true,
-    });
-  }, [login, redirectTo]);
-
-  return (
-    <div className="flex items-center justify-center mt-8">
-      <Card className="max-w-md w-full">
-        <CardHeader>
-          <CardTitle className="text-lg">Sign in</CardTitle>
-          <CardDescription>
-            You're being redirected to our secure login provider to complete
-            your sign-in process.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center text-sm font-medium gap-2">
-            <Spinner /> Redirecting...
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
+import { Spinner } from "@lukoweb/apitogo/components";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@lukoweb/apitogo/ui/Card.js";
+import { useEffect } from "react";
+import { useSearchParams } from "react-router";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
+
+export const SignIn = () => {
+  const auth = useAuth();
+  const [search] = useSearchParams();
+  const redirectTo = search.get("redirect") ?? undefined;
+
+  const login = useLatest(auth.login);
+
+  useEffect(() => {
+    void login.current({
+      redirectTo: redirectTo ?? "/",
+      replace: true,
+    });
+  }, [login, redirectTo]);
+
+  return (
+    <div className="flex items-center justify-center mt-8">
+      <Card className="max-w-md w-full">
+        <CardHeader>
+          <CardTitle className="text-lg">Sign in</CardTitle>
+          <CardDescription>
+            You're being redirected to our secure login provider to complete
+            your sign-in process.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center text-sm font-medium gap-2">
+            <Spinner /> Redirecting...
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/lib/authentication/components/SignOut.tsx

@@ -1,15 +1,15 @@
-import { useEffect } from "react";
-import { useLatest } from "../../util/useLatest.js";
-import { useAuth } from "../hook.js";
-
-export const SignOut = () => {
-  const auth = useAuth();
-
-  const logout = useLatest(auth.logout);
-
-  useEffect(() => {
-    void logout.current();
-  }, [logout]);
-
-  return null;
-};
+import { useEffect } from "react";
+import { useLatest } from "../../util/useLatest.js";
+import { useAuth } from "../hook.js";
+
+export const SignOut = () => {
+  const auth = useAuth();
+
+  const logout = useLatest(auth.logout);
+
+  useEffect(() => {
+    void logout.current();
+  }, [logout]);
+
+  return null;
+};