Mattèo Posts - Answer Overflow

Mattèo

Explore posts from servers

TtRPC PPrisma TTCTheo's Typesafe Cult HHono KKinde BABetter Auth

•Created by Mattèo on 4/30/2025 in #help

MagicLink `sendMagicLink` thrown errors are not sended as error response.

Hey, I don't know if it's a bug, but I can't find a way to handle errors on client side when plugin methods fails...

  plugins: [
    magicLink({
      sendMagicLink: async ({ email, token, url }, request) => {
        throw new Error("Issue while sending email")
      },
    }),
  ],

  plugins: [
    magicLink({
      sendMagicLink: async ({ email, token, url }, request) => {
        throw new Error("Issue while sending email")
      },
    }),
  ],

Does someone have an idea ?

2 replies

BABetter Auth

•Created by Mattèo on 4/27/2025 in #help

How to handle phoneNumber.sendOtp errors ? Only 500 is returned

Hey, I wanted to know if it's possible to handle errors that happen in the sendOtp option of the phoneNumber plugin. Currently, throwed errors are sent as 500 without proper error message. If the user provides a malformed input, I may want to be able to return a specific error for that, not just 500. Does someone had this problem before, or can someone help me? Wishing you a good day 😉

5 replies

HHono

•Created by Mattèo on 4/22/2025 in #help

Got `unknown` type on res.json() on a OpenAPI RPC route

Hey ! I have an issue with RPC client and OpenAPI route inference. Reproduction : https://stackblitz.com/edit/vitejs-vite-lqsp6pho?file=index.ts

import { hc } from "hono/client"
import app from "./openapi"
import { serve } from "@hono/node-server"

serve(app)

const client = hc<typeof app>("http://localhost:3000")

const res = await client["calendar-debug"].$get({
/*   ^? const res: ClientResponse<{
    page: number;
    limit: number;
    total: number;
    events: {
        type: string;
        title: string;
        status: string;
        clubId: string;
....

Type of res seems to be good
*/
  query: {
    page: "1",
    limit: "10",
    clubId: "1",
    sportId: "1",
  },
})
const data = await res.json() 
//    ^? unknown

console.log(data)

import { hc } from "hono/client"
import app from "./openapi"
import { serve } from "@hono/node-server"

serve(app)

const client = hc<typeof app>("http://localhost:3000")

const res = await client["calendar-debug"].$get({
/*   ^? const res: ClientResponse<{
    page: number;
    limit: number;
    total: number;
    events: {
        type: string;
        title: string;
        status: string;
        clubId: string;
....

Type of res seems to be good
*/
  query: {
    page: "1",
    limit: "10",
    clubId: "1",
    sportId: "1",
  },
})
const data = await res.json() 
//    ^? unknown

console.log(data)

Does someone had this problem before, or can someone help me? Wishing you a good day 😉

3 replies

BABetter Auth

•Created by Mattèo on 2/4/2025 in #help

Is it a possible to use enum as type for fields in additionalFields ?

I want to use the role field directly with my user session, I have a enum with "ADMIN" and "USER"

19 replies

HHono

•Created by Mattèo on 1/31/2025 in #help

Using @hono/auth-js with one API server (auth) and one web server (front) ?

Hey, hope Hono fans are doing well, I'm wondering if it's possible to use a distant API (not on the same hostname) with authjs ? I've seen multiple examples with @hono/auth-js but they are always relying on the vite proxy server to serve the api on the same host as the frontend server. Example usages of the @hono/auth-js lib : - https://github.com/divyam234/next-auth-hono-react - https://github.com/honojs/middleware/blob/main/packages/auth-js/test/index.test.ts - https://github.com/tgdrive/rdebrid-ui/ Can anyone help me? I don't want to proxy my API to example.com/api/auth because I prefer using a separate hostname like this api.example.com Thanks for reading me ! 😊 Wishing you a good day 😉

17 replies

HHono

•Created by Mattèo on 1/30/2025 in #help

Hono + Bun + Better Auth 404 error when using app.route

Hey, I'm trying to setup a hono server like this, but when I call the /api/auth/ok endpoint I got a 404. In fact I'm also using a app.route() in my entryfile. A very strange behavior break the "/api/auth/**" matching Working version

const app = new Hono()

const userRoute = new Hono()
  // .get("/top", (c) => {
  //   return c.json({ message: "Top" }, 200)
  // })
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

app.on(["POST", "GET"], "/api/auth/**", (c) => {
  return c.json({ message: "Hello" }, 200)
})

export default app

// curl http://localhost:3000/api/auth/ok 
// {"message":"Hello"}

const app = new Hono()

const userRoute = new Hono()
  // .get("/top", (c) => {
  //   return c.json({ message: "Top" }, 200)
  // })
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

app.on(["POST", "GET"], "/api/auth/**", (c) => {
  return c.json({ message: "Hello" }, 200)
})

