Dev Comments - Answer Overflow

Dev

Explore posts from servers

CDCloudflare Developers DTDrizzle Team KKinde BABetter Auth

•Created by Dev on 3/1/2025 in #help

Type Error: Type instantiation is excessively deep and possibly infinite

auth.ts
export const auth = betterAuth({
    database: drizzleAdapter(getDrizzleDb(), {
        provider: "sqlite",
        schema: {
            user,
            session,
            account,
            verification,
        },
    }),
    user: {
        deleteUser: {
            enabled: true,
        },
    },
    plugins: [openAPI()],
    emailAndPassword: {
        enabled: true,
    },
    secret: env.BETTER_AUTH_SECRET,
});

auth.ts
export const auth = betterAuth({
    database: drizzleAdapter(getDrizzleDb(), {
        provider: "sqlite",
        schema: {
            user,
            session,
            account,
            verification,
        },
    }),
    user: {
        deleteUser: {
            enabled: true,
        },
    },
    plugins: [openAPI()],
    emailAndPassword: {
        enabled: true,
    },
    secret: env.BETTER_AUTH_SECRET,
});

src/app/api/[...route]/route.ts
import { Hono } from "hono";
import { handle } from "hono/vercel";
import { auth } from "@/lib/auth";

import hello from "./hello";
import user from "./user";
import chat from "./chat";
import messages from "./messages";

export const runtime = "edge";

const app = new Hono().basePath("/api");

const routes = app
    .route("/hello", hello)
    .route("/user", user)
    .route("/chat", chat)
    .route("/messages", messages);

app.on(["GET", "POST", "DELETE"], "/auth/*", (c) => {
    return auth.handler(c.req.raw);
});

export const GET = handle(app);
export const POST = handle(app);
export const DELETE = handle(app);

export type AppType = typeof routes;

src/app/api/[...route]/route.ts
import { Hono } from "hono";
import { handle } from "hono/vercel";
import { auth } from "@/lib/auth";

import hello from "./hello";
import user from "./user";
import chat from "./chat";
import messages from "./messages";

export const runtime = "edge";

const app = new Hono().basePath("/api");

const routes = app
    .route("/hello", hello)
    .route("/user", user)
    .route("/chat", chat)
    .route("/messages", messages);

app.on(["GET", "POST", "DELETE"], "/auth/*", (c) => {
    return auth.handler(c.req.raw);
});

export const GET = handle(app);
export const POST = handle(app);
export const DELETE = handle(app);

export type AppType = typeof routes;

2 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

Also, for anyone new, react-router framework specific docs will be appreciated

12 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

Thanks Phillex, this worked, ill keep that in mind,

12 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

okay now im not getting the method not allowed error but its still not signing me in this is how im doing it

export async function loader() {
    const { data: session } = await     authClient.getSession();
    console.log("session: ", session);
  return session;
}

export default function Home() {
const session = useLoaderData<typeof loader>();
return (
<div className="p-5">
  <div>
    <span>
    {session ? (
                  <>                    Signed in as {session.user.name}
        </>
    ) : (
        "Not signed in"
    )}
    </span>
  </div>
</div>
);
}

export async function loader() {
    const { data: session } = await     authClient.getSession();
    console.log("session: ", session);
  return session;
}

export default function Home() {
const session = useLoaderData<typeof loader>();
return (
<div className="p-5">
  <div>
    <span>
    {session ? (
                  <>                    Signed in as {session.user.name}
        </>
    ) : (
        "Not signed in"
    )}
    </span>
  </div>
</div>
);
}

12 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

this works but not as expected, its signing up the user if i use the onSubmit in the page itself (the nextjs way), ideally it should work with the action function, which it does not also, after the user is signed up, and i try to log in using the same methodology as signup, the "page" shows "Error - Method not allowed", with empty console logs, but the onSuccess method gets triggered and i get the alert of "sign up successful", but then session is null in the app, but in the cookies i can see the better-auth.session_token

12 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

>app/lib/auth.ts

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db/drizzle";
import { openAPI } from "better-auth/plugins";

export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg",
    }),
    emailAndPassword: {
        enabled: true,
    },
    plugins: [openAPI()],
    secret: process.env.BETTER_AUTH_SECRET!,
});

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";
import { db } from "@/db/drizzle";
import { openAPI } from "better-auth/plugins";

export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg",
    }),
    emailAndPassword: {
        enabled: true,
    },
    plugins: [openAPI()],
    secret: process.env.BETTER_AUTH_SECRET!,
});

>app/routes/api.auth.$.ts

import { auth } from "@/lib/auth";
import type { LoaderFunctionArgs, ActionFunctionArgs } from "react-router";

export async function loader({ request }: LoaderFunctionArgs) {
    return auth.handler(request);
}

export async function action({ request }: ActionFunctionArgs) {
    return auth.handler(request);
}

import { auth } from "@/lib/auth";
import type { LoaderFunctionArgs, ActionFunctionArgs } from "react-router";

