fix: plugin inference using withCloudflare (#5)

Author: zpg6

examples/opennextjs/src/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 import { initAuth } from "@/auth";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { SessionWithGeolocation } from "better-auth-cloudflare";
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { headers } from "next/headers";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import SignOutButton from "./SignOutButton"; // Import the client component
 
@@ -14,8 +14,11 @@ export default async function DashboardPage() {
         redirect("/"); // Redirect to home if no session
     }
 
-    // Access Cloudflare data from session.session?.cloudflare or session.session?.geo
-    const cloudflareGeolocationData = session.session as SessionWithGeolocation;
+    // Get geolocation data from our plugin's endpoint
+    const cloudflareGeolocationData = await authInstance.api.getGeolocation({ headers: await headers() });
+
+    // Access another plugin's endpoint to demonstrate plugin type inference is still intact
+    const openAPISpec = await authInstance.api.generateOpenAPISchema();
 
     return (
         <div className="flex flex-col items-center justify-center min-h-screen p-8 font-[family-name:var(--font-geist-sans)]">
@@ -39,40 +42,50 @@ export default async function DashboardPage() {
                             <strong>User ID:</strong> {session.user.id}
                         </p>
                     )}
-                    {cloudflareGeolocationData && (
+                    {cloudflareGeolocationData && "error" in cloudflareGeolocationData && (
+                        <p className="text-md">
+                            <strong>Error:</strong> {cloudflareGeolocationData.error}
+                        </p>
+                    )}
+                    {cloudflareGeolocationData && !("error" in cloudflareGeolocationData) && (
                         <>
                             <p className="text-md">
-                                <strong>Timezone:</strong> {cloudflareGeolocationData.timezone}
+                                <strong>Timezone:</strong> {cloudflareGeolocationData.timezone || "Unknown"}
                             </p>
                             <p className="text-md">
-                                <strong>City:</strong> {cloudflareGeolocationData.city}
+                                <strong>City:</strong> {cloudflareGeolocationData.city || "Unknown"}
                             </p>
                             <p className="text-md">
-                                <strong>Country:</strong> {cloudflareGeolocationData.country}
+                                <strong>Country:</strong> {cloudflareGeolocationData.country || "Unknown"}
                             </p>
                             <p className="text-md">
-                                <strong>Region:</strong> {cloudflareGeolocationData.region}
+                                <strong>Region:</strong> {cloudflareGeolocationData.region || "Unknown"}
                             </p>
                             <p className="text-md">
-                                <strong>Region Code:</strong> {cloudflareGeolocationData.regionCode}
+                                <strong>Region Code:</strong> {cloudflareGeolocationData.regionCode || "Unknown"}
                             </p>
                             <p className="text-md">
-                                <strong>Data Center:</strong> {cloudflareGeolocationData.colo}
+                                <strong>Data Center:</strong> {cloudflareGeolocationData.colo || "Unknown"}
                             </p>
                             {cloudflareGeolocationData.latitude && (
                                 <p className="text-md">
-                                    <strong>Latitude:</strong> {cloudflareGeolocationData.latitude}
+                                    <strong>Latitude:</strong> {cloudflareGeolocationData.latitude || "Unknown"}
                                 </p>
                             )}
                             {cloudflareGeolocationData.longitude && (
                                 <p className="text-md">
-                                    <strong>Longitude:</strong> {cloudflareGeolocationData.longitude}
+                                    <strong>Longitude:</strong> {cloudflareGeolocationData.longitude || "Unknown"}
                                 </p>
                             )}
                         </>
                     )}
                     <SignOutButton /> {/* Use the client component for sign out */}
                 </CardContent>
+                <CardFooter>
+                    <Link href="/api/auth/reference#tag/cloudflare/get/cloudflare/geolocation" className="underline">
+                        View OpenAPI v{openAPISpec.openapi} Schema for Cloudflare Geolocation
+                    </Link>
+                </CardFooter>
             </Card>
             <footer className="absolute bottom-0 w-full text-center text-sm text-gray-500 py-4">
                 Powered by{" "}

examples/opennextjs/src/auth/index.ts

@@ -2,6 +2,7 @@ import { KVNamespace } from "@cloudflare/workers-types";
 import { betterAuth } from "better-auth";
 import { withCloudflare } from "better-auth-cloudflare";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { openAPI } from "better-auth/plugins";
 import { getDb } from "../db";
 
 // Define an asynchronous function to build your auth configuration
@@ -38,6 +39,7 @@ async function authBuilder() {
                     enabled: true,
                     // ... other rate limiting options
                 },
+                plugins: [openAPI()],
                 // ... other Better Auth options
             }
         )

src/index.ts

@@ -2,7 +2,7 @@ import type { KVNamespace } from "@cloudflare/workers-types";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { type BetterAuthOptions, type BetterAuthPlugin, type SecondaryStorage, type Session } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
-import { createAuthEndpoint } from "better-auth/api";
+import { createAuthEndpoint, getSessionFromCtx } from "better-auth/api";
 import { schema } from "./schema";
 import type { CloudflareGeolocation, CloudflarePluginOptions, WithCloudflareOptions } from "./types";
 export * from "./client";
@@ -31,17 +31,11 @@ export const cloudflare = (options?: CloudflarePluginOptions) => {
                     method: "GET",
                 },
                 async ctx => {
-                    const session = ctx.context?.session;
+                    const session = await getSessionFromCtx(ctx);
                     if (!session) {
                         return ctx.json({ error: "Unauthorized" }, { status: 401 });
                     }
 
-                    // Original code threw an error if ctx.request was not available.
-                    // Retaining similar logic but returning a 500 status code.
-                    if (!ctx.request) {
-                        return ctx.json({ error: "Request is not available" }, { status: 500 });
-                    }
-
                     const cf = getCloudflareContext().cf;
                     if (!cf) {
                         return ctx.json({ error: "Cloudflare context is not available" }, { status: 404 });
@@ -141,6 +135,13 @@ export const getGeolocation = (): CloudflareGeolocation | undefined => {
     };
 };
 
+/**
+ * Type helper to infer the enhanced auth type with Cloudflare plugin
+ */
+type WithCloudflareAuth<T extends BetterAuthOptions> = T & {
+    plugins: [ReturnType<typeof cloudflare>, ...(T["plugins"] extends readonly any[] ? T["plugins"] : [])];
+};
+
 /**
  * Enhances BetterAuthOptions with Cloudflare-specific configurations.
  *
@@ -151,7 +152,10 @@ export const getGeolocation = (): CloudflareGeolocation | undefined => {
  * @param options - The base BetterAuthOptions to be enhanced.
  * @returns BetterAuthOptions configured for use with Cloudflare.
  */
-export const withCloudflare = <T extends BetterAuthOptions>(cloudFlareOptions: WithCloudflareOptions, options: T) => {
+export const withCloudflare = <T extends BetterAuthOptions>(
+    cloudFlareOptions: WithCloudflareOptions,
+    options: T
+): WithCloudflareAuth<T> => {
     const autoDetectIpEnabled =
         cloudFlareOptions.autoDetectIpAddress === undefined || cloudFlareOptions.autoDetectIpAddress === true;
     const geolocationTrackingForSession =
@@ -191,7 +195,7 @@ export const withCloudflare = <T extends BetterAuthOptions>(cloudFlareOptions: W
         plugins: [cloudflare(cloudFlareOptions), ...(options.plugins ?? [])],
         advanced: updatedAdvanced,
         session: updatedSession,
-    } as T;
+    } as WithCloudflareAuth<T>;
 };
 
 export type SessionWithGeolocation = Session & CloudflareGeolocation;