export default app

// curl http://localhost:3000/api/auth/ok 
// {"message":"Hello"}

Non working version

const userRoute = new Hono()
  .get("/top", (c) => {
    return c.json({ message: "Top" }, 200)
  }) // I've added this 😅😅😅😅
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

app.on(["POST", "GET"], "/api/auth/**", (c) => {
  return c.json({ message: "Hello" }, 200)
})

export default app
// curl http://localhost:3000/api/auth/ok 
// 404 Not Found

const userRoute = new Hono()
  .get("/top", (c) => {
    return c.json({ message: "Top" }, 200)
  }) // I've added this 😅😅😅😅
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

app.on(["POST", "GET"], "/api/auth/**", (c) => {
  return c.json({ message: "Hello" }, 200)
})

export default app
// curl http://localhost:3000/api/auth/ok 
// 404 Not Found

It's really strange that this bug happen when I have a new endpoint declarated Has anyone had this problem before, or can anyone help me? Wishing you a good day 😉

2 replies

BABetter Auth

•Created by Mattèo on 1/30/2025 in #help

Hono + Bun gives a 404 on /api/auth/ok endpoint

Hey, I'm trying to setup better-auth on a hono server like this, but when I call the /api/auth/ok endpoint I got a 404. In fact I'm also using a app.route() in my entryfile. Working version

const app = new Hono()

const userRoute = new Hono()
  // .get("/top", (c) => {
  //   return c.json({ message: "Top" }, 200)
  // })
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

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

export default app

const app = new Hono()

const userRoute = new Hono()
  // .get("/top", (c) => {
  //   return c.json({ message: "Top" }, 200)
  // })
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

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

export default app

Non working version

const userRoute = new Hono()
  .get("/top", (c) => {
    return c.json({ message: "Top" }, 200)
  }) // I've added this 😅😅😅😅
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

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

export default app

const userRoute = new Hono()
  .get("/top", (c) => {
    return c.json({ message: "Top" }, 200)
  }) // I've added this 😅😅😅😅
  .get(
    "/:id",
    zValidator(
      "param",
      z.object({
        id: z.string(),
      })
    ),
    (c) => {
      return c.json({ message: `Hello ${c.req.param("id")}` }, 200)
    }
  )

const routes = app.route("/user", userRoute)

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

export default app

It's really strange that this bug happen when I have a new endpoint declarated Has anyone had this problem before, or can anyone help me? Wishing you a good day 😉

7 replies

HHono

•Created by Mattèo on 1/27/2025 in #help

Can't get the RPC typing

Hey ! Hope you're doing well, I have an issue with the RPC types, how can I manage to get the client types ?

// hc.ts
import router from "./root";
import { hc } from "hono/client";

const client = hc<typeof router>("");

export type Client = typeof client;

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
  hc<typeof router>(...args);

const test = hcWithType("http://localhost:3000/api");
//     ^? unknown

// hc.ts
import router from "./root";
import { hc } from "hono/client";

const client = hc<typeof router>("");

export type Client = typeof client;

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
  hc<typeof router>(...args);

const test = hcWithType("http://localhost:3000/api");
//     ^? unknown

// root.ts
import { Hono } from "hono";
import userRouter from "./services/user";
import todoRouter from "./services/todo";
import { cors } from "hono/cors";

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

app.use(
  "*",
  cors({
    origin:
      process.env.NODE_ENV === "development" ? "*" : "https://app.example.com",
  }),
);

const router = app.route("/users", userRouter).route("/todos", todoRouter);

export default router;

// root.ts
import { Hono } from "hono";
import userRouter from "./services/user";
import todoRouter from "./services/todo";
import { cors } from "hono/cors";

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

app.use(
  "*",
  cors({
    origin:
      process.env.NODE_ENV === "development" ? "*" : "https://app.example.com",
  }),
);

const router = app.route("/users", userRouter).route("/todos", todoRouter);

export default router;

23 replies

PPrisma

•Created by Mattèo on 10/31/2024 in #help-and-questions

How to use set a relation and update in the same time rows

Hey ! I wanted to know if someone know how to achieve this :

      const data: Prisma.ModuleUpdateInput = {
        name: input.name,
        description: input.description,
        course: {
          connect: {
            id: input.course,
          },
        },
        // Here is a one to many relation with Module <-* Lesson
        lessons:
          lessons.length > 0
            ? {
                set: lessons.map((lessonId, index) => ({
                  id: lessonId,
                  // Adding this field don't works, only the first item is linked
                  order: index,
                })),
              }
            : undefined,
      }

      const data: Prisma.ModuleUpdateInput = {
        name: input.name,
        description: input.description,
        course: {
          connect: {
            id: input.course,
          },
        },
        // Here is a one to many relation with Module <-* Lesson
        lessons:
          lessons.length > 0
            ? {
                set: lessons.map((lessonId, index) => ({
                  id: lessonId,
                  // Adding this field don't works, only the first item is linked
                  order: index,
                })),
              }
            : undefined,
      }