export async function loader({ request }: LoaderFunctionArgs) {
    return auth.handler(request);
}

export async function action({ request }: ActionFunctionArgs) {
    return auth.handler(request);
}

>app/lib/auth-client.ts

import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: import.meta.env.BETTER_AUTH_URL!,
});

import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
    baseURL: import.meta.env.BETTER_AUTH_URL!,
});

12 replies

BABetter Auth

•Created by Dev on 2/17/2025 in #help

React Router v7 Integration

so i tried using the action function, which also didn't work // POST http://localhost:5173/auth/register.data 400 (Bad Request)

export async function action({ request }: Route.ActionArgs) {
    const formData = await request.formData();
    const email = formData.get("email") as string;
    const name = formData.get("name") as string;
    const password = formData.get("password") as string;

    try {
        await authClient.signUp.email(
            { email, password, name },
            {
                onRequest: () => {
                    console.warn("Sign up Initiated...");
                },
                onSuccess: () => {
                    console.log("Successfully signed up!");
                },
                onError: (ctx) => {
                    throw new Error(ctx.error.message);
                },
            }
        );
    } catch (error: any) {
        return new Response(JSON.stringify({ error: error.message }), {
            status: 400,
            headers: { "Content-Type": "application/json" },
        });
    }
}

export async function action({ request }: Route.ActionArgs) {
    const formData = await request.formData();
    const email = formData.get("email") as string;
    const name = formData.get("name") as string;
    const password = formData.get("password") as string;

    try {
        await authClient.signUp.email(
            { email, password, name },
            {
                onRequest: () => {
                    console.warn("Sign up Initiated...");
                },
                onSuccess: () => {
                    console.log("Successfully signed up!");
                },
                onError: (ctx) => {
                    throw new Error(ctx.error.message);
                },
            }
        );
    } catch (error: any) {
        return new Response(JSON.stringify({ error: error.message }), {
            status: 400,
            headers: { "Content-Type": "application/json" },
        });
    }
}

im not sure im doing it right or wrong

12 replies

CDCloudflare Developers

•Created by Dev on 2/9/2025 in #pages-help

Next.js + Cloudflare pages functions

im using next on pages, and i want to run both the frontend and the apis in functions dir with same command at same time

6 replies

CDCloudflare Developers

•Created by Dev on 2/9/2025 in #pages-help

Next.js + Cloudflare pages functions

when i run bun preview the apis inside the functions/api didnt work but if i run wrangler pages dev the frontend didnt load

6 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

ohh, got it, i'll check it out, thanks

17 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

these ones : "@cloudflare/next-on-pages": "1", "@cloudflare/workers-types": "^4.20250109.0", ?? and no, i only have one wrangler.toml file

17 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

how do i do that? i followed a tutorial on integrating hono in nextjs >src/app/api/[...route]/route.ts

import { Hono } from "hono";
import { handle } from "hono/vercel";
import hello from "./hello";
import chat from "./chat";
import textContext from "./context/text";

export const runtime = "edge";

const app = new Hono().basePath("/api");

const routes = app
    .route("/hello", hello)
    .route("/chat", chat)
    .route("/context/text", textContext);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

import { Hono } from "hono";
import { handle } from "hono/vercel";
import hello from "./hello";
import chat from "./chat";
import textContext from "./context/text";

export const runtime = "edge";

const app = new Hono().basePath("/api");

const routes = app
    .route("/hello", hello)
    .route("/chat", chat)
    .route("/context/text", textContext);

export const GET = handle(app);
export const POST = handle(app);

export type AppType = typeof routes;

>src/lib/hono-client.ts

import { hc } from "hono/client";
import { AppType } from "@/app/api/[...route]/route";
import { env } from "@/env";

export const client = hc<AppType>(env.NEXT_PUBLIC_BASE_URL!);

import { hc } from "hono/client";
import { AppType } from "@/app/api/[...route]/route";
import { env } from "@/env";

export const client = hc<AppType>(env.NEXT_PUBLIC_BASE_URL!);

17 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

>next.config.ts

import type { NextConfig } from "next";
import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
import { fileURLToPath } from "node:url";
import createJiti from "jiti";

const jiti = createJiti(fileURLToPath(import.meta.url));
jiti("./src/env.ts");

const nextConfig: NextConfig = {
    experimental: {
        serverActions: {
            bodySizeLimit: "2mb",
        },
    },
};

if (process.env.NODE_ENV === "development") {
    (async () => {
        await setupDevPlatform({
            persist: true,
        });
    })();
}

export default nextConfig;

import type { NextConfig } from "next";
import { setupDevPlatform } from "@cloudflare/next-on-pages/next-dev";
import { fileURLToPath } from "node:url";
import createJiti from "jiti";

const jiti = createJiti(fileURLToPath(import.meta.url));
jiti("./src/env.ts");

