Merge pull request #446 from basementstudio/canary

v0.6.0

Author: valebearzotti

apps/website/components/action-card-grid.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+
+interface ActionCardGridProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ActionCardGrid({ children, className }: ActionCardGridProps) {
+  return (
+    <div className="not-prose">
+      <div
+        className={cn(
+          "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 my-6",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

apps/website/components/action-card.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { cn } from "@/utils/cn";
+import { Icons } from "@/components/icons";
+
+type IconKey = keyof typeof Icons;
+
+export interface ActionCardProps {
+  label: string;
+  icon: IconKey;
+  onClick?: () => void;
+  href?: string;
+}
+
+export function ActionCard({ label, icon, onClick, href }: ActionCardProps) {
+  const IconComponent = Icons[icon];
+
+  const content = (
+    <>
+      <span className="w-8 h-8 border border-dashed border-brand-neutral-400 bg-brand-neutral-600 grid place-items-center shrink-0">
+        <IconComponent className="w-4 h-4 text-brand-w1" />
+      </span>
+      <span className="text-brand-w1 font-medium text-sm relative z-10">
+        {label}
+      </span>
+      <span className="absolute -right-2 top-1/2 -translate-y-1/2 text-brand-neutral-600 pointer-events-none">
+        <IconComponent className="size-12" />
+      </span>
+    </>
+  );
+
+  const className = cn(
+    "relative flex items-center gap-3 px-3 py-2.5",
+    "border border-brand-neutral-600 bg-[rgba(5,5,5,0.85)]",
+    "hover:border-brand-neutral-400",
+    "cursor-pointer text-left overflow-hidden",
+    "no-underline hover:no-underline !decoration-transparent hover:!decoration-transparent",
+    "hover:!text-brand-w1 !opacity-100 hover:!opacity-100"
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={className}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button onClick={onClick} className={className}>
+      {content}
+    </button>
+  );
+}

apps/website/components/icons.tsx

@@ -520,4 +520,77 @@ export const Icons = {
       />
     </svg>
   ),
+  betterAuth: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M0 3.39014V20.6101H5.783V15.0601H12.217V8.93914H5.783V3.39014H0ZM12.217 8.93914L17.855 8.94014V15.0621H12.217V20.6101H24V3.39114H12.217V8.93914Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  clerk: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="64" cy="64" r="20" fill="currentColor" />
+      <path
+        d="M99.572 10.788c1.999 1.34 2.17 4.156.468 5.858L85.424 31.262c-1.32 1.32-3.37 1.53-5.033.678A35.846 35.846 0 0 0 64 28c-19.882 0-36 16.118-36 36a35.846 35.846 0 0 0 3.94 16.391c.851 1.663.643 3.712-.678 5.033L16.646 100.04c-1.702 1.702-4.519 1.531-5.858-.468C3.974 89.399 0 77.163 0 64 0 28.654 28.654 0 64 0c13.163 0 25.399 3.974 35.572 10.788Z"
+        fill="currentColor"
+        fillOpacity="0.5"
+      />
+      <path
+        d="M100.04 111.354c1.702 1.702 1.531 4.519-.468 5.858C89.399 124.026 77.164 128 64 128c-13.164 0-25.399-3.974-35.572-10.788-2-1.339-2.17-4.156-.468-5.858l14.615-14.616c1.322-1.32 3.37-1.53 5.033-.678A35.847 35.847 0 0 0 64 100a35.846 35.846 0 0 0 16.392-3.94c1.662-.852 3.712-.643 5.032.678l14.616 14.616Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+  workos: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      width="24"
+      height="21"
+      viewBox="0 0 24 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_6482_601)">
+        <path
+          d="M13.9761 0C13.5186 0.326507 13.1315 0.74324 12.8382 1.225L12.7843 1.31609L11.7677 3.09126L7.53582 10.4939L11.5441 17.4844L10.5284 19.2605C9.71354 20.6894 8.00963 21.3357 6.46369 20.8022C5.67525 20.5368 5.03597 19.9543 4.60435 19.238L4.56047 19.1634L0.351848 11.8099C0.119629 11.4138 4.45406e-06 10.9539 4.45406e-06 10.4939C-0.000793808 10.061 0.105719 9.63475 0.309848 9.254L0.351848 9.17861L4.6801 1.61426C5.23538 0.635676 6.25847 0.0269595 7.37372 0.000945946L7.44825 0H13.9761ZM15.3194 0.185405C16.8414 -0.332027 18.5119 0.28473 19.3456 1.66203L19.384 1.72711L23.6482 9.17766C23.8804 9.57297 24 10.0337 24 10.4939C24 10.925 23.8949 11.3563 23.6903 11.7342L23.6482 11.809L19.3199 19.3734C18.7646 20.3519 17.7415 20.9607 16.6263 20.9868L16.5518 20.9876H10.0239C10.4741 20.6622 10.861 20.2514 11.1576 19.7689L11.2157 19.6715L12.2323 17.8954L16.4642 10.4939L12.4559 3.49442L13.4162 1.82416C13.8477 1.07308 14.5047 0.460014 15.3194 0.185405Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6482_601">
+          <rect width="24" height="21" fill="currentColor" />
+        </clipPath>
+      </defs>
+    </svg>
+  ),
+  auth0: (props: React.SVGProps<SVGSVGElement>) => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M21.9783 7.448L19.6183 0H4.34527L2.01827 7.448C0.666275 11.76 2.04827 16.654 5.83327 19.463L12.0053 24L18.1623 19.448C21.9173 16.638 23.3443 11.76 21.9773 7.433L15.8173 12.013L18.1603 19.463L12.0033 14.866L5.84527 19.446L8.20327 12.013L2.01527 7.463L9.64528 7.418L12.0063 0L14.3623 7.404L21.9783 7.448Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
 };

apps/website/components/layout/page.tsx

@@ -35,7 +35,7 @@ export function DocsPage({ toc = [], pageActions, ...props }: DocsPageProps) {
               <p className="text-sm text-brand-white mb-2 font-medium">
                 On this page
               </p>
-              <div className="flex flex-col pb-4 border-b border-white/20">
+              <div className="flex flex-col pb-4 border-b border-white/20 max-h-2/3 overflow-y-auto sidebar-scrollbar">
                 {toc.map((item) => (
                   <TocItem key={item.url} item={item} />
                 ))}

apps/website/components/mdx-components.tsx

@@ -6,6 +6,7 @@ import { ConceptBoxes, ConceptBox } from "./concept-boxes";
 import { Callout } from "./ui/callout";
 import { Video } from "./video";
 import { McpConnect } from "./mcp-connect";
+import { OAuthPlugins } from "./oauth-plugins";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
@@ -17,6 +18,7 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
     Callout,
     Video,
     McpConnect,
+    OAuthPlugins,
     ...components,
   };
 }

apps/website/components/oauth-plugins.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { ActionCard } from "@/components/action-card";
+import { ActionCardGrid } from "@/components/action-card-grid";
+
+const OAUTH_PLUGINS = [
+  {
+    label: "Better Auth",
+    icon: "betterAuth" as const,
+    href: "/docs/integrations/better-auth",
+  },
+  {
+    label: "Clerk",
+    icon: "clerk" as const,
+    href: "/docs/integrations/clerk",
+  },
+  {
+    label: "WorkOS",
+    icon: "workos" as const,
+    href: "/docs/integrations/workos",
+  },
+  {
+    label: "Auth0",
+    icon: "auth0" as const,
+    href: "/docs/integrations/auth0",
+  },
+];
+
+export function OAuthPlugins() {
+  return (
+    <ActionCardGrid>
+      {OAUTH_PLUGINS.map((plugin) => (
+        <ActionCard
+          key={plugin.label}
+          label={plugin.label}
+          icon={plugin.icon}
+          href={plugin.href}
+        />
+      ))}
+    </ActionCardGrid>
+  );
+}

apps/website/content/docs/authentication/oauth.mdx

@@ -1,39 +1,20 @@
 ---
 title: "OAuth"
 metadataTitle: "OAuth Authentication | xmcp Documentation"
-publishedAt: "2025-07-06"
-summary: "Learn how to use OAuth authentication in your xmcp application."
-description: "Implement OAuth in your MCP server with your own providers."
+publishedAt: "2025-01-16"
+summary: "OAuth authentication plugins for xmcp servers."
+description: "Production-ready OAuth implementations with authentication plugins."
 ---
 
 <Callout variant="warning">
-  This is an experimental feature and may not work as expected.
+  The experimental `oauth` configuration has been deprecated in favor of
+  production-ready plugin implementations.
 </Callout>
 
-The OAuth provider implementation strictly implements Dynamic Client Registration.
+The built-in OAuth system has been replaced with dedicated authentication plugins that provide better DX, improved security, and more features out of the box.
 
-You can configure the OAuth provider by adding the following to your `xmcp.config.ts` file:
+Use one of the official plugins below that handle OAuth flows, token management, and session handling for you:
 
-```typescript title="xmcp.config.ts"
-import { XmcpConfig } from "xmcp";
+<OAuthPlugins />
 
-const config: XmcpConfig = {
-  experimental: {
-    oauth: {
-      baseUrl: "https://my-app.com",
-      endpoints: {
-        authorizationUrl: "https://auth-provider.com/oauth/authorize",
-        tokenUrl: "https://auth-provider.com/oauth/token",
-        registerUrl: "https://auth-provider.com/oauth/register", // mandatory
-      },
-      issuerUrl: "https://my-app.com",
-      defaultScopes: ["openid", "profile", "email"],
-      pathPrefix: "/oauth2",
-    },
-  },
-};
-
-export default config;
-```
-
-The usage of this configuration is only limited to the HTTP transport on apps scaffolded with `create-xmcp-app`, not with the adapter modes.
+Each plugin integrates directly with its respective auth provider and requires minimal configuration. Choose the one that matches your existing infrastructure or start fresh with any of them.