Has anyone had this problem before, or can anyone help me? Wishing you a good day 😉

2 replies

PPrisma

•Created by Mattèo on 7/19/2024 in #help-and-questions

Slowness issue when using Supavisor connection pooling with Prisma

Hey Prisma community, I've set up Supabase Supavisor connection pooling on my Supabase project but it turns out that the request is abnormally slow with Prisma when I use supavisor. I compared the time it took to make a request with console.time and the result was clear. The tests are done locally with a remote postgres database hosted on Supabase with Supavisor enabled. I have the latest version of Prisma installed Here is my connection string in my .env

# Slow setup for Supabase with Supavisor
DATABASE_URL="postgres://postgres.project_id:[email protected]:6543/postgres?pgbouncer=true&connection_limit=1"
DIRECT_DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"

# Fast setup for Supabase without using Supavisor
DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"
DIRECT_DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"

# Slow setup for Supabase with Supavisor
DATABASE_URL="postgres://postgres.project_id:[email protected]:6543/postgres?pgbouncer=true&connection_limit=1"
DIRECT_DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"

# Fast setup for Supabase without using Supavisor
DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"
DIRECT_DATABASE_URL="postgres://postgres.project_id:[email protected]:5432/postgres"

// schema.prisma

datasource db {
    provider  = "postgresql"
    url       = env("DATABASE_URL")
    directUrl = env("DIRECT_DATABASE_URL")
}

// schema.prisma

datasource db {
    provider  = "postgresql"
    url       = env("DATABASE_URL")
    directUrl = env("DIRECT_DATABASE_URL")
}

    console.time("totalStudents");
    const totalStudents = await db.user.count({
      where: {
        role: "STUDENT",
      },
    });
    console.timeEnd("totalStudents");

    console.time("totalStudents");
    const totalStudents = await db.user.count({
      where: {
        role: "STUDENT",
      },
    });
    console.timeEnd("totalStudents");

With Supavisor : 291.246ms Without Supavisor (same connection string in DATABASE_URLand DIRECT_DATABASE_URL) : 52.009ms Does someone can help me ? Have a nice day😉

2 replies

TtRPC

•Created by Mattèo on 2/14/2024 in #❓-help

Can I perform react query queries without using a trpc procedure, using useQuery standalone

Hey, I need to perform a client site request, and I can't implement it with TRPC, so can I use regular useQuery method in my Next.js app ? Will the useQuery will be attached to the React Query context of TRPC ?

2 replies

TTCTheo's Typesafe Cult

•Created by Mattèo on 1/16/2024 in #questions

How to authenticate users on a dynamic sudomain (next-auth)

Hey ! Hope you're doing well, I'm working on a project and I try to implement authentication on multiple domain with next-auth and Next.js Pages router. Here is a basic schema : - app.localhost:3000 (Admin only subdomain for managing the app, authentication needed) - [tenant].localhost:3000 (Authentication needed here using next-auth) Can someone help me with this. Currently, I got it working but I can't access session while i'm calling useSession from [tenant].localhost:3000. My NEXTAUTH_URL is http://app.localhost:3000

5 replies

TtRPC

•Created by Mattèo on 12/31/2023 in #❓-help

How to handle Query Errors on client side (show toast on 401)

Hey ! Hope you're doing well ! I wanted to know if someone can explain to me how to handle errors on the client (using Next.js). I need to handle UNAUTHENTICATED error on client because when a user tries to access a resource I want to display a feedback toast. Thanks 🙏

3 replies

TtRPC

•Created by Mattèo on 12/9/2023 in #❓-help

How to create a React Component that fetch API based on a router from props ?

I want to pass in my React component props the name of the router to use, here is my current implementation :

export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
  const router = useRouter()

  const deleteMutation = api[model].delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    // Error here : Type '[]' has no properties in common with type...
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}

export const RowActionDeleteButton = ({ id, model}: { id: string; model : 'lesson' | 'module' }) => {
  const router = useRouter()

  const deleteMutation = api[model].delete.useMutation({
    onSuccess: () => {
      router.reload()
      toast.success(`Key ${id} deleted`)
    },
    onError: (err, variables) => {
      router.reload()
      toast.error(`Error deleting key ${id}`)
      console.error(err, variables)
    },
  })

  return (
    // Error here : Type '[]' has no properties in common with type...
    <Button variant="destructive" onClick={() => deleteMutation.mutate({ id })}>
      Delete
    </Button>
  )
}

Does someone already achieve something like this ?

3 replies

TTCTheo's Typesafe Cult

•Created by Mattèo on 3/6/2023 in #questions

Best ways to render a React component conditionally with Next (based on build time conditions)

1 replies

Gaming

Programming