const nextConfig: NextConfig = {
    experimental: {
        serverActions: {
            bodySizeLimit: "2mb",
        },
    },
};

if (process.env.NODE_ENV === "development") {
    (async () => {
        await setupDevPlatform({
            persist: true,
        });
    })();
}

export default nextConfig;

17 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

 "devDependencies": {
        "@cloudflare/next-on-pages": "1",
        "@cloudflare/workers-types": "^4.20250109.0",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "drizzle-kit": "^0.30.2",
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "typescript": "^5",
        "vercel": "^39.3.0",
        "wrangler": "^3.103.2"
    }

 "devDependencies": {
        "@cloudflare/next-on-pages": "1",
        "@cloudflare/workers-types": "^4.20250109.0",
        "@types/node": "^20",
        "@types/react": "^19",
        "@types/react-dom": "^19",
        "drizzle-kit": "^0.30.2",
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "typescript": "^5",
        "vercel": "^39.3.0",
        "wrangler": "^3.103.2"
    }

17 replies

CDCloudflare Developers

•Created by Dev on 1/25/2025 in #pages-help

Help: Binding undefined during build process

sure, >package.json

{
    "name": "dropbase",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "npm run format && next dev --turbopack",
        "build": "next build",
        "start": "next start",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
        "format": "count=$(prettier --write . --log-level silent | grep -v '(unchanged)' | wc -l); echo \"$count files formatted\"",
        "check": "npm run lint && npm run format:check",
        "format:check": "prettier --check .",
        "pages:build": "bunx @cloudflare/next-on-pages",
        "preview": "bun pages:build && wrangler pages dev --experimental-vectorize-bind-to-prod --ai",
        "deploy": "bun pages:build && wrangler pages deploy",
        "cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts",
        "generate": "drizzle-kit generate",
        "migrate": "wrangler d1 migrations apply ragchat --remote",
        "studio": "drizzle-kit studio"
    },
    "dependencies": {
        "@cloudflare/ai": "^1.2.2",
        "@hono/zod-validator": "^0.4.2",
        "@hookform/resolvers": "^3.10.0",
        "@phosphor-icons/react": "^2.1.7",
        "@radix-ui/react-dialog": "^1.1.5",
        "@radix-ui/react-label": "^2.1.1",
        "@radix-ui/react-popover": "^1.1.5",
        "@radix-ui/react-slot": "^1.1.1",
        "@radix-ui/react-tooltip": "^1.1.6",
        "@t3-oss/env-nextjs": "^0.11.1",
        "better-auth": "^1.1.14",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "drizzle-orm": "^0.38.4",
        "hono": "^4.6.17",
        "lucide-react": "^0.473.0",
        "next": "15.1.4",
        "next-themes": "^0.4.4",
        "prettier": "^3.4.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-hook-form": "^7.54.2",
        "sonner": "^1.7.2",
        "tailwind-merge": "^2.6.0",
        "tailwindcss-animate": "^1.0.7",
        "zod": "^3.24.1"
    },

{
    "name": "dropbase",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "npm run format && next dev --turbopack",
        "build": "next build",
        "start": "next start",
        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
        "format": "count=$(prettier --write . --log-level silent | grep -v '(unchanged)' | wc -l); echo \"$count files formatted\"",
        "check": "npm run lint && npm run format:check",
        "format:check": "prettier --check .",
        "pages:build": "bunx @cloudflare/next-on-pages",
        "preview": "bun pages:build && wrangler pages dev --experimental-vectorize-bind-to-prod --ai",
        "deploy": "bun pages:build && wrangler pages deploy",
        "cf-typegen": "wrangler types --env-interface CloudflareEnv env.d.ts",
        "generate": "drizzle-kit generate",
        "migrate": "wrangler d1 migrations apply ragchat --remote",
        "studio": "drizzle-kit studio"
    },
    "dependencies": {
        "@cloudflare/ai": "^1.2.2",
        "@hono/zod-validator": "^0.4.2",
        "@hookform/resolvers": "^3.10.0",
        "@phosphor-icons/react": "^2.1.7",
        "@radix-ui/react-dialog": "^1.1.5",
        "@radix-ui/react-label": "^2.1.1",
        "@radix-ui/react-popover": "^1.1.5",
        "@radix-ui/react-slot": "^1.1.1",
        "@radix-ui/react-tooltip": "^1.1.6",
        "@t3-oss/env-nextjs": "^0.11.1",
        "better-auth": "^1.1.14",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "drizzle-orm": "^0.38.4",
        "hono": "^4.6.17",
        "lucide-react": "^0.473.0",
        "next": "15.1.4",
        "next-themes": "^0.4.4",
        "prettier": "^3.4.2",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-hook-form": "^7.54.2",
        "sonner": "^1.7.2",
        "tailwind-merge": "^2.6.0",
        "tailwindcss-animate": "^1.0.7",
        "zod": "^3.24.1"
    },

17 replies

Gaming

Programming